aria-describedby referencing a dynamically-updated hidden element is not described if the element is initially empty

[brothercake]

Summary

1. Go to: https://codepen.io/TPG/pen/gOqdGbw using JAWS + Chrome or Edge
2. TAB to each of the buttons in turn and check their announcement

Expected result

All three buttons should announce their accessible description.

Actual result

The third button does not announce a description.

Example

The following code was used for this example:

<button aria-describedby="description1">Button 1</button>
<div hidden id="description1">Static description for Button 1</div>

<button aria-describedby="description2">Button 2</button>
<div hidden id="description2">Static never-empty description for Button 2</div>

<button aria-describedby="description3">Button 3</button>
<div hidden id="description3"></div>

window.setTimeout(() => {
    document.querySelector('#description2').textContent = 'Dynamically updated never-empty description for Button 2';
    document.querySelector('#description3').textContent = 'Dynamically updated initially-empty description for Button 3';
}, 1000);

The crucial detail is that #description2 has text content by default, and subsequent dynamic updates to its text content are conveyed as the accessible description, whereas #description3 is empty by default, and subsequent updates are not conveyed.

The same is true if the referenced hidden element has text content by default, but is later emptied, and then populated again. Once the element is empty, it is never announced again.

Additional Information

This issue does not occur with JAWS + Firefox.

JAWS version and build number

2024.2310.70

Operating System and version

Windows 11 Home (22H2, 22621.2715)

Browser and version:

Chrome 119.0.6045.200 Edge 119.0.2151.93

[JAWS-test]

This is not a JAWS error, but a browser error. This is easy to see in the Devtools (F12), Accessibility tab. The button with an initially empty description is permanently transmitted to the API without a description. This is why the problem also occurs with NVDA. Please close the ticket here and open it at Google Chrome instead.

[JAWS-test]

By the way, the problem only seems to occur in Chrome when the description is hidden

[brothercake]

By the way, the problem only seems to occur in Chrome when the description is hidden

Yeah that's true, but hidden elements are better for contextual describedby references because they're not independently navigable.

[stevefaulkner]

@brothercake odd behaviour, as a work around it works if there is something in the hidden div on page load. https://codepen.io/stevef/pen/poGxjQv

<div hidden id="description3">.</div>

@JAWS-test yes definitely a chrome bug :-)

[stevefaulkner]

chrome bug filed

[brothercake]

@stevefaulkner I used a zero-width space :-)