fix: better accessible values

Author: jlp-craigmorten

src/Virtual.ts

@@ -175,6 +175,22 @@ export class Virtual implements ScreenReader {
     this.#spokenPhraseLog.push(spokenPhrase);
   }
 
+  async #refreshState() {
+    await tick();
+
+    this.#invalidateTreeCache();
+    const tree = this.#getAccessibilityTree();
+
+    if (!tree.length) {
+      return;
+    }
+
+    const currentIndex = this.#getCurrentIndexByNode(tree);
+    const newActiveNode = tree.at(currentIndex);
+
+    this.#updateState(newActiveNode);
+  }
+
   #getCurrentIndex(tree: AccessibilityNode[]) {
     return tree.findIndex(
       ({
@@ -194,6 +210,10 @@ export class Virtual implements ScreenReader {
     );
   }
 
+  #getCurrentIndexByNode(tree: AccessibilityNode[]) {
+    return tree.findIndex(({ node }) => node === this.#activeNode?.node);
+  }
+
   /**
    * Detect whether the screen reader is supported for the current OS.
    *
@@ -396,6 +416,7 @@ export class Virtual implements ScreenReader {
 
     await this.click();
     await userEvent.keyboard(keyboardCommand, defaultUserEventOptions);
+    await this.#refreshState();
 
     return;
   }
@@ -422,6 +443,7 @@ export class Virtual implements ScreenReader {
 
     const target = this.#activeNode.node as HTMLElement;
     await userEvent.type(target, text, defaultUserEventOptions);
+    await this.#refreshState();
 
     return;
   }

src/getNodeAccessibilityData/getAccessibleValue.ts

@@ -1,5 +1,40 @@
 import { isElement } from "../isElement";
 
+function getSelectValue(node) {
+  const selectedOptions = [...node.options].filter((option) => option.selected);
+
+  if (node.multiple) {
+    return [...selectedOptions].map((opt) => opt.value).join("; ");
+  }
+
+  if (selectedOptions.length === 0) {
+    return "";
+  }
+
+  return selectedOptions[0].value;
+}
+
+function getInputValue(node) {
+  if (["checkbox", "radio"].includes(node.type)) {
+    return "";
+  }
+
+  return node.value;
+}
+
 export function getAccessibleValue(node: Node) {
-  return isElement(node) ? node.getAttribute("value") ?? "" : "";
+  if (!isElement(node)) {
+    return "";
+  }
+
+  switch (node.localName) {
+    case "input": {
+      return getInputValue(node);
+    }
+    case "select": {
+      return getSelectValue(node);
+    }
+  }
+
+  return "";
 }

test/int/press.int.test.ts

@@ -27,9 +27,7 @@ describe("press", () => {
     await virtual.press("Shift+a+b+c");
     // TODO: FAIL: Testing Library user-event doesn't support modification yet, this should be "ABC"
     expect(getByRole(container, "textbox")).toHaveValue("abc");
-
-    // TODO: FAIL: item text should include the now non-empty value "ABC"
-    expect(await virtual.itemText()).toEqual("Input Some Text");
+    expect(await virtual.itemText()).toEqual("Input Some Text, abc");
 
     await virtual.stop();
   });

test/int/type.int.test.ts

@@ -14,6 +14,10 @@ describe("type", () => {
     setupInputPage();
   });
 
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
   it("should type on the active element", async () => {
     const container = document.body;
 
@@ -26,9 +30,7 @@ describe("type", () => {
 
     await virtual.type("Hello World!");
     expect(getByRole(container, "textbox")).toHaveValue("Hello World!");
-
-    // TODO: FAIL: item text should include the now non-empty value "Hello World!"
-    expect(await virtual.itemText()).toEqual("Input Some Text");
+    expect(await virtual.itemText()).toEqual("Input Some Text, Hello World!");
 
     await virtual.stop();
   });

test/wpt/html-aam/roles.int.test.ts

@@ -308,7 +308,7 @@ describe("HTML-AAM Role Verification Tests", () => {
       "checkbox",
       "textbox",
       "radio",
-      "slider, orientated horizontally, max value 100, min value 0",
+      "slider, 50, orientated horizontally, max value 100, min value 0",
       "button, x",
       "searchbox",
       "button, x",
@@ -356,10 +356,10 @@ describe("HTML-AAM Role Verification Tests", () => {
       "x",
       "end of listitem",
       "end of list",
-      "combobox, not expanded, has popup listbox",
+      "combobox, x, not expanded, has popup listbox",
       "option, x, not selected",
       "option, x, not selected",
-      "end of combobox, not expanded, has popup listbox",
+      "end of combobox, x, not expanded, has popup listbox",
       "status",
       "x",
       "end of status",

test/wpt/html-aam/table-roles.int.test.ts

@@ -55,9 +55,9 @@ describe("HTML-AAM Table Role Verification Tests", () => {
     expect(await virtual.spokenPhraseLog()).toEqual([
       "document",
       "table, caption",
-      "caption", // TODO: FAIL caption should have role of caption
+      "caption",
       "rowgroup",
-      "row, a b c", // TODO: Should rows have accessible name of their columns? Likely not?
+      "row, a b c",
       "columnheader, a",
       "columnheader, b",
       "columnheader, c",