-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test(Button): add accessibility unit tests and docs (#7413)
* test(Button): add accessibility unit tests and docs * test(Button): add automated tests * Update packages/react/src/components/Button/button-avt.md Co-authored-by: emyarod <emyarod@users.noreply.github.com> * test(Button): update snaps * test(Button): make assertions explicit, fix wrong query Co-authored-by: emyarod <emyarod@users.noreply.github.com> Co-authored-by: Andrea N. Cardona <andreancardona@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
- Loading branch information
1 parent
77fd9a7
commit 01cafb6
Showing
2 changed files
with
84 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
Button Component Accessibility Verification Testing | ||
|
||
Developers or designers wanting to manually verify the accessibility of the | ||
component can carry out the following steps: | ||
|
||
## Contrast | ||
|
||
- [ ] the Button text has a contrast of 4.5:1 minimum against the background | ||
color | ||
- [ ] the Button background has a contrast of 4.5:1 minimum against the page | ||
background | ||
|
||
## Screen reader | ||
|
||
Each screen reader should be tested when paired with its preferred browser. | ||
|
||
### VoiceOver on Safari | ||
|
||
1. {tab} "Button, button, main. You are currently on a button. To click this | ||
button press ctrl-option-space" | ||
|
||
### JAWS on Edge/Chrome | ||
|
||
1. {tab} "Main fram, Button, button. To activate press SPACEBAR" | ||
|
||
### NVDA on Firefox (optional, but recommended) | ||
|
||
1. {tab} "main frame, main landmark. Button button" |