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.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
accessibility, frontend

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.

Description

a11y bug

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.

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

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.

More from openedx/frontend-app-authoring

All issues in openedx/frontend-app-authoring

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.