diff --git a/.changeset/strange-hotels-build.md b/.changeset/strange-hotels-build.md new file mode 100644 index 00000000..340640bb --- /dev/null +++ b/.changeset/strange-hotels-build.md @@ -0,0 +1,16 @@ +--- +"dom-accessibility-api": patch +--- + +Consider `` for the name of its `` element. + +```html +
+ +
+ my + table +
+``` + +Computing the name for this table would've returned an empty string previously. It now correctly computes `my table` following the [accessible name computation for `table` elements](https://w3c.github.io/html-aam/#table-element) diff --git a/sources/__tests__/accessible-name.js b/sources/__tests__/accessible-name.js index da41850c..e5b9ae48 100644 --- a/sources/__tests__/accessible-name.js +++ b/sources/__tests__/accessible-name.js @@ -291,6 +291,15 @@ test.each([ `
greek rho`, "", ], + // https://w3c.github.io/html-aam/#table-element + [ + ``, + "greek rho", + ], + [ + `
greek rho
greek rho`, + "", + ], ])(`test #%#`, testMarkup); describe("prohibited naming", () => { diff --git a/sources/accessible-name.ts b/sources/accessible-name.ts index ea0b400a..7daae759 100644 --- a/sources/accessible-name.ts +++ b/sources/accessible-name.ts @@ -6,12 +6,14 @@ import SetLike from "./polyfills/SetLike"; import getRole from "./getRole"; import { isElement, + isHTMLTableCaptionElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, safeWindow, isHTMLFieldSetElement, isHTMLLegendElement, + isHTMLTableElement, } from "./util"; /** @@ -208,13 +210,19 @@ function isMarkedPresentational(node: Node): node is Element { } /** - * TODO https://github.com/eps1lon/dom-accessibility-api/issues/99 + * Elements specifically listed in html-aam + * + * We don't need this for `label` or `legend` elements. + * Their implicit roles already allow "naming from content". + * + * sources: + * + * - https://w3c.github.io/html-aam/#table-element */ function isNativeHostLanguageTextAlternativeElement( - // eslint-disable-next-line @typescript-eslint/no-unused-vars -- not implemented yet node: Node ): node is Element { - return false; + return isHTMLTableCaptionElement(node); } /** @@ -381,6 +389,23 @@ export function computeAccessibleName( return null; } + // https://w3c.github.io/html-aam/#table-element + if (isHTMLTableElement(node)) { + consultedNodes.add(node); + const children = ArrayFrom(node.childNodes); + for (let i = 0; i < children.length; i += 1) { + const child = children[i]; + if (isHTMLTableCaptionElement(child)) { + return computeTextAlternative(child, { + isEmbeddedInLabel: false, + isReferenced: false, + recursion: false, + }); + } + } + return null; + } + if ( !( isHTMLInputElement(node) || diff --git a/sources/util.ts b/sources/util.ts index 51ad0983..e0710e6a 100644 --- a/sources/util.ts +++ b/sources/util.ts @@ -2,6 +2,12 @@ export function isElement(node: Node | null): node is Element { return node !== null && node.nodeType === node.ELEMENT_NODE; } +export function isHTMLTableCaptionElement( + node: Node | null +): node is HTMLTableCaptionElement { + return isElement(node) && node.tagName === "CAPTION"; +} + export function isHTMLInputElement( node: Node | null ): node is HTMLInputElement { @@ -14,6 +20,12 @@ export function isHTMLSelectElement( return isElement(node) && node.tagName === "SELECT"; } +export function isHTMLTableElement( + node: Node | null +): node is HTMLTableElement { + return isElement(node) && node.tagName === "TABLE"; +} + export function isHTMLTextAreaElement( node: Node | null ): node is HTMLTextAreaElement {