[feat] Update eslint rules for better a11y support #13412
Merged
Conversation
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
Contributor
✅ PR preview is ready!
|
This was referenced Dec 18, 2025
Collaborator
Author
Contributor
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR enhances accessibility linting by introducing a custom ESLint rule to prevent hiding interactive elements from screen readers, enabling three stricter jsx-a11y rules from the ecosystem, and fixing an existing violation where a checkbox lacked an accessible label.
Key Changes
- Created
no-aria-hidden-with-focusable-childrencustom ESLint rule to detect whenaria-hidden="true"is applied to elements containing focusable descendants - Enabled
jsx-a11y/control-has-associated-label,jsx-a11y/no-aria-hidden-on-focusable, andjsx-a11y/no-noninteractive-tabindexrules - Added
aria-labelto the audio recording checkbox in ScreencastDialog
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
frontend/eslint.config.mjs |
Enables the new custom rule and three stricter jsx-a11y rules in the ESLint configuration |
frontend/eslint-plugin-streamlit-custom/src/no-aria-hidden-with-focusable-children.ts |
Implements the custom ESLint rule that recursively checks for focusable descendants within aria-hidden containers |
frontend/eslint-plugin-streamlit-custom/src/no-aria-hidden-with-focusable-children.test.ts |
Adds comprehensive test cases covering valid and invalid usage patterns of the new rule |
frontend/eslint-plugin-streamlit-custom/src/index.ts |
Registers the new rule in the plugin's exports |
frontend/eslint-plugin-streamlit-custom/src/index.test.ts |
Updates the test to verify the new rule is properly exported |
frontend/app/src/hocs/withScreencast/components/ScreencastDialog/ScreencastDialog.tsx |
Fixes a11y violation by adding aria-label to the checkbox control |
frontend/eslint-plugin-streamlit-custom/src/no-aria-hidden-with-focusable-children.ts
Outdated
Show resolved
Hide resolved
Contributor
📉 Frontend coverage change detectedThe frontend unit test (vitest) coverage has decreased by 0.0000%
✅ Coverage change is within normal range. |
74c62a2 to
8b8a1f9
Compare
dfe8c9d to
99c90d7
Compare
Collaborator
Author
Merge activity
|
99c90d7 to
e7f33a2
Compare
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.
Describe your changes
no-aria-hidden-with-focusable-childrento prevent hiding interactive elements from screen readers.jsx-a11y/control-has-associated-label- Requires accessible names for icon-only controlsjsx-a11y/no-aria-hidden-on-focusable- Prevents hiding focusable elements from assistive technologyjsx-a11y/no-noninteractive-tabindex- Avoids making non-interactive elements keyboard-focusableTesting Plan
aria-hiddenusage.Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.