fix: improve accessible labels for CodeMirror views#385
Open
fix: improve accessible labels for CodeMirror views#385
Conversation
✅ Deploy Preview for eslint-code-explorer ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This PR improves accessibility for CodeMirror-based editors by ensuring the accessible name is applied to the actual editable surface and by providing distinct labels for different editor instances.
Changes:
- Add an
ariaLabelprop to the sharedEditorcomponent and apply it viaEditorView.contentAttributesto the editable content element. - Remove the wrapper-level
aria-labelfrom theCodeMirrorcomponent usage. - Provide explicit, distinct accessible labels for the main code editor, AST JSON view, and code path view.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| src/components/editor.tsx | Introduces required ariaLabel prop and applies it to CodeMirror’s editable content via contentAttributes; removes wrapper aria-label. |
| src/app.tsx | Supplies ariaLabel="Code Editor" to the primary editor instance. |
| src/components/ast/index.tsx | Supplies ariaLabel="AST JSON" for the AST JSON editor view. |
| src/components/path/index.tsx | Supplies ariaLabel="Code Path" for the code-path text view. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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.
Prerequisites checklist
AI acknowledgment
What is the purpose of this pull request?
This PR fixes how accessible labels are applied to our CodeMirror views. It moves the label to the actual editable element and gives each editor surface a clearer accessible name.
What changes did you make? (Give an overview)
EditorView.contentAttributes.aria-labelusage from theCodeMirrorcomponent call site.Related Issues
Is there anything you'd like reviewers to focus on?