[a11y] Audit all components for accessibility

monicawheeler commented 3 years ago

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

philschanely commented 2 years ago

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

QuintonJason commented 2 years ago

@monicawheeler I created this Jira ticket SAGE-124

sdhull commented 2 years ago

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.

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 😊

Kajabi / sage-lib