ampproject
amp-sideba
Description
The Issue: amp-sidebar Accessibility Bug ♿
Problem: The button that opens and closes the
Expected Behavior:
When the sidebar is closed, the button controlling it should have the attribute aria-expanded="false".
When the sidebar is opened, the button's attribute should change to aria-expanded="true".
Currently, this attribute is not being updated, which can confuse users who rely on assistive technology.
Why This is a Good First Issue ✅ High Impact: You'll be making the web more accessible for everyone.
Isolated Scope: The fix is contained within the
Clear Goal: It's easy to test and verify if your fix works. Either the attribute updates, or it doesn't.
Great Introduction: This will introduce you to handling user actions, manipulating the DOM, and writing tests within a major open-source project.
Reproduction Steps
How to Get Started 🚀 Find the Issue on GitHub: Go to the ampproject/amphtml GitHub issues page. Filter the issues by the label good first issue to find this one or other similar tasks.
Claim the Issue: Leave a comment on the issue thread saying you'd like to work on it. A project maintainer will usually assign it to you.
Set Up Your Environment: Follow the project's CONTRIBUTING.md file. This guide has all the instructions for forking the repository, installing dependencies, and running the project locally.
Implement the Fix: Locate the JavaScript file for the amp-sidebar component. Find the code that handles the open/close toggle and add the logic to set the aria-expanded attribute on the button.
Submit a Pull Request (PR): Once you've tested your changes, submit a PR. The project maintainers will review your code, provide feedback, and merge it when it's ready.
Relevant Logs
Relevant Logs
For this client-side UI and accessibility issue, there are no errors logged to the browser's Console. The relevant evidence is found by inspecting the DOM and the Accessibility Tree using browser developer tools.
Observations from Chrome DevTools (Elements & Accessibility Panel):
Initial State (Sidebar Closed):
The button controlling the sidebar is inspected.
The aria-expanded attribute is correctly set to "false".
Log:
HTML
<button on="tap:my-sidebar.toggle" aria-expanded="false">
Open Menu
</button>
Action (User clicks to open sidebar):
The sidebar correctly opens and becomes visible.
The aria-expanded attribute on the button fails to update. It remains "false".
Log:
HTML
<button on="tap:my-sidebar.toggle" aria-expanded="false">
Open Menu
</button>
The Accessibility Inspector confirms that screen readers are being informed that the element is still collapsed, which is incorrect.
Action (User clicks to close sidebar):
The sidebar correctly closes.
The aria-expanded attribute remains "false".
Summary: The browser console is clean. The bug is a silent failure to update a DOM attribute, confirmed by live inspection of the element's properties during interaction.
Tools
Browser(s) Affected
No response
OS(s) Affected
No response
Device(s) Affected
No response
AMP Version Affected
No response
