IgniteUI / igniteui-webcomponents / 35995709931

99%

Build Type

push

github

Committed by web-flow

Commit Message

fix: name form controls from external labels and host ARIA (#2402)

* fix: name form controls from external labels and host ARIA

A `<label>` element did not name the checkbox, switch or radio, and a
click on it did nothing. The host `aria-labelledby` IDREF was copied
into the shadow root, where it does not resolve. The input editors,
select, combo, the pickers, rating and slider had similar gaps.

All form associated components now use one naming order: the host
`aria-labelledby`, the external `<label>` elements, the own label (the
default slot or the `label` property), the host `aria-label`, and a
fallback. The name moves to the native control in the shadow root as
element references, because an IDREF does not cross a shadow boundary.

- Add `resolveNaming()` to `aria-projection.ts`. It reads the host
  `ariaLabelledByElements` and `ElementInternals.labels`. The toggle
  shell, rating, slider and the color picker trigger bind it directly.
  The input editors get it through `addAriaTarget`, and composites
  project the host name through `addAriaProjector` (`hasOwnLabel`,
  `fallbackLabel`).
- The form associated mixin observes `aria-label` and
  `aria-labelledby`. It records the labels on each update and renders
  again when focus enters the host and the labels changed.
- Add the `_handleLabelActivation()` hook to the mixin. A bubbling
  click that starts on the host and is not canceled runs it. Checkbox,
  switch and radio focus and toggle the input. Rating and slider focus
  the control. File input focuses the native input and opens the
  file picker.
- Color picker: an external label and the host ARIA name the trigger
  in `default` mode. In `input` mode, remove `aria-expanded` from the
  text input. The swatch button keeps it.
- Combo: the selection status text names the input only when no label
  names it.
- Slider: hide the value tooltip from assistive technology.
- Fix the `ariaBindings` directive: a null relation write removed the
  same-root... (continued)

Coverage Stats

7606 of 7926 branches covered (95.96%)

Branch coverage included in aggregate %.

441 of 443 new or added lines in 21 files covered. (99.55%)

2 existing lines in 1 file now uncovered.

52381 of 52934 relevant lines covered (98.96%)

1564.62 hits per line