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

Action Pad and Action - Ensure implicit list markup is avoided - (2036569768) #7778

Closed
dqateam opened this issue Sep 19, 2023 · 3 comments
Closed
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:

Ensure implicit list markup is avoided

WCAG Reference:

Severity:

6

Media Type:

Lists


Areas for Remediation:

  • Title: Action Pad and Action - Ensure implicit list markup is avoided - (2036569768)

  • Module: Action Pad and Action
    Issue
    There is content that appears as a list but does not use list markup. Examples include:

  • Undo action, for display purposes only

  • Redo action, for display purposes only

  • Expand

User Impact
Screen reader users will have difficulty understanding that this content is a list.

Code Reference

<calcite-action-pad layout="vertical" calcite-hydrated="">
 <calcite-action text="Undo" icon="undo" label="Undo action, for display purposes only" appearance="solid" scale="m" calcite-hydrated=""></calcite-action>
 <calcite-action text="Redo" icon="redo" label="Redo action, for display purposes only" appearance="solid" scale="m" calcite-hydrated=""></calcite-action>
 <calcite-action appearance="solid" scale="m" calcite-hydrated=""></calcite-action>
</calcite-action-pad>

Suggestion
Ensure implicit list markup is avoided. Lists must use <ul>, <ol>, <li>, <dl>, <dt>, and <dd> elements as appropriate.

Compliant Code Example

<ul layout="vertical" calcite-hydrated="">
 <li>
   <calcite-action text="Undo" icon="undo" label="Undo action, for display purposes only" appearance="solid" scale="m" calcite-hydrated=""></calcite-action>
 </li>
 <li>
   <calcite-action text="Redo" icon="redo" label="Redo action, for display purposes only" appearance="solid" scale="m" calcite-hydrated=""></calcite-action>
 </li>
 <li>
   <calcite-action appearance="solid" scale="m" calcite-hydrated=""></calcite-action>
 </li>
</ul>

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

This issue doesn't seem actionable.

@macandcheese
Copy link
Contributor

Propose closing as a result of discussion in #7052. These really should behave more as toolbars.

@geospatialem
Copy link
Member

Closing per #7778 (comment) and #7778 (comment). Refer to the repurposed #7052.

@geospatialem geospatialem closed this as not planned Won't fix, can't repro, duplicate, stale Nov 14, 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

4 participants