fix: implement radio group logic

src/getNodeAccessibilityData/getAccessibleAttributeLabels/getLabelFromImplicitHtmlElementValue/getSet.ts

@@ -1,4 +1,5 @@
 import type { AccessibilityNodeTree } from "../../../createAccessibilityTree";
+import { isElement } from "../../../isElement";
 
 const getFirstNestedChildrenByRole = ({
  role,
@@ -15,22 +16,104 @@ const getFirstNestedChildrenByRole = ({
  return getFirstNestedChildrenByRole({ role, tree: child });
  });
 
-const getSiblingsByRoleAndLevel = ({
+const getParentByRole = ({
  role,
  tree,
 }: {
  role: string;
  tree: AccessibilityNodeTree;
-}): AccessibilityNodeTree[] => {
+}): AccessibilityNodeTree => {
  let parentTree = tree;
 
  while (parentTree.role !== role && parentTree.parentAccessibilityNodeTree) {
  parentTree = parentTree.parentAccessibilityNodeTree;
  }
 
+ return parentTree;
+};
+
+const getSiblingsByRoleAndLevel = ({
+ role,
+ parentRole = role,
+ tree,
+}: {
+ role: string;
+ parentRole?: string;
+ tree: AccessibilityNodeTree;
+}): AccessibilityNodeTree[] => {
+ const parentTree = getParentByRole({ role: parentRole, tree });
+
  return getFirstNestedChildrenByRole({ role, tree: parentTree });
 };
 
+const getFormOwnerTree = ({ tree }: { tree: AccessibilityNodeTree }) =>
+ getParentByRole({ role: "form", tree });
+
+const getRadioInputsByName = ({
+ name,
+ tree,
+}: {
+ name: string;
+ tree: AccessibilityNodeTree;
+}): AccessibilityNodeTree[] =>
+ tree.children.flatMap((child) => {
+ if (isElement(child.node) && child.node.getAttribute("name") === name) {
+ return child;
+ }
+
+ return getRadioInputsByName({ name, tree: child });
+ });
+
+/**
+ * The radio button group that contains an input element a also contains all
+ * the other input elements b that fulfill all of the following conditions:
+ *
+ * - The input element b's type attribute is in the Radio Button state.
+ * - Either a and b have the same form owner, or they both have no form owner.
+ * - Both a and b are in the same tree.
+ * - They both have a name attribute, their name attributes are not empty, and
+ * the value of a's name attribute equals the value of b's name attribute.
+ *
+ * REF: https://html.spec.whatwg.org/multipage/input.html#radio-button-group
+ */
+const getRadioGroup = ({
+ node,
+ tree,
+}: {
+ node: HTMLElement;
+ tree: AccessibilityNodeTree;
+}) => {
+ /**
+ * Authors SHOULD ensure that elements with role radio are explicitly grouped
+ * in order to indicate which ones affect the same value. This is achieved by
+ * enclosing the radio elements in an element with role radiogroup. If it is
+ * not possible to make the radio buttons DOM children of the radiogroup,
+ * authors SHOULD use the aria-owns attribute on the radiogroup element to
+ * indicate the relationship to its children.
+ */
+ if (node.localName !== "input") {
+ return getSiblingsByRoleAndLevel({
+ role: "radio",
+ parentRole: "radiogroup",
+ tree,
+ });
+ }
+
+ if (!node.hasAttribute("name")) {
+ return [];
+ }
+
+ const name = node.getAttribute("name")!;
+
+ if (!name) {
+ return [];
+ }
+
+ const formOwnerTree = getFormOwnerTree({ tree });
+
+ return getRadioInputsByName({ name, tree: formOwnerTree });
+};
+
 const getChildrenByRole = ({
  role,
  tree,
@@ -75,16 +158,29 @@ const getChildrenByRole = ({
  * REF: https://www.w3.org/TR/core-aam-1.2/#mapping_additional_position
  */
 export const getSet = ({
+ node,
  role,
  tree,
 }: {
- role: string;
+ node: HTMLElement;
  tree: AccessibilityNodeTree;
-}): AccessibilityNodeTree[] => {
+ role: string;
+}): Pick<AccessibilityNodeTree, "node">[] => {
  if (role === "treeitem") {
  return getSiblingsByRoleAndLevel({ role, tree });
  }
 
+ /**
+ * With aria-setsize value reflecting number of type=radio input elements
+ * within the radio button group and aria-posinset value reflecting the
+ * elements position within the radio button group.
+ *
+ * REF: https://www.w3.org/TR/html-aam-1.0/#el-input-radio
+ */
+ if (role === "radio") {
+ return getRadioGroup({ node, tree });
+ }
+
  return getChildrenByRole({
  role,
  tree,

src/getNodeAccessibilityData/getAccessibleAttributeLabels/getLabelFromImplicitHtmlElementValue/index.ts

@@ -14,6 +14,55 @@ const headingLocalNameToLevelMap: Record<string, string> = {
  h6: "6",
 };
 
+const getNodeSet = ({
+ node,
+ role,
+ tree,
+}: {
+ node: HTMLElement;
+ tree: AccessibilityNodeTree | null;
+ role: string;
+}): Pick<AccessibilityNodeTree, "node">[] | null => {
+ if (!tree) {
+ return null;
+ }
+
+ /**
+ * When an article is in the context of a feed, the author MAY specify
+ * values for aria-posinset and aria-setsize.
+ *
+ * REF: https://www.w3.org/TR/wai-aria-1.2/#article
+ *
+ * This is interpreted as the author being allowed to specify a value when
+ * nested in a feed, but there are no requirements in the specifications
+ * for an article role to expose an implicit value, even within a feed.
+ */
+ if (role === "article") {
+ return null;
+ }
+
+ /**
+ * While the row role can be used in a table, grid, or treegrid, the semantics
+ * of aria-expanded, aria-posinset, aria-setsize, and aria-level are only
+ * applicable to the hierarchical structure of an interactive tree grid.
+ * Therefore, authors MUST NOT apply aria-expanded, aria-posinset,
+ * aria-setsize, and aria-level to a row that descends from a table or grid,
+ * and user agents SHOULD NOT expose any of these four properties to assistive
+ * technologies unless the row descends from a treegrid.
+ *
+ * REF: https://www.w3.org/TR/wai-aria-1.2/#row
+ */
+ if (role === "row" && !hasTreegridAncestor(tree)) {
+ return null;
+ }
+
+ return getSet({
+ node,
+ role,
+ tree,
+ });
+};
+
 type Mapper = ({
  node,
  tree,
@@ -92,43 +141,12 @@ const mapHtmlElementAriaToImplicitValue: Record<string, Mapper> = {
  * REF: https://www.w3.org/TR/wai-aria-1.2/#aria-posinset
  */
  "aria-posinset": ({ node, tree, role }) => {
- if (!tree) {
- return "";
- }
+ const nodeSet = getNodeSet({ node, role, tree });
 
- /**
- * When an article is in the context of a feed, the author MAY specify
- * values for aria-posinset and aria-setsize.
- *
- * REF: https://www.w3.org/TR/wai-aria-1.2/#article
- *
- * This is interpreted as the author being allowed to specify a value when
- * nested in a feed, but there are no requirements in the specifications
- * for an article role to expose an implicit value, even within a feed.
- */
- if (role === "article") {
+ if (!nodeSet?.length) {
  return "";
  }
 
- /**
- * While the row role can be used in a table, grid, or treegrid, the semantics
- * of aria-expanded, aria-posinset, aria-setsize, and aria-level are only
- * applicable to the hierarchical structure of an interactive tree grid.
- * Therefore, authors MUST NOT apply aria-expanded, aria-posinset,
- * aria-setsize, and aria-level to a row that descends from a table or grid,
- * and user agents SHOULD NOT expose any of these four properties to assistive
- * technologies unless the row descends from a treegrid.
- *
- * REF: https://www.w3.org/TR/wai-aria-1.2/#row
- */
- if (role === "row" && !hasTreegridAncestor(tree)) {
- return "";
- }
-
- const nodeSet = getSet({
- role,
- tree,
- });
  const index = nodeSet.findIndex((child) => child.node === node);
 
  return `${index + 1}`;
@@ -152,45 +170,13 @@ const mapHtmlElementAriaToImplicitValue: Record<string, Mapper> = {
  *
  * REF: https://www.w3.org/TR/wai-aria-1.2/#aria-setsize
  */
- "aria-setsize": ({ tree, role }) => {
- if (!tree) {
- return "";
- }
+ "aria-setsize": ({ node, tree, role }) => {
+ const nodeSet = getNodeSet({ node, role, tree });
 
- /**
- * When an article is in the context of a feed, the author MAY specify
- * values for aria-posinset and aria-setsize.
- *
- * REF: https://www.w3.org/TR/wai-aria-1.2/#article
- *
- * This is interpreted as the author being allowed to specify a value when
- * nested in a feed, but there are no requirements in the specifications
- * for an article role to expose an implicit value, even within a feed.
- */
- if (role === "article") {
+ if (!nodeSet?.length) {
  return "";
  }
 
- /**
- * While the row role can be used in a table, grid, or treegrid, the semantics
- * of aria-expanded, aria-posinset, aria-setsize, and aria-level are only
- * applicable to the hierarchical structure of an interactive tree grid.
- * Therefore, authors MUST NOT apply aria-expanded, aria-posinset,
- * aria-setsize, and aria-level to a row that descends from a table or grid,
- * and user agents SHOULD NOT expose any of these four properties to assistive
- * technologies unless the row descends from a treegrid.
- *
- * REF: https://www.w3.org/TR/wai-aria-1.2/#row
- */
- if (role === "row" && !hasTreegridAncestor(tree)) {
- return "";
- }
-
- const nodeSet = getSet({
- role,
- tree,
- });
-
  return `${nodeSet.length}`;
  },
 };

test/int/accessibleValue.int.test.ts

@@ -78,9 +78,7 @@ describe("Placeholder Attribute Property", () => {
  await virtual.next();
  await virtual.next();
 
- expect(await virtual.lastSpokenPhrase()).toBe(
- "radio, Label, not checked, position 1, set size 1"
- );
+ expect(await virtual.lastSpokenPhrase()).toBe("radio, Label, not checked");
 
  await virtual.stop();
  });
@@ -95,9 +93,7 @@ describe("Placeholder Attribute Property", () => {
  await virtual.next();
  await virtual.next();
 
- expect(await virtual.lastSpokenPhrase()).toBe(
- "radio, Label, not checked, position 1, set size 1"
- );
+ expect(await virtual.lastSpokenPhrase()).toBe("radio, Label, not checked");
 
  await virtual.stop();
  });