openedx / openedx/frontend-app-authoring
a11y (critical) - course outline violations
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 17
- Forks
- 218
- Avg merge
- 9d 20h
- Merged PRs (30d)
- 20
Description
Where: frontend-app-course-authoring, the course outline (${APPS}/course-authoring/course/)
Finding: axe reports two critical WCAG 2.2 AA violations in the page’s own chrome, independent of authored content:
aria-allowed-attr (4 nodes): the right-hand sidebar’s icon buttons (“Info”, “Add”, “Align”, “Help”) carry aria-selected, which is not a supported ARIA attribute on a button.
button-name (1 node): the card action toggle (.pgn__dropdown-toggle-iconbutton) has no accessible name (no text, aria-label, or aria-labelledby).
Suggested fix: drop aria-selected from the sidebar icon buttons (or make them real tabs/toggles with the right role), and give the card action toggle an aria-label.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in frontend-app-course-authoring/course/ and locate the course outline chrome, the sidebar icon buttons, and .pgn__dropdown-toggle-iconbutton. Run the axe accessibility checks to reproduce the two reported violations. Done means the sidebar controls use supported ARIA attributes and the card action toggle has an accessible name, with no remaining critical violations.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 74/100