feat: make state-based attributes reactive

2026-07-14 00:43:07 +05:30
parent 4ce087b238
commit 420706ca3b
61 changed files with 221 additions and 99 deletions
@@ -128,6 +128,23 @@ test("data-show toggles visibility on a reactive expression (tabs pattern)", ()
  expect(disp("b")).toBe("");
 });

+test("reactive attribute bindings update input and accessibility attributes", () => {
+  const win = mount(
+    `<div data-scope="show: false">
+       <input id="password" type="password" data-wrn-bind-0='["type","{show ? &#39;text&#39; : &#39;password&#39;}"]'>
+       <button data-on-click="show = !show" aria-label="Show password"
+         data-wrn-bind-0='["aria-label","{show ? &#39;Hide password&#39; : &#39;Show password&#39;}"]'>Toggle</button>
+     </div>`,
+  );
+  const input = win.document.getElementById("password") as unknown as HTMLInputElement;
+  const button = win.document.querySelector("button") as unknown as HTMLElement;
+  expect(input.type).toBe("password");
+  expect(button.getAttribute("aria-label")).toBe("Show password");
+  button.click();
+  expect(input.type).toBe("text");
+  expect(button.getAttribute("aria-label")).toBe("Hide password");
+});
+
 test("independent signals in one scope update correctly (dependency tracking)", () => {
  const win = mount(
    `<div data-scope="a: 0, b: 100">