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

[a11y] Audit all components for accessibility #818

Open
67 tasks
monicawheeler opened this issue Sep 22, 2021 · 3 comments
Open
67 tasks

[a11y] Audit all components for accessibility #818

monicawheeler opened this issue Sep 22, 2021 · 3 comments
Assignees
Labels
a11y Accessibility related EPIC Contains instructions and organization a set of issues that are part of an initiative or project.

Comments

@monicawheeler
Copy link
Collaborator

monicawheeler commented Sep 22, 2021

Description

All components should be accessible. This issue is to review each component for accessibility.

Success criteria

  • Accessibility passes all tests through the WAVE extension and/or Lighthouse.
  • Provide screenshots of passing accessibility results in PR

TODO

Verify that all components are accessible. Document here.

If accessible, check the box. If not accessible, create a new issue that calls out that component and any details you think might be helpful, link it here, and check the box.

  • - alert
  • - assistant
  • - avatar
  • - banner
  • - billboard
  • - breadcrumbs
  • - button
  • - card highlight
  • - chart legend
  • - chart summary
  • - checkbox
  • - choice
  • - container
  • - copy text
  • - description
  • - dynamic select
  • - form input
  • - form select
  • - form textarea
  • - hint
  • - icon
  • - icon card
  • - indicator
  • - label
  • - link
  • - lists
  • - loader
  • - media tile
  • - meter
  • - nav link
  • - progress bar
  • - property
  • - radio
  • - search
  • - stat box
  • - status icon
  • - switch
  • - tab
  • - table
  • - toast
  • - tooltip
  • - card
  • - catalog item
  • - data card
  • - dropdown
  • - empty state
  • - expandable card
  • - feature toggle
  • - form section
  • - hero
  • - icon list
  • - input group
  • - input helper
  • - modal
  • - nav
  • - page heading
  • - pagination
  • - panel
  • - panel figure
  • - panel controls
  • - popover
  • - sidebar
  • - sortable
  • - tabs
  • - transaction card
  • - typeahead
  • - upload card
@monicawheeler monicawheeler added the a11y Accessibility related label Sep 22, 2021
@philschanely philschanely added the EPIC Contains instructions and organization a set of issues that are part of an initiative or project. label Dec 14, 2021
@philschanely
Copy link
Contributor

@monicawheeler marking this with the EPIC tag as it may benefit from a dedicated milestone and place for tracking follow up tasks.

@QuintonJason
Copy link
Contributor

QuintonJason commented Jan 20, 2022

@monicawheeler I created this Jira ticket SAGE-124

@QuintonJason QuintonJason self-assigned this Jan 20, 2022
@sdhull
Copy link
Contributor

sdhull commented Jun 17, 2022

While working with @dhstewart today, trying to write feature specs with capybara, we discovered a couple of accessibility issues with the searchable Dropdown component.

First, the button you click on to open it initially has no text or label. This makes it impossible to target with the (a11y-friendly) API of capybara (eg, click_on, which tries to find buttons & links by their text). The text is in an adjacent span.
image

Second (extremely minor), the search field had a label (can't find it in the docs sites) that had text but wasn't properly hooked up to the input with for/id. It did have targetable placeholder however, so that was good 😊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Accessibility related EPIC Contains instructions and organization a set of issues that are part of an initiative or project.
Projects
None yet
Development

No branches or pull requests

4 participants