Skip to content

fix(panel): Fix collapsed Panel content being exposed to screen readers#3365

Merged
michal-sanoma merged 1 commit into
mainfrom
fix/3046_hide_panel_content_for_screen_readers
May 21, 2026
Merged

fix(panel): Fix collapsed Panel content being exposed to screen readers#3365
michal-sanoma merged 1 commit into
mainfrom
fix/3046_hide_panel_content_for_screen_readers

Conversation

@michal-sanoma
Copy link
Copy Markdown
Collaborator

@michal-sanoma michal-sanoma commented May 20, 2026

Summary

This PR fixes an accessibility issue in collapsible sl-panel variants where screen reader users could navigate into visually collapsed panel content.

Changes:

  • Adds aria-hidden="true" to the panel body when a collapsible panel is collapsed
  • Adds inert to prevent focus/navigation into collapsed content
  • Removes both attributes again when the panel is expanded
  • Adds regression tests for toggled and initially collapsed panels

BEFORE

before.mov

AFTER

after.mov

@michal-sanoma michal-sanoma self-assigned this May 20, 2026
Copilot AI review requested due to automatic review settings May 20, 2026 16:09
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 20, 2026

🦋 Changeset detected

Latest commit: b1ed79f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@sl-design-system/panel Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Copy Markdown
Contributor

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 addresses an accessibility issue in sl-panel where visually collapsed content could still be reached by assistive technologies. It ensures collapsed panel content is removed from the accessibility tree and is not focusable/navigable until the panel is expanded again.

Changes:

  • Add inert and conditional aria-hidden="true" to the panel body when a collapsible panel is collapsed, and remove them when expanded.
  • Add regression tests covering both toggling to collapsed/expanded and initially-collapsed panels.
  • Add a changeset to publish the fix as a patch for @sl-design-system/panel.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File Description
packages/components/panel/src/panel.ts Applies inert + aria-hidden to collapsed collapsible panel body to prevent AT/focus access.
packages/components/panel/src/panel.spec.ts Adds regression tests verifying attributes are applied/removed correctly and on initial collapsed render.
.changeset/stupid-drinks-refuse.md Publishes a patch noting the accessibility fix.

@github-actions
Copy link
Copy Markdown
Contributor

🕸 Storybook preview

You can view a preview here (commit b1ed79fb8734881f033fec5f6402761e75e2c47b).

@michal-sanoma michal-sanoma marked this pull request as ready for review May 21, 2026 05:45
Comment thread .changeset/stupid-drinks-refuse.md
@michal-sanoma michal-sanoma merged commit 957d7c5 into main May 21, 2026
14 of 15 checks passed
@michal-sanoma michal-sanoma deleted the fix/3046_hide_panel_content_for_screen_readers branch May 21, 2026 11:02
@github-actions github-actions Bot mentioned this pull request May 21, 2026
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.

[Panel] For collapsible variants screen reader can read collapsed panel content.

4 participants