Autocompletion option descriptions not announced by screen readers

[muchktom]

Describe the issue

Autocompletion option descriptions not announced by screen readers

Description

When autocompletion list items contain additional descriptions, these descriptions are not announced by screen readers. The reason is that there is no semantic connection between the description and the corresponding autocompletion option.

As a result, screen readers only announce the label (for example, “hello”) but not the additional detail (for example, “world”), leaving out critical context.

Steps to Reproduce

1. Visit the CodeMirror autocompletion demo: https://codemirror.net/examples/autocompletion/
2. Trigger the autocompletion (Ctrl + Space) and navigate through the options with a screen reader enabled.
3. Observe that any additional details attached to options are not announced.

Expected Behavior

When a completion option has an additional description, the screen reader should announce both the label and the description.

Actual Behavior

Only the label is announced, while the description is ignored.

Suggested Fix

Associate the description with its option using aria-describedby to connect the detail with the option element.

Browser and platform

Chrome, MacOS

Reproduction link

No response

[marijnh]

I'm seeing the same issue (this as well as #1624) in this official example, which seems to suggest that the problem lies more with Safari than with CodeMirror.

[muchktom]

Hello @marijnh , 1625 is not strictly related to Safari, it does not work even in Chrome. I can see the autocompletition options are missing connection to the additional description popup.

[marijnh]

Oh, right, this is about the info window, not the actual completion item. That is indeed an issue. Any suggestions for how this could be modeled in accessible DOM structure? Just using a live element would probably not be great, since then the order in which things are read is hard to control and may get confusing.

[muchktom]

I agree adding a live region is not a good option here.

We have faced similar challenge in our app with tooltips. In the end we decided to connect the tooltip text to the focused item using aria-describedby="REF_TO_TOOLTIP".

The describedby prop needs to be added once the info window is available in DOM. Keeping it there all the time would trigger additional issue of referencing a non-existing ID.

[marijnh]

Oh nice, I wasn't aware of the difference between aria-labeledby and aria-describedby. That appears to be exactly what we need here. Attached patch adds this link. Does it help for you?

[muchktom]

Hello @marijnh ,

I let my fellow front-end developer to check the patch, it looks good from his perspective.

Thank you!

[marijnh]

Great. I've tagged a version 6.38.5 with this change.