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.4 - List of Navigable Issues #756

Open aliciajbrookshire opened 1 year ago

aliciajbrookshire commented 1 year ago

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 commented 1 year ago

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

https://github.com/Shift3/boilerplate-client-react/assets/106767049/3e85d538-0125-42f3-bff8-1adc4719f355

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 commented 1 year ago

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

https://github.com/Shift3/boilerplate-client-react/assets/106767049/4a01ca33-4719-40f8-bd30-4c18f2312733

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 commented 1 year ago

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

https://github.com/Shift3/boilerplate-client-react/assets/106767049/69243e43-ceec-429a-8b19-994512227e1f

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 commented 1 year ago

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

Screenshot 2023-05-23 at 4 14 16 PM

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