computeAccessibleName won't compute combobox name from self referencing aria-labelledby attr #1018
Description
When a div element role is combobox and the element has an aria-labelledby attribute that references itself, computeAccessibleName is failing to return the accessible name.
Role combobox supports name from author https://www.w3.org/TR/wai-aria/#namefromauthor
According to 2B of https://www.w3.org/TR/accname-1.2/#mapping_additional_nd_te
if computing a name, and the current node has an aria-labelledby attribute that contains at least one valid IDREF, and the current node is not already part of an aria-labelledby traversal, process its IDREFs in the order they occur
Please correct if I misunderstand but my interpretation is it should be returning the name. I note the name is seen in Chrome dev tools in the accessibility pane.
When role is combobox the following test cases demonstrate it failing to return an accessible name when the element refers to itself using aria-labelledby.
Test cases
test.each([
[
`<div data-test id="el1" role="combobox" aria-labelledby="el1">I reference myself for my name</div>`,
"I reference myself for my name",
],
[
`
<div data-test id="el1" role="combobox" aria-labelledby="label">I reference another element for my name</div>
<div id="label" role="presentation">I'm prohibited a name</div>
`,
"I'm prohibited a name",
],
[
`<div data-test id="el1" role="combobox" aria-label="I use aria-label for my name"></div>`,
"I use aria-label for my name",
],
])(`misc #%#`, (markup, expectedAccessibleName) => {
expect(markup).toRenderIntoDocumentAccessibleName(expectedAccessibleName);
});
Test output
misc #0
expected <div
aria-labelledby="el1"
data-test=""
id="el1"
role="combobox"
>
I reference myself for my name
</div> to have accessible name 'I reference myself for my name' but got ''
- Expected
+ Received
- I reference myself for my name
496 | ],
497 | ])(`misc #%#`, (markup, expectedAccessibleName) => {
> 498 | expect(markup).toRenderIntoDocumentAccessibleName(expectedAccessibleName);
| ^
499 | });
500 |
501 | test("text nodes are not concatenated by space", () => {
at toRenderIntoDocumentAccessibleName (__tests__/accessible-name.js:498:18)
At a quick glance this would appear to be because the logic is skipping to "step 2E" for role combobox, ultimately returning an empty string on line 649 of sources/accessible-name-and-description.ts
return isHTMLInputElement(current) ? current.value : "";