openedx / openedx/frontend-app-authoring

a11y (critical) - grading grade-range editor is unlabelled

Open Beginner friendly
#3,232 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

a11y bug
Dominant language
TypeScript
Stars
17
Forks
218
Avg merge
9d 20h
Merged PRs (30d)
20

Description

Where: frontend-app-course-authoring, Settings → Grading
(${APPS}/<mount>/course/<key>/settings/grading). Measured on Tutor main,
2026-09-08, on a fresh course (default Pass/Fail range).

Finding: axe reports two critical WCAG 2.2 AA violations in the editor's own
controls, independent of authored content:

  • button-name (1 node per draggable boundary): the range handles
    (button.grading-scale-segment-btn-resize[role="slider"]) carry
    aria-valuemin/max/now but no accessible name, so a screen reader announces
    "slider, 50" with no indication of which grade boundary it moves.
  • label (3 nodes on the default range, one per segment): the segment name
    fields (input[data-testid="grading-scale-segment-input"]) have no label,
    placeholder, or aria-label; the failing bucket's disabled field included.

Suggested fix: give each handle an aria-label naming the boundary it moves
(e.g. "Boundary between A and B"), and each segment field an aria-label
("Grade name") — the range text beside it is not associated with the input.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in frontend-app-course-authoring at Settings → Grading and locate the grading-scale resize handles and segment-name inputs using the selectors in the report. Rerun axe on a fresh course with the default Pass/Fail range; done means each boundary slider and segment field has an accessible name and the reported button-name and label violations are gone.

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
Clearly specified
Newbie friendliness
78/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.