fix(a11y): Add aria-label to Sidebar component#12728
Conversation
hieptl
left a comment
There was a problem hiding this comment.
Hello @huangkevin-apr,
Thank you for creating this pull request — I appreciate the effort you’ve put into improving accessibility.
I do have a few pieces of feedback to share. While the accessibility intent is solid, the absence of internationalization support is a blocking concern, as it breaks consistency with the project’s established i18n pattern. Without i18n, screen reader labels would remain English-only for non-English users, which ultimately undermines the accessibility goal.
Action items for the author:
- (Required) Add internationalized string support for the aria-label.
- (Recommended) Consider using a more descriptive label than “Sidebar.”
- (Recommended) Evaluate whether the element would be a more appropriate target for the label.
Thank you very much for your work, and please let me know if you’d like to discuss any of these points further. 🙏
ab6edd6 to
a7d07d1
Compare
Hi @hieptl, thanks a lot for the detailed feedback! I’ve updated the sidebar a11y label to follow the project’s existing i18n pattern by introducing a new translation key (SIDEBAR$NAVIGATION_LABEL) in translation.json and using t(I18nKey.SIDEBAR$NAVIGATION_LABEL) instead of a hardcoded English string. |
Summary of PR
This PR fixes an accessibility violation in the Sidebar component by adding a descriptive
aria-labelattribute.Demo Screenshots/Videos
The patch submitted in this PR was generated by A11YRepair, an automated Web Accessibility repair tool that I developed to address common accessibility violations in web applications.
The generated fixes were manually reviewed and validated before submission.
Reasoning Process of A11YRepair:
Based on the A11Y Bug Report and WCAG Guidelines, the
<aside>element, which has an implicit ARIA role of "complementary", is missing an accessible name. This makes it difficult for screen reader users to understand the purpose of this landmark region and navigate the page effectively.To fix this, I will add an
aria-labelattribute to the<aside>element to provide a descriptive label, such as "Sidebar". This will satisfy the requirement for landmarks to be labeled, as outlined in WCAG 2.4.1 and demonstrated in techniques ARIA11 and ARIA6.Here is the patch to fix the violation:
Fix Before:

Fix After:

Change Type
Checklist
Fixes
Resolves #12727
Release Notes