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.

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

Value List - Avoid inappropriate use of ARIA roles, states, and properties - (2036570519) #7848

Closed
Tracked by #7851
dqateam opened this issue Sep 19, 2023 · 4 comments
Labels
0 - new New issues that need assignment. a11y Issues related to Accessibility fixes or improvements. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. needs triage Planning workflow - pending design/dev review.

Comments

@dqateam
Copy link
Collaborator

dqateam commented Sep 19, 2023

Violation:

Avoid inappropriate use of ARIA roles, states, and properties

image

WCAG Reference:

Severity:

5

Media Type:

ARIA


Areas for Remediation:

  • Title: Calcite Panel - Avoid inappropriate use of ARIA roles, states, and properties - (2036570519)

  • Module: Calcite Panel
    Issue
    There are elements that make use of ARIA roles menu inappropriately. Examples include:

  • Events, Data, Documents, Apps & Maps, Custom catalog 1

  • Initiatives

User Impact
When inappropriate ARIA roles, states, and/or properties are used, screen reader users will mistake these elements for other control structures or the use may prevent users of assistive technology from interacting with the control.

Code Reference

<calcite-value-list drag-enabled="" aria-busy="false" role="menu" calcite-hydrated="">
 <calcite-value-list-item label="Events" value="events" id="calcite-value-list-item-10547a8a-04b5-8c9e-5387-af6dffc83893" icon="grip" calcite-hydrated="">
   (...)
  </calcite-value-list-item>
</calcite-value-list>

Suggestion
Developers must avoid inappropriate use of ARIA roles, states, and/or properties. Remove role="menu" from <calcite-value-list> elements.

Compliant Code Example

<calcite-value-list drag-enabled="" aria-busy="false" calcite-hydrated="">
 <calcite-value-list-item label="Events" value="events" id="calcite-value-list-item-10547a8a-04b5-8c9e-5387-af6dffc83893" icon="grip" calcite-hydrated="">
   (...)
  </calcite-value-list-item>
</calcite-value-list>

Additional Resources:

  • Report Source: Product accessibility evaluation conducted on the Calcite Design System in August, 2022.
@dqateam dqateam added 0 - new New issues that need assignment. a11y Issues related to Accessibility fixes or improvements. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. needs triage Planning workflow - pending design/dev review. labels Sep 19, 2023
@driskull
Copy link
Member

@geospatialem is this for value-list or panel?

@geospatialem geospatialem changed the title Calcite Panel - Avoid inappropriate use of ARIA roles, states, and properties - (2036570519) Value List - Avoid inappropriate use of ARIA roles, states, and properties - (2036570519) Sep 20, 2023
@geospatialem
Copy link
Member

@geospatialem is this for value-list or panel?

Value List, this was one of the more complex examples and identified incorrectly in the report.

@driskull
Copy link
Member

Can we close issues for components that are deprecated?

@geospatialem
Copy link
Member

Closing as the component is deprecated and additional a11y efforts will be spent on the list components.

@geospatialem geospatialem closed this as not planned Won't fix, can't repro, duplicate, stale Sep 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
0 - new New issues that need assignment. a11y Issues related to Accessibility fixes or improvements. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. needs triage Planning workflow - pending design/dev review.
Projects
None yet
Development

No branches or pull requests

3 participants