feat: support aria-description as descriptor (#934)

Co-authored-by: Sebastian Silbermann <[email protected]>

Author: alonidiom

.changeset/two-eagles-peel.md

@@ -0,0 +1,5 @@
+---
+"dom-accessibility-api": patch
+---
+
+Support `aria-description` as descriptor

sources/__tests__/accessible-description.js

@@ -59,6 +59,14 @@ describe("wpt copies", () => {
 			`<a data-test href="#" aria-label="California" title="San Francisco" >United States</a>`,
 			"San Francisco",
 		],
+		[
+			`<button data-test href="#" aria-description="Paid feature">Deploy</button>`,
+			"Paid feature",
+		],
+		[
+			`<img src="foo.jpg" data-test alt="test" aria-description="bar" aria-describedby="t1"><span id="t1" role="presentation">foo</span>`,
+			"foo",
+		],
 	])(`#%#`, (markup, expectedAccessibleDescription) => {
 		expect(markup).toRenderIntoDocumentAccessibleDescription(
 			expectedAccessibleDescription

sources/accessible-description.ts

@@ -24,7 +24,15 @@ export function computeAccessibleDescription(
 
 	// TODO: Technically we need to make sure that node wasn't used for the accessible name
 	//       This causes `description_1.0_combobox-focusable-manual` to fail
-	//
+
+	// https://w3c.github.io/aria/#aria-description
+	// mentions that aria-description should only be calculated if aria-describedby didn't provide
+	// a description
+	if (description === "") {
+		const ariaDescription = root.getAttribute("aria-description");
+		description = ariaDescription === null ? "" : ariaDescription;
+	}
+
 	// https://www.w3.org/TR/html-aam-1.0/#accessible-name-and-description-computation
 	// says for so many elements to use the `title` that we assume all elements are considered
 	if (description === "") {

sources/getRole.ts

@@ -90,6 +90,7 @@ function hasGlobalAriaAttributes(element: Element, role: string): boolean {
 		"aria-busy",
 		"aria-controls",
 		"aria-current",
+		"aria-description",
 		"aria-describedby",
 		"aria-details",
 		// "disabled",