Clear the a11y findings eslint-plugin-styled-components-a11y 2.2 adds - #3868
Merged
Merged
Conversation
Two are real: the contract admin table had an unlabelled columnheader, and the user menu declared role="button" on a styled.button. The other seven are deliberate patterns the rules cannot see through, so they get a scoped disable with the reason: - Card and the video-shorts player forward a body click to a control the user can already reach by keyboard (the card's own anchor, the visible PlayPauseButton). A keydown handler would duplicate it. - The video-shorts slide is the APG carousel pattern: role="group" with a roving tabindex and Enter to toggle playback. - NavDrawer is a persistent Drawer, so it is not a MUI Modal and gets no built-in Escape handling; the onKeyUp is the only keyboard exit. - The suppressed-value marker is focusable so its tooltip is reachable without a pointer; there is no action to justify a button. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FyJ72HRTyQf6jVYmw3GZSt
OpenAPI ChangesNo changes detected Unexpected changes? Ensure your branch is up-to-date with |
Contributor
There was a problem hiding this comment.
Pull request overview
Addresses new accessibility lint findings introduced by eslint-plugin-styled-components-a11y 2.2.1.
Changes:
- Corrects accessible semantics for action headers and the user-menu button.
- Adds scoped lint suppressions with rationale for intentional interaction patterns.
- Preserves keyboard-accessible tooltips, drawers, cards, and video controls.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
NavDrawer.tsx |
Documents and suppresses intentional Escape handling. |
Card.tsx |
Suppresses card click-forwarding warnings. |
UserMenu.tsx |
Removes redundant button role. |
VideoShortsModal.tsx |
Documents intentional carousel interactions. |
format.tsx |
Preserves keyboard-focusable tooltip marker. |
ContractAdminPage.tsx |
Labels the actions column header. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
The comment claimed the Escape listener was the only keyboard way out of the drawer. It is not: the Close Navigation button at NavDrawer.tsx:204 is the primary exit, and this listener adds the Escape shortcut on top of it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FyJ72HRTyQf6jVYmw3GZSt
The comments claimed the container click always forwards to the card's anchor. It only does when forwardClicksToLink is set, and that defaults to false (Card.tsx:321) -- in the other mode handleClick is the raw onClick and the container is pointer-only. Every caller today pairs the two (BaseLearningResourceCard), but nothing enforces it and Card is an ol-components export. Comment says so now; #3874 tracks making it impossible to get wrong. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FyJ72HRTyQf6jVYmw3GZSt
ChristopherChudzicki
approved these changes
Aug 31, 2026
This was referenced Aug 31, 2026
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.
What are the relevant tickets?
Unblocks #3851 (the dev-dependency bundle).
eslint-plugin-styled-components-a11y2.1.35 → 2.2.1 adds nine errors; landing them here keeps #3851 a pure dependency bump.Description (What does it do?)
Two are real bugs.
ContractAdminPage.tsx:886— the actions column rendered<ActionCell role="columnheader" />with no content and no label, so the column was announced as an empty header. Nowaria-label="Actions".UserMenu.tsx:219—UserMenuContaineris astyled.button(UserMenu.tsx:23), so the explicitrole="button"was redundant. Removed.Seven are deliberate patterns the rules cannot see through, so each gets a scoped
eslint-disable-next-linewith the reason written next to it rather than a blanket rule change:Card.tsx×2click-events-have-key-eventsa[data-card-link="true"](seeuseClickChildLink,Card.tsx:208). Keyboard users tab straight to that anchor; a keydown handler would add a second focusable copy of one link.VideoShortsModal.tsx:221click-events-have-key-events,no-static-element-interactionsPlayPauseButtonand on the slide's Enter handler.VideoShortsModal.tsx:504no-noninteractive-element-interactionsrole="group"+aria-roledescription="slide"+ roving tabindex, Enter to toggle.NavDrawer.tsx:259no-static-element-interactionsvariant="persistent", so it is not a MUI Modal and gets no built-in Escape handling. ThisonKeyUpis the only keyboard way out.format.tsx:102no-noninteractive-tabindexaria-label.Worth a second opinion on two of these: the
format.tsxmarker (a<button>would satisfy the rule but there is no action behind it), and theVideoShortsModal.tsx:221container (the duplicate-affordance argument depends onPlayPauseButtonstaying visible for the selected slide).How can this be tested?
Verified against the 2.2.1 plugin on the #3851 branch, where all nine errors are gone and only the four unrelated
import/no-restricted-pathserrors remain.yarn workspace frontends run typecheckpasses.yarn test UserMenu Card.test NavDrawer ContractAdminPage VideoShortsModal— 19 suites, 561 tests, all passing.No
reportUnusedDisableDirectivesis configured, so the disable comments are inert until the plugin bump lands.🤖 Generated with Claude Code
https://claude.ai/code/session_01FyJ72HRTyQf6jVYmw3GZSt