search

ni / nimble

The NI Nimble Design System
https://nimble.ni.dev
MIT License
31 stars 8 forks source link

`Select` aria-controls and aria-activedescendent attributes improperly set. #1821

Open atmgrifter00 opened 7 months ago

atmgrifter00 commented 7 months ago

🐛 Bug Report

As discussed in this PR comment, the Select's template is currently setting its aria-controls and aria-activedescendant attributes improperly in that it is attempting to use ids across the shadow DOM boundary.

💻 Repro or Code Sample

Select template.

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

Follow the patterns outlined in the PR comment where an element inside the shadow root of the Select has the role and aria-controls and aria-activedescendant attributes set on it. See Combobox template as an example.

🔦 Context

🌍 Your Environment

m-akinc commented 6 months ago

Looks like there isn't a clear solution.

aria-controls - This needs to be set on the combobox (role) element, referring to the controlled listbox. The listbox element is part of the shadow DOM, so we need the combobox element to also be in the shadow DOM.

aria-activedescendant - This needs to be set on the combobox (role) element, referring to the selected nimble-list-option. List option elements are slotted from the light DOM, so we need the combobox element to also be in the light DOM.

This conflict could be avoided using the IDL property ariaActiveDescendantElement, which allows elements to be referenced directly instead of via ID. However, that property is currently only supported on Safari.

Note also that currently, when the select has the filter enabled, it is setting aria-controls and aria-activedescendants on the filter textbox. This is probably incorrect for aria-controls. As the aria-controls doc states, "A combobox element has aria-controls set to a value that refers to the element that serves as the popup." I think that should be the case even if there is a filter.