search

proudcity / wp-proudcity

The ProudCity WordPress platform
https://proudcity.com
Other
21 stars 9 forks source link

Ensure that items that are not meant to be exposed to a screen reader are correctly hidden #2505

Open lukefretwell opened 3 months ago

lukefretwell commented 3 months ago

Source

https://airtable.com/appRFUc45sF4yWFut/tbl51inE74gEWlB0x/viwG9G4vAjsjQEh4g/recewAlr1fbKazOXY?blocks=hide

Describe the bug

A clear and concise description of what the bug is.

https://www.adapacific.org/emergency-preparedness

When navigating with a screen reader using arrow keys, focus moves in an unexpected order. After reading the H1 on the page and the breadcrumb, the screen reader reads the main navigation menu and then a series of links that are not seen visually on the screen. See Video. The screen reader appears to be reading the two sets of menus that can be reached by selecting the BACK button on this page.

Note this same behavior does NOT occur when navigating with a keyboard only using TAB.

Note: This behavior occurs after selecting Emergency Preparedness from the TOPICS page: https://www.adapacific.org/topics/

Related to this, there is no focus outline on interactive elements when navigating with arrow keys.

There are three videos demonstrating this behavior.

Recommendations

Ensure that items that are not meant to be exposed to a screen reader are correctly hidden. Also check how the mobile menu interacts with the focus order on pages similar to Emergency Preparedness.

Screenshots

If applicable, add screenshots to help explain your problem.

https://github.com/proudcity/wp-proudcity/assets/1569463/03279147-5395-4cda-9e1d-32be8fa91142

https://github.com/proudcity/wp-proudcity/assets/1569463/403d60cc-743e-49d0-b28a-bf622faa8ad8

Back - LIst of topics Back - Menu

https://github.com/proudcity/wp-proudcity/assets/1569463/8c0c2d12-5c47-4958-915b-3c82406b3bf6

curtismchale commented 3 months ago

This is related to https://github.com/proudcity/wp-proudcity/issues/2330 which fixed the exact same thing but for Tab order only. We may be able to use some similar sort of solution here.