coreui / coreui-pro / 37069131839

96%

main: 94%

push

github

fix(combobox): point aria-controls at the panel only while it exists (#1523)

The combobox panel leaves the document while it is closed, but Autocomplete and MultiSelect wrote `aria-controls` once when they were built, and ListBox wrote it, with `aria-activedescendant`, on its field on every update. The references named missing elements before the first open and after every close; Combobox had the same through ListBox. Measured in Chromium on the built bundle: they resolved only while the panel was open.

ComboboxBase now sets the references when the panel opens and takes them off at close, together with `aria-expanded`, and again once the panel is gone. ListBox writes them on its field only while the list is in the document and refreshes them when the field takes the focus. MultiSelect points its toggler and search input at the panel through the same hook.

`aria-owns` is gone from both. On the MultiSelect toggler it made the listbox a child of the combobox in Chromium's accessibility tree, taking it out of the panel's role=dialog, and on the Autocomplete input Chromium ignores it, because a text field cannot own elements (both checked with the CDP accessibility tree). `aria-controls` alone points the combobox at its popup.

React and Vue Autocomplete and Combobox get the references from CListBox, which mounts with the panel; their MultiSelect gets the same changes in coreui-react-pro and coreui-vue-pro on the same branch name. Five JavaScript bundle budgets go up by 0.25 kB; the growth is measured in the commits.

6750 of 7302 branches covered (92.44%)

Branch coverage included in aggregate %.

21 of 21 new or added lines in 3 files covered. (100.0%)

11906 of 12199 relevant lines covered (97.6%)

1482.39 hits per line