fix: Use label attribute for naming of <optgroup> (#629)

eps1lon · May 3, 2021 · 383bdb6 · 383bdb6
1 parent 0485441
commit 383bdb6
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 0 deletions.
diff --git a/.changeset/pretty-tigers-brake.md b/.changeset/pretty-tigers-brake.md
@@ -0,0 +1,22 @@
+---
+"dom-accessibility-api": patch
+---
+
+Use label attribute for naming of `<optgroup>` elements.
+
+Given
+
+```jsx
+<select>
+	<optgroup label="foo">
+		<option value="1">bar</option>
+	</optgroup>
+</select>
+```
+
+Previously the `<optgroup />` would not have an accessible name.
+Though [2D in `accname` 1.2](https://www.w3.org/TR/accname-1.2/) could be interpreted to use the `label` attribute:
+
+> Otherwise, if the current node's native markup provides an attribute (e.g. title) or element (e.g. HTML label) that defines a text alternative, return that alternative [...]
+
+This was confirmed in NVDA + FireFox.
diff --git a/sources/__tests__/accessible-name.js b/sources/__tests__/accessible-name.js
@@ -101,6 +101,11 @@ describe("to upstream", () => {
 			`<li data-test role="menuitemcheckbox"><em>greek</em> iota</li>`,
 			"greek iota",
 		],
+		[
+			"optgroup",
+			`<select><optgroup data-test label="foo"><option value="1">baz</option></optgroup></select>`,
+			"foo",
+		],
 		[
 			"radio",
 			`<div data-test role="radio"><em>greek</em> kappa</div>`,

diff --git a/sources/accessible-name-and-description.ts b/sources/accessible-name-and-description.ts
@@ -13,6 +13,7 @@ import {
 	safeWindow,
 	isHTMLFieldSetElement,
 	isHTMLLegendElement,
+	isHTMLOptGroupElement,
 	isHTMLTableElement,
 	isHTMLSlotElement,
 	isSVGSVGElement,
@@ -462,6 +463,11 @@ export function computeTextAlternative(
 			if (nameFromAlt !== null) {
 				return nameFromAlt;
 			}
+		} else if (isHTMLOptGroupElement(node)) {
+			const nameFromLabel = useAttribute(node, "label");
+			if (nameFromLabel !== null) {
+				return nameFromLabel;
+			}
 		}
 
 		if (

diff --git a/sources/util.ts b/sources/util.ts
@@ -29,6 +29,12 @@ export function isHTMLInputElement(
 	return isElement(node) && getLocalName(node) === "input";
 }
 
+export function isHTMLOptGroupElement(
+	node: Node | null
+): node is HTMLOptGroupElement {
+	return isElement(node) && getLocalName(node) === "optgroup";
+}
+
 export function isHTMLSelectElement(
 	node: Node | null
 ): node is HTMLSelectElement {