search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
295 stars 76 forks source link

[Chip] Ensure the `label` prop is provided to assistive technologies #8696

Open geospatialem opened 9 months ago

geospatialem commented 9 months ago

Check existing issues

Summary

Chip's label property should be provided over the value or slotted text.

Actual Behavior

The component's label property provides context to AT, where value is not provided to assistive technologies or when a parent chip-group is present.

Expected Behavior

As part of an upcoming breaking change release, we should consider making label required from our discussions in https://github.com/Esri/calcite-design-system/pull/6075#discussion_r1055903130. This way the internals stay the same and label is read to assistive technologies, and required. Value should just be optionally used for getting value in selection mode.

If enforcing a required label, the value can be optional and not read back to assistive technologies. This seems to be a similar pattern in other components, such as alert and the parent chip-group:

https://github.com/Esri/calcite-design-system/blob/107792d52159848bd6e01fd14fa80292fbfd02e6/packages/calcite-components/src/components/alert/alert.tsx#L111-L112

https://github.com/Esri/calcite-design-system/blob/107792d52159848bd6e01fd14fa80292fbfd02e6/packages/calcite-components/src/components/chip-group/chip-group.tsx#L46-L47

cc @macandcheese

Reproduction Sample

https://codepen.io/geospatialem/pen/poYKVYv

Reproduction Steps

  1. Enable JAWS
  2. Open the sample in a Chrome browser
  3. Observe the example for the chip-group works as-expected
    • "Light gray basemap" and "Dark gray basemap" contexts are provided
  4. Using the arrow keys navigate to the second and first examples
  5. Observe the label's are not provided to AT
    • Expected "Gray basemap" for both examples

Reproduction Version

2.4.0

Working W3C Example/Tutorial

No response

Relevant Info

Regression?

No response

Priority impact

p4 - not time sensitive

Calcite package

Esri team

Calcite (dev)

github-actions[bot] commented 4 days ago

Installed and assigned for verification.

geospatialem commented 1 day ago

Reopening for verification

geospatialem commented 1 day ago

Additional effort is needed to ensure the label context is provided to AT, currently if the chip does not have slotted text, no context is provided Instead, it should have similar support to button:

Update: this looks to be a result of the "undefined" role.

https://github.com/Esri/calcite-design-system/blob/0362b4e661a2b009fd26c2eea1b25f572ce0b5ef/packages/calcite-components/src/components/chip/chip.tsx#L350-L357

cc @benelan