Skip to content

fix(a11y): Add aria-label to Sidebar component#12728

Merged
hieptl merged 1 commit intoOpenHands:mainfrom
huangkevin-apr:fix-a11y-aria-label
Feb 6, 2026
Merged

fix(a11y): Add aria-label to Sidebar component#12728
hieptl merged 1 commit intoOpenHands:mainfrom
huangkevin-apr:fix-a11y-aria-label

Conversation

@huangkevin-apr
Copy link
Copy Markdown
Contributor

Summary of PR

This PR fixes an accessibility violation in the Sidebar component by adding a descriptive aria-label attribute.

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-label attribute 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:

### /frontend/src/components/features/sidebar/sidebar.tsx
<<<<<<< SEARCH
      <aside
        className={cn(
          "h-[54px] p-3 md:p-0 md:h-[40px] md:h-auto flex flex-row md:flex-col gap-1 bg-base md:w-[75px] md:min-w-[75px] sm:pt-0 sm:px-2 md:pt-[14px] md:px-0",
          pathname === "/" && "md:pt-6.5 md:pb-3",
        )}
      >
=======
      <aside
        aria-label="Sidebar"
        className={cn(
          "h-[54px] p-3 md:p-0 md:h-[40px] md:h-auto flex flex-row md:flex-col gap-1 bg-base md:w-[75px] md:min-w-[75px] sm:pt-0 sm:px-2 md:pt-[14px] md:px-0",
          pathname === "/" && "md:pt-6.5 md:pb-3",
        )}
      >
>>>>>>> REPLACE

Fix Before:
image

Fix After:
image

Change Type

  • Bug fix
  • New feature
  • Breaking change
  • Refactor
  • Other (web accessibility enhancement)

Checklist

  • I have read and reviewed the code and I understand what the code is doing.
  • I have tested the code to the best of my ability and ensured it works as expected.

Fixes

Resolves #12727

Release Notes

  • Include this change in the Release Notes.

Copy link
Copy Markdown
Collaborator

@hieptl hieptl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:

  1. (Required) Add internationalized string support for the aria-label.
  2. (Recommended) Consider using a more descriptive label than “Sidebar.”
  3. (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. 🙏

@huangkevin-apr
Copy link
Copy Markdown
Contributor Author

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:

  1. (Required) Add internationalized string support for the aria-label.
  2. (Recommended) Consider using a more descriptive label than “Sidebar.”
  3. (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. 🙏

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.

Copy link
Copy Markdown
Collaborator

@hieptl hieptl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you! 🙏

@hieptl hieptl merged commit 8cd8c01 into OpenHands:main Feb 6, 2026
18 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: (Web Accessibility Violation) Sidebar missing accessible label

2 participants