Fixing accessibility bug #3229
Fixing accessibility bug #3229
Conversation
| @@ -102,7 +102,7 @@ export const Sidebar = (props: Props) => { | |||
| classes.push("closed") | |||
| } | |||
|
|
|||
| const opened = { "aria-expanded": "true", "aria-label": item.title + " close" } | |||
There was a problem hiding this comment.
The naming implies this button can "close" things (because it's opened), the closed variable below has "expand" because it can expand things. Where does the bug come into play?
There was a problem hiding this comment.
It mentions that the Screen reader users will get incorrect information about the "Handbook button" as "Handbook Close Button
There was a problem hiding this comment.
What happens if we add aria-expanded: false to closed? Does that provide a distinction in the screen reader?
There was a problem hiding this comment.
Yes, so I checked in the office hours, and they said that "aria-label" is not needed here since the button already has a name. Just making sure that "aria-expanded" is correctly set to true or false will be enough for the screen reader to produce the expected result.
navya9singh
added
the
deploy-preview
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-plant-05c166c10-3229.centralus.5.azurestaticapps.net |
Fixing https://devdiv.visualstudio.com/DevDiv/_workitems/edit/2187524
The PR fixes the incorrect name provided for "Handbook" button as "Handbook Close" Button.