coreui / coreui-pro / 34831483969

96%

main: 94%

push

github

fix(Chip)!: the remove control is not a button inside a listbox option (#1286)

* fix(Chip)!: the remove control is not a button inside a listbox option

A selectable chip set is a listbox: the set carries role="listbox" and every
chip role="option". The APG says that model "does not support interacting with
elements inside of an option ... it does not provide an accessible way to
present a list of interactive elements, such as links, buttons, or checkboxes",
and `removable` put a <button> in exactly that place.

Measured in Chromium through the AX tree, with selectable + removable:

  before   option  name="Poland Remove"   button name="Remove"
  after    option  name="Poland"          (no button in the tree)

So the button was both unreachable for assistive technology and part of the
option's accessible name. In a selectable set the control is now a
<span class="chip-remove" aria-hidden="true">; a set that is not a listbox
keeps the real <button> with its aria-label, where Tab access is correct.
Removal behaviour is unchanged: the click handler is delegated from the chip,
and the keyboard path is the documented Backspace/Delete.

`nested-interactive` joins the axe rules mapped to WCAG 4.1.2. The gate already
renders this exact markup (build/a11y.config.mjs, chip-set: selectable +
removable) but never ran the rule that catches it — with the rule in and the
fix out, components/chip-set fails on 2 nodes; with both in, it passes.

No CSS change: .chip-remove sets display, padding, background and border
itself, so a span renders identically.

* docs(Chip): ariaRemoveLabel does not apply inside a selectable set

Three places still described it as the label of every chip's remove button.
In a selectable set there is no button — the affordance is a span hidden from
assistive technology — so the option and the accessibility bullet now say where
the label stops applying and link to the explanation.

5606 of 6249 branches covered (89.71%)

Branch coverage included in aggregate %.

9 of 9 new or added lines in 1 file covered. (100.0%)

10889 of 11290 relevant lines covered (96.45%)

468.53 hits per line