ampproject / ampproject/amphtml
amp-sideba
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Description
The Issue: amp-sidebar Accessibility Bug ♿
Problem: The button that opens and closes the component does not correctly update its aria-expanded attribute. This attribute is essential for screen readers, as it tells users with visual impairments whether a collapsible element (like a sidebar menu) is currently open or closed.
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 component's logic. You won't need to understand the entire AMP codebase to solve it.
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](https://github.com/ampproject/amphtml/issues). 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
```shell
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
Open Menu
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
Open Menu
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_
Contributor guide
Research direction
Start with CONTRIBUTING.md, then locate the JavaScript implementation for the amp-sidebar component and its open/close toggle logic. Reproduce the interaction in the DOM and Accessibility panel, add or update coverage for aria-expanded, and verify it changes from false when closed to true when open and back again when closed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100