feat: Consider all cases of "name from content" (#13)

sources/__tests__/accessible-name.js

@@ -40,6 +40,92 @@ expect.extend({
 	}
 });
 
+function testMarkup(markup, accessibleName) {
+	const container = renderIntoDocument(markup);
+
+	const testNode = container.querySelector("[data-test]");
+	expect(testNode).toHaveAccessibleName(accessibleName);
+}
+
+describe("to upstream", () => {
+	test.each([
+		// name from content
+		[
+			"cell",
+			`<div data-test role="cell"><em>greek</em> alpha</div>`,
+			"greek alpha"
+		],
+		[
+			"checkbox",
+			`<div data-test role="checkbox"><em>greek</em> beta</div>`,
+			"greek beta"
+		],
+		[
+			"columnheader",
+			`<div data-test role="columnheader"><em>greek</em> gamma</div>`,
+			"greek gamma"
+		],
+		[
+			"gridcell",
+			`<div data-test role="gridcell"><em>greek</em> delta</div>`,
+			"greek delta"
+		],
+		[
+			"legend",
+			`<fieldset><legend data-test><em>greek</em> zeta</legend></fieldset>`,
+			"greek zeta"
+		],
+		[
+			"menuitem",
+			`<li data-test role="menuitem"><em>greek</em> eta</li>`,
+			"greek eta"
+		],
+		[
+			"menuitemradio",
+			`<li data-test role="menuitemradio"><em>greek</em> theta</li>`,
+			"greek theta"
+		],
+		[
+			"menuitemcheckbox",
+			`<li data-test role="menuitemcheckbox"><em>greek</em> iota</li>`,
+			"greek iota"
+		],
+		[
+			"radio",
+			`<div data-test role="radio"><em>greek</em> kappa</div>`,
+			"greek kappa"
+		],
+		[
+			"row",
+			`<table><tbody><tr data-test><td>greek</td><td>lambda</td></tr></tbody></table>`,
+			"greek lambda"
+		],
+		[
+			"rowheader",
+			`<table><tbody><tr data-test><td data-test role="rowheader"><em>greek</em> mu</td></tr></tbody></table>`,
+			"greek mu"
+		],
+		[
+			"switch",
+			`<div data-test role="switch"><em>greek</em> nu</div>`,
+			"greek nu"
+		],
+		["tab", `<div data-test role="tab"><em>greek</em> xi</div>`, "greek xi"],
+		[
+			"tooltip",
+			`<div data-test role="tooltip"><em>greek</em> omicron</div>`,
+			"greek omicron"
+		],
+		[
+			"treeitem",
+			`<li data-test role="treeitem"><em>greek</em> pi</li>`,
+			"greek pi"
+		]
+	])(`role %s`, (_, markup, expectedAccessibleName) =>
+		testMarkup(markup, expectedAccessibleName)
+	);
+});
+
 test.each([
 	[
 		`
@@ -108,8 +194,7 @@ test.each([
 <label for="test">a test</label>
 		`,
 		"This is a test"
-	],
-	// byAltText('an image') = byRole('image', {name: 'an image'})
+	], // byAltText('an image') = byRole('image', {name: 'an image'})
 	[`<img data-test alt="an image" />`, "an image"],
 	// this would require a custom matcher
 	[
@@ -125,9 +210,4 @@ test.each([
 	[`<button data-test>Click <em>me</em></option>`, "Click me"],
 	// byTitle('Hello, Dave!') => byRole('textbox', {name: 'Hello, Dave!'})
 	[`<input data-test title="Hello, Dave!" />`, "Hello, Dave!"]
-])(`case %#`, (markup, accessibleName) => {
-	const container = renderIntoDocument(markup);
-
-	const testNode = container.querySelector("[data-test]");
-	expect(testNode).toHaveAccessibleName(accessibleName);
-});
+])(`test #%#`, testMarkup);

sources/__tests__/getRole.js

@@ -117,7 +117,7 @@ const cases = [
 	["input type=week", null, createElementFactory("input", {type: "week"})],
 	["ins", null, createElementFactory("ins", {})],
 	["label", null, createElementFactory("label", {})],
-  ["legend", null, createElementFactory("legend", {})],
+  ["legend", 'legend', createElementFactory("legend", {})],
   // WARNING: Only in certain context
 	["li", "listitem", createElementFactory("li", {})],
 	["link element with a href", "link", createElementFactory("link", {href: "some"})],

sources/accessible-name.ts

@@ -199,10 +199,31 @@ function isNativeHostLanguageTextAlternativeElement(
 }
 
 /**
- * TODO https://w3c.github.io/aria/#namefromcontent
+ * https://w3c.github.io/aria/#namefromcontent
  */
 function allowsNameFromContent(node: Node): boolean {
-	return hasAnyConcreteRoles(node, ["option", "heading", "link", "button"]);
+	return hasAnyConcreteRoles(node, [
+		"button",
+		"cell",
+		"checkbox",
+		"columnheader",
+		"gridcell",
+		"heading",
+		"label",
+		"legend",
+		"link",
+		"menuitem",
+		"menuitemcheckbox",
+		"menuitemradio",
+		"option",
+		"radio",
+		"row",
+		"rowheader",
+		"switch",
+		"tab",
+		"tooltip",
+		"treeitem"
+	]);
 }
 
 /**

sources/getRole.ts

@@ -32,6 +32,7 @@ const tagToRoleMappings: Record<string, string | undefined> = {
 	H6: "heading",
 	HEADER: "banner",
 	HR: "separator",
+	LEGEND: "legend",
 	LI: "listitem",
 	MATH: "math",
 	MAIN: "main",