Skip to content

fix(diffs): Add accessible name to editor textbox host - #829

Merged
mdo merged 1 commit into
beta-1.3from
diffs-editor-aria-label
Jun 17, 2026
Merged

fix(diffs): Add accessible name to editor textbox host#829
mdo merged 1 commit into
beta-1.3from
diffs-editor-aria-label

Conversation

@necolas

@necolas necolas commented Jun 17, 2026

Copy link
Copy Markdown
Contributor

Problem

The editor's contenteditable host in packages/diffs/src/editor/editor.ts sets role="textbox" and aria-multiline="true" but never sets an accessible name. Screen readers announce it as an unlabeled text field, so users have no way to tell which file the editing surface belongs to.

Change

Set aria-label to the current file name in __syncRenderView.

The label is set outside the block that initializes the content element's static attributes. That block only runs when the content element node changes, but File#applyFullRender reuses the same content element node across file switches (it replaces the inner HTML rather than the element). Setting the label only on initialization would leave it pointing at the previous file after a switch, so the label is refreshed on every sync, guarded by a value check to avoid redundant DOM writes on the render path.

A tabindex was considered but not added: a contenteditable="true" element is already focusable with an implicit tabindex=0, and adding one could change focus behavior.

The fix lives in the editor's shared __syncRenderView, which both File and FileDiff route through, so file and diff views are both covered.

Verification

  • moonx diffs:typecheck
  • moonx diffs:test (551 pass)
  • moon run root:format root:lint (no new warnings)

The contenteditable host advertises role="textbox" but had no
accessible name, so screen readers announced an unlabeled text
field. Label it with the current file name in __syncRenderView.

The content element is reused across file switches, so the label
is refreshed on every sync rather than only when the element is
first initialized.
@vercel

vercel Bot commented Jun 17, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
pierre-docs-diffs Ready Ready Preview Jun 17, 2026 10:03pm
pierre-docs-diffshub Ready Ready Preview Jun 17, 2026 10:03pm
pierre-docs-trees Ready Ready Preview Jun 17, 2026 10:03pm
pierrejs-diff-demo Ready Ready Preview Jun 17, 2026 10:03pm

Request Review

@mdo mdo left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Confirmed locally, label is present.

@mdo
mdo merged commit 2ac7611 into beta-1.3 Jun 17, 2026
8 checks passed
@mdo
mdo deleted the diffs-editor-aria-label branch June 17, 2026 22:15
amadeus pushed a commit that referenced this pull request Jun 22, 2026
The contenteditable host advertises role="textbox" but had no
accessible name, so screen readers announced an unlabeled text
field. Label it with the current file name in __syncRenderView.

The content element is reused across file switches, so the label
is refreshed on every sync rather than only when the element is
first initialized.
amadeus pushed a commit that referenced this pull request Jun 24, 2026
The contenteditable host advertises role="textbox" but had no
accessible name, so screen readers announced an unlabeled text
field. Label it with the current file name in __syncRenderView.

The content element is reused across file switches, so the label
is refreshed on every sync rather than only when the element is
first initialized.
amadeus pushed a commit that referenced this pull request Jun 24, 2026
The contenteditable host advertises role="textbox" but had no
accessible name, so screen readers announced an unlabeled text
field. Label it with the current file name in __syncRenderView.

The content element is reused across file switches, so the label
is refreshed on every sync rather than only when the element is
first initialized.
tjni pushed a commit to tjni/pierre that referenced this pull request Jun 25, 2026
…r#829)

The contenteditable host advertises role="textbox" but had no
accessible name, so screen readers announced an unlabeled text
field. Label it with the current file name in __syncRenderView.

The content element is reused across file switches, so the label
is refreshed on every sync rather than only when the element is
first initialized.
amadeus pushed a commit that referenced this pull request Jul 21, 2026
The contenteditable host advertises role="textbox" but had no
accessible name, so screen readers announced an unlabeled text
field. Label it with the current file name in __syncRenderView.

The content element is reused across file switches, so the label
is refreshed on every sync rather than only when the element is
first initialized.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants