Skip to content

fix(ComposedModal-a11y): label body when scrollable#22353

Merged
kennylam merged 4 commits into
carbon-design-system:mainfrom
maradwan26:composedmodal-a11y-fix
Jun 1, 2026
Merged

fix(ComposedModal-a11y): label body when scrollable#22353
kennylam merged 4 commits into
carbon-design-system:mainfrom
maradwan26:composedmodal-a11y-fix

Conversation

@maradwan26

@maradwan26 maradwan26 commented Jun 1, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Closes #19512

Fixes an accessibility issue with ModalBody in ComposedModal where when scrollable, the body gets a role of region, but does not get accessible labelling.

Changelog

New

  • aria-label and aria-labelledby props in ModalBody can be used to manually set the accessible label on the ModalBody
    • Manually setting labels is not necessary to pass accessibility, though, this is just for added customizability if an adopter needs it
  • When scrollable, ModalHeader passes labelId and titleId down, which then reaches the ModalBody which uses it to set the accessible label
  • Added tests to cover this change

Testing / Reviewing

  • Go to any of the ComposedModal stories
  • Shrink the viewport height/zoom in/etc. to make the ModalBody scrollable, or just use the "With Scrolling Content" story
  • Run the Accessibility checker
  • 'Element with "region" role does not have a label' violation should not be present
Screenshot 2026-06-01 at 11 01 03 AM Screenshot 2026-06-01 at 11 01 25 AM

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

  • Reviewed every line of the diff
  • [ ] Updated documentation and storybook examples
  • Wrote passing tests that cover this change
  • Addressed any impact on accessibility (a11y)
  • Tested for cross-browser consistency
  • Validated that this code is ready for review and status checks should pass

@maradwan26 maradwan26 requested review from a team as code owners June 1, 2026 15:04
@netlify

netlify Bot commented Jun 1, 2026

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-web-components ready!

Name Link
🔨 Latest commit e0d6206
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/6a1d9f9f060d1e0008995777
😎 Deploy Preview https://deploy-preview-22353--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

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

@netlify

netlify Bot commented Jun 1, 2026

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit e0d6206
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/6a1d9f9e6116e90008cf12ff
😎 Deploy Preview https://deploy-preview-22353--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

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

@netlify

netlify Bot commented Jun 1, 2026

Copy link
Copy Markdown

✅ Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit e0d6206
🔍 Latest deploy log https://app.netlify.com/projects/carbon-elements/deploys/6a1d9f9e13c61e0007df54f0
😎 Deploy Preview https://deploy-preview-22353--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

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

@netlify

netlify Bot commented Jun 1, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-web-components ready!

Name Link
🔨 Latest commit 22e704c
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/6a1daf7f91e2bb00080c564c
😎 Deploy Preview https://deploy-preview-22353--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

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

@netlify

netlify Bot commented Jun 1, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 22e704c
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/6a1daf7feb0c3a0008e8303c
😎 Deploy Preview https://deploy-preview-22353--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

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

@netlify

netlify Bot commented Jun 1, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit 22e704c
🔍 Latest deploy log https://app.netlify.com/projects/carbon-elements/deploys/6a1daf7f7b1029000848eaa8
😎 Deploy Preview https://deploy-preview-22353--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

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

@codecov

codecov Bot commented Jun 1, 2026 •
edited
Loading

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 95.39%. Comparing base (bceaa16) to head (22e704c).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files 
@@           Coverage Diff           @@
##             main   #22353   +/-   ##
=======================================
  Coverage   95.39%   95.39%           
=======================================
  Files         543      543           
  Lines       48446    48465   +19     
  Branches     6759     6767    +8     
=======================================
+ Hits        46214    46233   +19     
  Misses       2107     2107           
  Partials      125      125
Flag Coverage Δ
main-packages 87.82% <100.00%> (+0.02%) ⬆️
web-components 98.07% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@maradwan26 maradwan26 added severity: 2 https://ibm.biz/carbon-severity adopter: strategic-product Work-stream that directly effects the Product-led Growth initiative. labels Jun 1, 2026
kennylam
kennylam reviewed Jun 1, 2026
View reviewed changes
Comment thread packages/react/src/components/ComposedModal/ModalHeader.tsx Outdated
@maradwan26 maradwan26 requested a review from kennylam June 1, 2026 16:13
ariellalgilmore
ariellalgilmore reviewed Jun 1, 2026
View reviewed changes
Comment thread packages/react/src/components/ComposedModal/ComposedModal.tsx
@kennylam kennylam enabled auto-merge June 1, 2026 17:18
@kennylam kennylam added this pull request to the merge queue Jun 1, 2026
@github-merge-queue github-merge-queue Bot removed this pull request from the merge queue due to failed status checks Jun 1, 2026
@kennylam kennylam added this pull request to the merge queue Jun 1, 2026
Merged via the queue into carbon-design-system:main with commit 027539f Jun 1, 2026
70 of 72 checks passed
@maradwan26 maradwan26 deleted the composedmodal-a11y-fix branch June 1, 2026 18:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@kennylam kennylam kennylam approved these changes

@ariellalgilmore ariellalgilmore ariellalgilmore approved these changes

@annawen1 annawen1 annawen1 approved these changes

@emyarod emyarod Awaiting requested review from emyarod emyarod is a code owner automatically assigned from carbon-design-system/monorepo-reviewers

@heloiselui heloiselui Awaiting requested review from heloiselui heloiselui is a code owner automatically assigned from carbon-design-system/monorepo-reviewers

Assignees

No one assigned

Labels

adopter: strategic-product Work-stream that directly effects the Product-led Growth initiative. severity: 2 https://ibm.biz/carbon-severity status: ready to merge 🎉

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[a11y]: ComposedModal - accessibility checker throws 'Element with "region" role does not have a label' violation

4 participants

@maradwan26 @kennylam @ariellalgilmore @annawen1