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

[aliciajbrookshire]

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

Screen.Recording.2023-05-23.at.9.44.26.AM.mov

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]

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

Screen.Recording.2023-05-23.at.9.52.28.AM.mov

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]

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

Screen.Recording.2023-05-23.at.9.58.16.AM.mov

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]

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

Screen.Recording.2023-05-23.at.4.06.49.PM.mov

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