Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Accessibility issue on the menu dropdown caret #4020

Closed
stefan-cotitosu opened this issue Jun 29, 2023 · 1 comment · Fixed by #4053
Closed

Accessibility issue on the menu dropdown caret #4020

stefan-cotitosu opened this issue Jun 29, 2023 · 1 comment · Fixed by #4053
Assignees
@preda-bogdan
Labels
bug This label could be used to identify issues that are caused by a defect in the product. customer report Indicates the request came from a customer. released Indicate that an issue has been resolved and released in a particular version of the product. small (1-3h) This label is used for issues that can be completed within 3 hours or less.

Comments

@stefan-cotitosu
Copy link
Contributor

Description

A customer reported they get an accessibility error for the caret of the dropdown menu. The problematic element has the CSS class caret-wrap navbar-toggle. As per my findings, the solution will be to add the aria-label attribute, as this is a HTML tag but with no text.

Step-by-step reproduction instructions

  1. Open this page https://demosites.io/web-agency-gb/
  2. Switch the browser to mobile mode, and you will see a dropdown caret on the menu item called portfolio
  3. Open the Inspect Element and search for for a button with the CSS class caret-wrap navbar-toggle
  4. It looks like there is no text on this button which can be a problem for the screen reader if I understand correctly

Screenshots, screen recording, code snippet or Help Scout ticket

Reported here: https://secure.helpscout.net/conversation/2286711494/375649/

Environment info

https://pastebin.com/fsDpau3y

Is the issue you are reporting a regression

No
@stefan-cotitosu stefan-cotitosu added the bug This label could be used to identify issues that are caused by a defect in the product. label Jun 29, 2023
@pirate-bot pirate-bot added the customer report Indicates the request came from a customer. label Jun 29, 2023
@preda-bogdan preda-bogdan added the small (1-3h) This label is used for issues that can be completed within 3 hours or less. label Jul 17, 2023
preda-bogdan added a commit that referenced this issue Jul 28, 2023
@preda-bogdan
fix: menu dropdown aria attribute #4020
4a37a0e
@preda-bogdan preda-bogdan mentioned this issue Jul 28, 2023
Merged
6 tasks
@preda-bogdan preda-bogdan linked a pull request Jul 28, 2023 that will close this issue
fix: menu dropdown aria attribute #4020 #4053
Merged
6 tasks
cristian-ungureanu pushed a commit that referenced this issue Aug 2, 2023
Merge pull request #4053 from Codeinwp/fix/menu_dropdown_aria
71e706e 
fix: menu dropdown aria attribute #4020
@pirate-bot
Copy link
Collaborator

🎉 This issue has been resolved in version 3.6.6 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

@pirate-bot pirate-bot added the released Indicate that an issue has been resolved and released in a particular version of the product. label Aug 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@preda-bogdan preda-bogdan

Labels
bug This label could be used to identify issues that are caused by a defect in the product. customer report Indicates the request came from a customer. released Indicate that an issue has been resolved and released in a particular version of the product. small (1-3h) This label is used for issues that can be completed within 3 hours or less.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: menu dropdown aria attribute #4020 Codeinwp/neve
4 participants
@cristian-ungureanu @preda-bogdan @stefan-cotitosu @pirate-bot