search

Shift3 / boilerplate-client-react

The Bitwise standard starting point for new React web projects.
7 stars 10 forks source link

[A11y] - WCAG 2.1: Guideline 2.1 - List of Keyboard Accessibility Issues #755

Open aliciajbrookshire opened 1 year ago

aliciajbrookshire commented 1 year ago

Describe the bug

Filter options are not keyboard accessible in Farm List Directory

Expected behavior

2.1.1 Keyboard Level A

All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.

To Reproduce

Steps to reproduce the behavior:

  1. Go to https://boilerplate-client-react.shift3sandbox.com/farms
  2. Use tab to navigate to the Filters button, click enter to open the filter options
  3. Attempt to use the arrow keys to scroll down the filter options list
  4. Confirm that filter options are not accessible with keyboard navigation

Screenshots

https://github.com/Shift3/boilerplate-client-react/assets/106767049/54767b8c-0766-45da-9ec4-87ebd476bc96

Desktop (please complete the following information):

Asus Laptop Windows 10 Chrome 113..0.5672.127

Macbook Pro Ventura 13.3.1 Chrome 113.0.5672.126

Additional context

https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html

aliciajbrookshire commented 1 year ago

Describe the bug

Dark/light toggle is not keyboard accessible on login page

Expected behavior

2.1.1 Keyboard Level A

All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.

To Reproduce

Steps to reproduce the behavior:

  1. Go to https://boilerplate-client-react.shift3sandbox.com/
  2. Use tab key to navigate login page
  3. Confirm tab navigates user from BW icon to the email data entry field, continue tabbing and confirm the dark/light toggle is not in the tab order

Screenshots

https://github.com/Shift3/boilerplate-client-react/assets/106767049/3c8ec3b9-ca9b-4c68-a455-dafc79d2683b

Desktop (please complete the following information):

Asus Laptop Windows 10 Chrome 113..0.5672.127

Additional context

https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html

aliciajbrookshire commented 1 year ago

Describe the bug

User unable to access Farm directory table sort functions and table data with keyboard

Expected behavior

2.1.1 Keyboard Level A

All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.

To Reproduce

Steps to reproduce the behavior:

  1. Go to https://boilerplate-client-react.shift3sandbox.com/farms
  2. Use tab key to navigate farms page
  3. Confirm tab navigates user from the search bar to the Delete button and skips all table data and sort functions

Screenshots

https://github.com/Shift3/boilerplate-client-react/assets/106767049/9789d898-150a-4d42-b4bc-dddd8e9c8c46

Desktop (please complete the following information):

Asus Laptop Windows 10 Chrome 113..0.5672.127

Additional context

https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html

aliciajbrookshire commented 1 year ago

Describe the bug

Profile Photo section is not keyboard accessible

Expected behavior

2.1.1 Keyboard Level A

All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.

To Reproduce

Steps to reproduce the behavior:

  1. Go to https://boilerplate-client-react.shift3sandbox.com/
  2. Login as any user
  3. Click user profile button
  4. Click Profile
  5. Use tab to navigate profile page
  6. Confirm user cannot access profile photo section with keyboard

Screenshots

https://github.com/Shift3/boilerplate-client-react/assets/106767049/44bd1286-d2b2-4c09-bfb0-7645360fbf4b

Desktop (please complete the following information):

Asus Laptop Windows 10 Chrome 113..0.5672.127

Macbook Pro Ventura 13.3.1 Chrome 113.0.5672.126

Additional context

https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html