Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
2 of 6 tasks
geospatialem opened this issue Feb 6, 2024 · 5 comments · Fixed by #10787
Closed
2 of 6 tasks

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

geospatialem opened this issue Feb 6, 2024 · 5 comments · Fixed by #10787
Assignees
@geospatialem @DitwanP
Labels
4 - verified Issues that have been released and confirmed resolved. a11y Issues related to Accessibility fixes or improvements. breaking change Issues and pull requests with code changes that are not backwards compatible. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. estimate - 3 A day or two of work, likely requires updates to tests. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - low Issue is non core or affecting less that 10% of people using the library
Milestone
2024-11-26 - 3.0....

Comments

@geospatialem
Copy link
Member

geospatialem commented Feb 6, 2024 •
edited
Loading

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 #6075 (comment). 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:

calcite-design-system/packages/calcite-components/src/components/alert/alert.tsx

Lines 111 to 112 in 107792d

/** Specifies an accessible name for the component. */
@Prop() label!: string;

calcite-design-system/packages/calcite-components/src/components/chip-group/chip-group.tsx

Lines 46 to 47 in 107792d

/** Accessible name for the component. */
@Prop() label!: string;

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

  • Windows
  • JAWS
  • Chrome browser

Regression?

No response

Priority impact

p4 - not time sensitive

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-angular
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/eslint-plugin-calcite-components

Esri team

Calcite (dev)
@geospatialem geospatialem added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. breaking change Issues and pull requests with code changes that are not backwards compatible. a11y Issues related to Accessibility fixes or improvements. p - low Issue is non core or affecting less that 10% of people using the library 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. estimate - 3 A day or two of work, likely requires updates to tests. labels Feb 6, 2024
@github-actions github-actions bot added Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive labels Feb 6, 2024
@jcfranco jcfranco added needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. and removed needs triage Planning workflow - pending design/dev review. labels Feb 29, 2024
@geospatialem geospatialem added this to the 2024-11-19 - Nov Release milestone Jun 28, 2024
@geospatialem geospatialem removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Jun 28, 2024
@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Nov 12, 2024
@benelan benelan mentioned this issue Nov 19, 2024
Merged
@benelan benelan linked a pull request Nov 19, 2024 that will close this issue
refactor(chip)!: make label property required and value optional #10787
Merged
@benelan benelan added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Nov 19, 2024
benelan added a commit that referenced this issue Nov 23, 2024
@benelan
refactor(chip)!: make label property required and value optional (#10787
31f0fe4 
)

**Related Issue:** #8696

## Summary

- Make the `label` property required to ensure it is provided to a11y
assistive technologies.
- Make the `value` property optional in favor of `label`.

BREAKING CHANGE: The `label` property is now required and `value` is
optional.
@benelan benelan added the 3 - installed Issues that have been merged to master branch and are ready for final confirmation. label Nov 23, 2024
@github-actions github-actions bot removed the 2 - in development Issues that are actively being worked on. label Nov 23, 2024
@github-actions github-actions bot assigned geospatialem and DitwanP and unassigned benelan Nov 23, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem
Copy link
Member Author

Reopening for verification

@geospatialem geospatialem reopened this Nov 25, 2024
@geospatialem
Copy link
Member Author

geospatialem commented Nov 25, 2024 •
edited
Loading

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.

calcite-design-system/packages/calcite-components/src/components/chip/chip.tsx

Lines 350 to 357 in 0362b4e

const role =
this.selectionMode === "multiple" && this.interactive
? "checkbox"
: this.selectionMode !== "none" && this.interactive
? "radio"
: this.interactive
? "button"
: undefined;

cc @benelan

@geospatialem geospatialem added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Nov 25, 2024
@geospatialem geospatialem added 2 - in development Issues that are actively being worked on. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Nov 26, 2024
@geospatialem geospatialem mentioned this issue Nov 26, 2024
Merged
geospatialem added a commit that referenced this issue Nov 27, 2024
@geospatialem
fix(chip): provide label context to assistive technologies (#10888)
c468bf8 
**Related Issue:** #8696 

## Summary
Provides context to the component's `label` property for JAWS and NVDA
users using the [`"img"`
role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role),
conveying content is delivered in a visual manner and should be
accompanied with the required `label` property.
@geospatialem geospatialem added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Nov 27, 2024
@github-actions GitHub Actions
Copy link
Contributor

Installed and assigned for verification.

@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Nov 27, 2024
@geospatialem
Copy link
Member Author

Verified with JAWS and NVDA in 3.0.0-next.37

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

@DitwanP DitwanP

Labels
4 - verified Issues that have been released and confirmed resolved. a11y Issues related to Accessibility fixes or improvements. breaking change Issues and pull requests with code changes that are not backwards compatible. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. Calcite (dev) Issues logged by Calcite developers. calcite-components Issues specific to the @esri/calcite-components package. estimate - 3 A day or two of work, likely requires updates to tests. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive p - low Issue is non core or affecting less that 10% of people using the library
Projects
None yet
Milestone
2024-11-26 - 3.0.0 Nov Breaking Chang...
Development

Successfully merging a pull request may close this issue.

refactor(chip)!: make label property required and value optional Esri/calcite-design-system
4 participants
@jcfranco @geospatialem @benelan @DitwanP