fix(theme): improve docs sidebar category caret aria-label accessibility

[pinakipb2]

Pre-flight checklist

• I have read the Contributing Guidelines on pull requests.

Motivation

Fixes #9162

Test Plan

Test links

https://deploy-preview-9269--docusaurus-2.netlify.app/

Related issues/PRs

#9162

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	7c02820
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/6502c71052fe8a000836f231
😎 Deploy Preview	https://deploy-preview-9269--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🟠 74	🟢 97	🟢 92	🟢 100	🟠 89	Report
/docs/installation	🟠 79	🟢 98	🟢 92	🟢 100	🟠 89	Report

[slorber]

Reading #9269, I'm not 100% sure it's what @msftedad want, but we'll see when they review. In any case that seems like a valid aria-label an improvement that we'll want to merge.

I'd prefer if you didn't duplicate the button JSX because only 1 prop is different for the 2 cases

[slorber]

@msftedad can you please review this PR and tell us if it improves accessibility for you?

Preview url: https://deploy-preview-9269--docusaurus-2.netlify.app/

Thanks

[pinakipb2]

Hi @slorber its not "fix(a11y): fix docs sidebar category caret button accessibility, improve aria-label" as its not only for docs, it will affect the sidebar on every page using docusaurus. Its a change on the main product. The sidebar of the generated sites will have this a11y. Its better for users with screen readers to know if the sidebar category button is expand/collapse type so that they know the action they are performing.

Ignore if you mean the documentation site(site generated by docusaurus) as docs.

[slorber]

Hi @slorber its not "fix(a11y): fix docs sidebar category caret button accessibility, improve aria-label" as its not only for docs, it will affect the sidebar on every page using docusaurus. Its a change on the main product. The sidebar of the generated sites will have this a11y. Its better for users with screen readers to know if the sidebar category button is expand/collapse type so that they know the action they are performing.

Ignore if you mean the documentation site(site generated by docusaurus) as docs.

Sorry but I don't understand 😅

[pinakipb2]

Sorry but I don't understand 😅

Hi @slorber, people who are visually impaired rely on screen readers, the screen readers read the content of the website to them. But some complex components like button with a icon, its really hard for them(screen readers) to know the function of the button, and they don't know what to say aloud. So aria-label is used to so that they know what the button does and they say that aloud. So, in sidebar, in dropdown now the screen reader will say if the dropdown is collapsed or expanded, so the visually impaired person can know if clicking it will collapse the menu or expand it. As docusaurus generates website, which has sidebar, so the now the newly created websites with docusaurus will have better a11y for such persons in the sidebar.

As previously it was reading "Toggle the collapsible sidebar category 'Getting Started'", so it was unclear now it will be reading "Expand/Collapse the collapsible sidebar category 'Getting Started" based on the button state.

Hope you understand it now. 😉

[pinakipb2]

@slorber @msftedad Have a look on the PR !

[pinakipb2]

Hi @slorber, as mentioned in #9162 (comment) by @msftedad, you can now merge this PR.
Thanks !

[slorber]

Thanks 👍

Just renamed the "isActive" props to "collapsed" because it's not super clear what isActive means if we extract later the button to a separate file