Skip to content

fix: improve accessible labels for CodeMirror views#385

Open
Pixel998 wants to merge 1 commit intomainfrom
fix/codemirror-accessible-labels
Open

fix: improve accessible labels for CodeMirror views#385
Pixel998 wants to merge 1 commit intomainfrom
fix/codemirror-accessible-labels

Conversation

@Pixel998
Copy link
Copy Markdown
Contributor

Prerequisites checklist

AI acknowledgment

  • I did not use AI to generate this PR.
  • (If the above is not checked) I have reviewed the AI-generated content before submitting.

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)

  • Moved the editor accessible name onto CodeMirror's editable content using EditorView.contentAttributes.
  • Removed the wrapper-level aria-label usage from the CodeMirror component call site.
  • Added explicit labels for each editor instance so the main source editor, AST JSON view, and code path view are announced distinctly.

Related Issues

Is there anything you'd like reviewers to focus on?

@netlify
Copy link
Copy Markdown

netlify bot commented Apr 12, 2026

Deploy Preview for eslint-code-explorer ready!

Name Link
🔨 Latest commit 670c290
🔍 Latest deploy log https://app.netlify.com/projects/eslint-code-explorer/deploys/69db18cc1736db000898bf91
😎 Deploy Preview https://deploy-preview-385--eslint-code-explorer.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@eslint-github-bot eslint-github-bot bot added the bug Something isn't working label Apr 12, 2026
@eslintbot eslintbot added this to Triage Apr 12, 2026
@github-project-automation github-project-automation bot moved this to Needs Triage in Triage Apr 12, 2026
@Pixel998 Pixel998 moved this from Needs Triage to Implementing in Triage Apr 13, 2026
@lumirlumir lumirlumir moved this from Implementing to Needs Triage in Triage Apr 14, 2026
@amareshsm amareshsm requested a review from Copilot April 14, 2026 10:18
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 ariaLabel prop to the shared Editor component and apply it via EditorView.contentAttributes to the editable content element.
  • Remove the wrapper-level aria-label from the CodeMirror component 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

Status: Needs Triage

Development

Successfully merging this pull request may close these issues.

4 participants