feat: support "none" role as a synonym for the "presentation" role (#933)

* feat: support `"none"` role as a synonym for the `"presentation"` role

* Create yellow-poems-cry.md

* test: add test coverage for `none` synonym role

* Update sources/__tests__/accessible-name.js

---------

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

Author: jlp-craigmorten

.changeset/yellow-poems-cry.md

@@ -0,0 +1,5 @@
+---
+"dom-accessibility-api": patch
+---
+
+Support `"none"` role as a synonym for the `"presentation"` role

sources/__tests__/accessible-description.js

@@ -55,6 +55,10 @@ describe("wpt copies", () => {
 			`<img src="foo.jpg" data-test alt="test" aria-describedby="t1"><span id="t1" role="presentation">foo</span>`,
 			"foo",
 		],
+		[
+			`<img src="foo.jpg" data-test alt="test" aria-describedby="t1"><span id="t1" role="none">foo</span>`,
+			"foo",
+		],
 		[
 			`<a data-test href="#" aria-label="California" title="San Francisco" >United States</a>`,
 			"San Francisco",

sources/__tests__/accessible-name.js

@@ -285,6 +285,13 @@ test.each([
 		`
 <div data-test aria-labelledby="label">I reference my name</div>
 <div id="label" role="presentation">I'm prohibited a name</div>
+`,
+		"I'm prohibited a name",
+	],
+	[
+		`
+<div data-test aria-labelledby="label">I reference my name</div>
+<div id="label" role="none">I'm prohibited a name</div>
 `,
 		"I'm prohibited a name",
 	],
@@ -406,6 +413,7 @@ test.each([
 		`<img data-test alt="" aria-label="a logo" role="presentation" /> />`,
 		"a logo",
 	],
+	[`<img data-test alt="" aria-label="a logo" role="none" />`, "a logo"],
 	[` <input type="radio" data-test title="crazy"/>`, "crazy"],
 	[
 		`
@@ -467,6 +475,7 @@ describe("prohibited naming", () => {
 		["insertion", '<div data-test role="insertion">named?</div>'],
 		["paragraph", '<div data-test role="paragraph">named?</div>'],
 		["presentation", '<div data-test role="presentation">named?</div>'],
+		["none", '<div data-test role="none">named?</div>'],
 		["strong", '<div data-test role="strong">named?</div>'],
 		["subscript", '<div data-test role="subscript">named?</div>'],
 		["superscript", "<div data-test role='supscript'>Hello</div>"],
@@ -518,6 +527,11 @@ describe("prohibited naming", () => {
 			"<button data-test><span role='presentation'>icon</span></button>",
 			"icon",
 		],
+		[
+			"presentation",
+			"<button data-test><span role='none'>icon</span></button>",
+			"icon",
+		],
 		[
 			"strong",
 			"<button data-test><span role='strong'>CLICK!</span></button>",

sources/__tests__/getRole.js

@@ -176,8 +176,10 @@ const cases = [
 	// https://rawgit.com/w3c/aria/stable/#conflict_resolution_presentation_none
 	["presentational <img /> with accessible name", "img", createElementFactory("img", {alt: "", 'aria-label': "foo"})],
 	["presentational <h1 /> global aria attributes", "heading", createElementFactory("h1", {'aria-describedby': "comment-1", role: "presentation"})],
+	["presentational <h1 /> global aria attributes", "heading", createElementFactory("h1", {'aria-describedby': "comment-1", role: "none"})],
 	// <div /> isn't mapped to `"generic"` yet so implicit semantics are `No role`
 	["presentational <div /> with prohibited aria attributes", null, createElementFactory("div", {'aria-label': "hello", role: "presentation"})],
+	["presentational <div /> with prohibited aria attributes", null, createElementFactory("div", {'aria-label': "hello", role: "none"})],
 ];
 
 it.each(cases)("%s has the role %s", (name, role, elementFactory) => {

sources/accessible-name-and-description.ts

@@ -20,6 +20,7 @@ import {
 	isSVGTitleElement,
 	queryIdRefs,
 	getLocalName,
+	presentationRoles,
 } from "./util";
 
 /**
@@ -150,7 +151,7 @@ function querySelectedOptions(listbox: Element): ArrayLike<Element> {
 }
 
 function isMarkedPresentational(node: Node): node is Element {
-	return hasAnyConcreteRoles(node, ["none", "presentation"]);
+	return hasAnyConcreteRoles(node, presentationRoles);
 }
 
 /**

sources/accessible-name.ts

@@ -15,6 +15,7 @@ function prohibitsNaming(node: Node): boolean {
 		"emphasis",
 		"generic",
 		"insertion",
+		"none",
 		"paragraph",
 		"presentation",
 		"strong",

sources/getRole.ts

@@ -1,5 +1,7 @@
 // https://w3c.github.io/html-aria/#document-conformance-requirements-for-use-of-aria-attributes-in-html
 
+import { presentationRoles } from "./util";
+
 /**
  * Safe Element.localName for all supported environments
  * @param element
@@ -70,6 +72,7 @@ const prohibitedAttributes: Record<string, Set<string>> = {
 	emphasis: new Set(["aria-label", "aria-labelledby"]),
 	generic: new Set(["aria-label", "aria-labelledby", "aria-roledescription"]),
 	insertion: new Set(["aria-label", "aria-labelledby"]),
+	none: new Set(["aria-label", "aria-labelledby"]),
 	paragraph: new Set(["aria-label", "aria-labelledby"]),
 	presentation: new Set(["aria-label", "aria-labelledby"]),
 	strong: new Set(["aria-label", "aria-labelledby"]),
@@ -126,10 +129,10 @@ function ignorePresentationalRole(
 
 export default function getRole(element: Element): string | null {
 	const explicitRole = getExplicitRole(element);
-	if (explicitRole === null || explicitRole === "presentation") {
+	if (explicitRole === null || presentationRoles.indexOf(explicitRole) !== -1) {
 		const implicitRole = getImplicitRole(element);
 		if (
-			explicitRole !== "presentation" ||
+			presentationRoles.indexOf(explicitRole || "") === -1 ||
 			ignorePresentationalRole(element, implicitRole || "")
 		) {
 			return implicitRole;

sources/util.ts

@@ -1,6 +1,8 @@
 export { getLocalName } from "./getRole";
 import getRole, { getLocalName } from "./getRole";
 
+export const presentationRoles = ["presentation", "none"];
+
 export function isElement(node: Node | null): node is Element {
 	return node !== null && node.nodeType === node.ELEMENT_NODE;
 }