Skip to content

fix(a11y): replace aria-hidden button with role=presentation span in EntityTreeNode#143

Closed
R-Hart80 wants to merge 1 commit into
CatholicOS:devfrom
R-Hart80:fix/aria-hidden-expand-button
Closed

fix(a11y): replace aria-hidden button with role=presentation span in EntityTreeNode#143
R-Hart80 wants to merge 1 commit into
CatholicOS:devfrom
R-Hart80:fix/aria-hidden-expand-button

Conversation

@R-Hart80

Copy link
Copy Markdown
Contributor

Summary

  • Replaces the <button> expand/collapse chevron in EntityTreeNode with a <span role="presentation">
  • Removes the conflicting tabIndex={-1} and aria-hidden="true" combination that caused Chrome DevTools to flag: "Blocked aria-hidden on an element because its descendant retained focus"

Why this fix works

A <button> can still receive focus programmatically (e.g. via mouse click) even with tabIndex={-1}, which contradicts aria-hidden="true". A <span role="presentation"> removes the element from the accessibility tree entirely while preserving click functionality for mouse users. Keyboard navigation is already handled by the parent <li role="treeitem">.

Test plan

  • Open the editor and expand/collapse tree nodes — chevron should still work on click
  • Run Chrome DevTools accessibility audit — no more aria-hidden focus conflict warning
  • Tab through the tree with keyboard — expand/collapse is handled by the parent li, no change in behavior

Fixes #100

🤖 Generated with Claude Code

…EntityTreeNode

The expand/collapse chevron was a <button> with both tabIndex={-1} and
aria-hidden="true", causing Chrome DevTools to flag a focus conflict:
"Blocked aria-hidden on an element because its descendant retained focus."

Buttons can still receive focus programmatically (via clicks) even with
tabIndex={-1}, which contradicts aria-hidden. Replacing it with a <span
role="presentation"> removes the element from the accessibility tree
entirely while preserving click functionality for mouse users. Keyboard
navigation is already handled by the parent <li role="treeitem">.

Fixes CatholicOS#100

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented Apr 13, 2026

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3f7bb240-c719-4510-82a0-5ffc8ecddf43

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@JohnRDOrazio
JohnRDOrazio changed the base branch from main to dev April 13, 2026 19:49
@JohnRDOrazio JohnRDOrazio added the bug Something isn't working label Apr 13, 2026
@JohnRDOrazio

Copy link
Copy Markdown
Member

Closing in favor of #153, which includes this fix along with #144's fix, plus additional improvements (cursor-pointer class, data-testid attribute, and updated tests).

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

None yet

Development

Successfully merging this pull request may close these issues.

Accessibility: aria-hidden on focusable expand/collapse button in entity tree

2 participants