Repository navigation
fix(a11y): use role group for ranking lists container - #3842
Merged
Merged
Conversation
Chartman123
added
3. to review
Collaborator
|
/backport to stable5.4 |
There was a problem hiding this comment.
🟡 Changes recommended
The accessibility test asserts visibility on an empty ranked list with a zero-height bounding box, causing it to fail; assert attachment instead or rank an option first.
1 open issue
What changed in this PR
This PR addresses #3840 by correcting the ranking question’s accessibility structure in submit mode, grouping the two option lists rather than treating their wrapper as a list.
Changes:
- Changes the outer container to
role="group"while preserving its ARIA bindings. - Names both inner lists and removes the redundant ranked-item role.
- Adds a Playwright regression test for the group and named lists.
| File | Description |
|---|---|
src/components/Questions/QuestionRanking.vue |
Corrects container semantics and labels the ranking lists. |
playwright/e2e/a11y-question-inputs.spec.ts |
Adds assertions for the ranking group and its named lists. |
Review effort: Balanced
Chartman123
approved these changes
Nov 7, 2026
Chartman123
left a comment
Chartman123
left a comment
Collaborator
There was a problem hiding this comment.
Looks good now, thanks for the fix :)
Please squash the two commits into one, else the automatic backport might fail.
The submit-mode ranking question wrapped two inner lists in a container with role="list" even though it is not a list itself. Change the outer container to role="group", keep the named inner lists, and add an explicit role="list" so WebKit exposes them as lists despite missing list markers. The ranked list only gets the role while populated to avoid an empty list role. Add a Playwright regression test asserting the group, the list names and the explicit roles. Signed-off-by: yashgill-10 <yashgill-10@users.noreply.github.com>
yashgill-10
force-pushed
the
fix-3840-ranking-aria
branch
from
November 8, 2026 04:03
745bffc to
42f21c2
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #3840.
Problem: In submit (read-only) mode, the ranking question's outer
div.question__contenthadrole="list", but its direct children are the.ranking-unrankedand.ranking-rankedsections — not list items. This violatesaria-required-children(axe): alistmust only containlistitemchildren.Root cause: The explicit
role="list"was placed on the wrapper instead of on the actual<ul>elements rendered by theTransitionGroups, and the ranked<li>elements redundantly carriedrole="listitem".Solution:
role="group"and keeps its existingaria-labelledby/aria-describedby/aria-errormessage/aria-invalidbindings.<ul>getsaria-label="Unranked options".<ul>is named viaaria-labelledby.role="listitem"from ranked<li>elements (native<li>semantics already apply).Tests: Added a Playwright case to
playwright/e2e/a11y-question-inputs.spec.tsasserting the group contains two named lists.Testing performed
prettier --check/eslinton both changed files: pass.stylelintonQuestionRanking.vue: pass.vue-tsc --noEmit: reports pre-existing errors across the codebase (e.g.QuestionShort.vue,Forms.vue,main.ts) unrelated to this template-only change; none reference the modified lines.AI disclosure
This change was prepared with AI assistance (Devin) and reviewed by the contributor; the implementation and verification steps above were actually executed.