Button web component - Accessibility Review

k80bowman commented 2 years ago

Issue Description

We need to conduct a full accessibility review of the va-button web component. The component can be viewed in Storybook here: https://design.va.gov/storybook/?path=/docs/components-va-button--primary

Tasks

[ ] Full accessibility review of the component is completed
[ ] Add descriptions of any issues found to this ticket
- [ ] If any problems are found, add screen recordings and/or screenshots to comments on this ticket that show the problem.
[ ] Alert Katy and the developer who built the component when the review is complete
[ ] Re-review any fixes the developer makes to the component

Acceptance Criteria

[ ] Component has been reviewed for accessibility issues
[ ] Any accessibility issues have been addressed

andresriveratoro commented 1 year ago

@SarahKay8 This component is ready to be looked at. I've updated the issue with the Chromatic link. Thanks!

SarahKay8 commented 1 year ago

Hi @andresriveratoro I have no further feedback to add.

andresriveratoro commented 1 year ago

@SarahKay8 This component has been updated and will need to be looked at again. I've updated Storybook to include a story for a disabled button and updated the button to always have a value for aria-label. Thank you!

SarahKay8 commented 1 year ago

@SarahKay8 This component has been updated and will need to be looked at again. I've updated Storybook to include a story for a disabled button and updated the button to always have a value for aria-label. Thank you!

Gotcha!

k80bowman commented 1 year ago

@SarahKay8 were you able to take a look at the disabled state?

SarahKay8 commented 1 year ago

Taking a look now! My apologies, I looked at the text area component first @k80bowman

k80bowman commented 1 year ago

No worries, thank you @SarahKay8!

SarahKay8 commented 1 year ago

Hi @andresriveratoro from an Accessibility standpoint.. disabled state is approved. JAWS and NVDA both announce the button as unavailable with the "disabled" attribute.

However from a usability standpoint..

I do have a slight consideration...

Maybe consider swapping out the disabled attribute for aria-disabled=true???

The HTML disable attributes removes the element from tab focus and aria-disabled with JavaScript can provide this information to screen reader users in tab navigation. Screen reader users navigate the page using arrow keys and then use shortcuts/tab key to move around. This is the way I was taught so generally if the element is in DOM in any form I understand, more than HTML disabled attribute it is better to use read-only or use aria-disable as they provide the form controls in tab navigation. When HTML disabled attribute is used screen reader announces it as unavailable, people who are new to screen readers find it difficult sometimes to comprehend the different behaviors that these attributes output.

To summarize:

Disabled might skip the button when using the Tab key, leading to confusion. Aria-disabled will still focus the button and announce that it exists. Just makes the experience more enjoyable.

andresriveratoro commented 1 year ago

@SarahKay8 Thanks!

andresriveratoro commented 1 year ago

@SarahKay8 I've updated the button to use aria-disabled and to be focusable while preventing clicks, simulating a disabled button.

The latest changes can be re-tested here. Thanks!

SarahKay8 commented 1 year ago

@andresriveratoro looks good! Thanks!!

k80bowman commented 1 year ago

Thank you both! Closing this now.

SarahKay8 commented 1 year ago

@briandeconinck See for reference

department-of-veterans-affairs / vets-design-system-documentation