[A11y] - WCAG 2.1 - Guideline 2.4 - List of Navigable Issues

[aliciajbrookshire]

Describe the bug

Password visibility button on login page does not receive visible focus

Expected behavior

2.4.7
Focus Visible
Level AA

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://boilerplate-client-react.shift3sandbox.com/
2. Use keyboard to navigate page, until you get to the password visibility button
3. Confirm there is not a focus visibility indicator

Screenshots

Uploading Screen Recording 2023-05-23 at 10.23.06 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/focus-visible.html

[aliciajbrookshire]

Describe the bug

Filter button on farm directory page does not receive visible focus

Expected behavior

2.4.7
Focus Visible
Level AA

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://boilerplate-client-react.shift3sandbox.com/farms
2. Use keyboard to navigate page, until you get to the filter button
3. Confirm there is not a focus visibility indicator

Screenshots

Screen.Recording.2023-05-23.at.10.25.43.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/focus-visible.html

[aliciajbrookshire]

Describe the bug

Reset my Password in the Security and Password section doesn't receive visible focus when navigating with keyboard

Expected behavior

2.4.7
Focus Visible
Level AA

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://boilerplate-client-react.shift3sandbox.com/
2. Click User icon in the top right
3. Select Account Settings
4. Click Security and Password
5. Use tab to navigate and confirm Reset my Password button doesn't have a visible focus indicator

Screenshots

Screen.Recording.2023-05-23.at.4.12.51.PM.1.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/focus-visible.html

[aliciajbrookshire]

Describe the bug

There are two tab stops with visible focus on the notification button in the nav bar

Expected behavior

2.4.7
Focus Visible
Level AA

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://boilerplate-client-react.shift3sandbox.com/
2. Use tab button to navigate page, until you get to the notification bell in the nav bar
3. Notice that you have to tab twice to move the focus indicator to the user profile button
4. Shift + Tab twice to return to the first tab stop on the notification button, then click enter
5. Notice that user can now see the drop-down options for notifications but is unable to tab through those options
6. Click enter on the second tab stop on the notification bell
7. Confirm that the user can now enter the notification options and tab through

Screenshots

Screen.Recording.2023-05-26.at.10.12.06.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/focus-visible.html

[aliciajbrookshire]

Describe the bug

Change my Email button in user profile does not have focus visibility indicator

Expected behavior

2.4.7
Focus Visible
Level AA

Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://boilerplate-client-react.shift3sandbox.com/
2. Click on the user profile button
3. Select Account Settings > User Profile
4. Use tab to navigate through page
5. Confirm there is not a focus visibility indicator on the Change my Email button

Screenshots

Desktop (please complete the following information):

Asus Laptop
Windows 10
Chrome 113..0.5672.127

Additional context

https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html