extensions: improve action items bar accessibility
Created by: tjkandala
Part of #36751 (closed). Closes #36850 (closed), #36852 (closed), #36854 (closed), and #36855 (closed).
- Use
aria-disabled
instead ofdisabled
for action items so they can retain focus when loading and so screen readers will read their labels. - Use
<div>
instead of lists for single children. - Add keyboard shortcut to enter action items bar to
aria-label
for toggle.
Test plan
- Existing automated tests pass
- Navigate to action items bar toggle with keyboard w/ screen reader on
- Ensure that screen reader announces keyboard shortcut to enter panel
- Press down/up arrow keys until you reach a disabled action item
- Ensure that screen reader announces label.
- Press down/up arrow keys until you reach an enabled action item with an asynchronous action (e.g. toggle git blame)
- Press enter to run action
- Ensure that focus stays on the action during and after execution
App preview:
Check out the client app preview documentation to learn more.