GSA / px-benefit-finder

1 stars 0 forks source link

Component library manual testing-keyboard #374

Open amycole501 opened 1 year ago

amycole501 commented 1 year ago

https://bears-storybook.app.cloud.gov/

initial review doc

Audit spreadsheet

Review all interactive elements and components in the library Ernesto created in Figma. https://www.figma.com/file/jt1oS8sGYDJn0MjYaprQkM/BEARS-DESIGN?type=design&node-id=1220-25299&mode=design

https://www.figma.com/file/y8Op8kBqkvCEMZQ7i13Fcr/SHARED-DOC-BEARS?type=design&node-id=1423-11679&mode=design&t=e4RAJK79cG93M41g-0

Add comments, considerations, and success criteria to ensure WCAG conformance for low-vision users for keyboard users.

WCAG SC 2.1.1 A

Resources: https://www.w3.org/WAI/perspective-videos/keyboard/ https://accessibility.digital.gov/ux/forms/ Digital.gov https://webaim.org/techniques/keyboard/

Can a keyboard user navigate the form without a mouse? Are focusable elements visible? Are keyboard elements in order? Are there any keyboard traps? Are links clickable with a mouse (enter key)? Are the accordions clickable with the space bar?

amycole501 commented 1 year ago

Update: keyboard testing was difficult due to the nature of storybook; we may need to pivot most of our testing to the MVP since testing the components in a more end-user form is going to be more valuable.

amycole501 commented 1 year ago

Testing the MVP in current sprint; will use storybook testing for more in-depth audits once initial MVP audit is complete.