fix: added missing accessibility labels for pagination elements #21051

grishma-shah7 · 2025-11-19T09:44:25Z

Closes #20042

This PR includes:

bug fix for pagination button where aria label was not being set correctly due to condition.
Issue was that in web-components button component, we have a condition that if tooltipText is present AND the button is not disabled, we show the aria label. Otherwise it is missing. Issue comes up on pagination component, it uses the button with the tooltipText present, but when on page#1 the previous page button is disabled and hence there is no label associated with it. For the fix, we'll check if tooltipText is present, use that text as aria-label, otherwise keep as empty

Before:

After:

title attribute missing on select component on pagination
To match the react component version, where the pagination select component has title attribute added as the value of the dropdown, have added the same for the web component select component

React:

Web-component before:

Web-component after:

Changelog

New

{{new thing}}

Changed

{{changed thing}}

Removed

{{removed thing}}

Testing / Reviewing

{{ Add steps or a checklist for how reviewers can verify this PR works or not }}

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

More details can be found in the pull request guide

github-actions · 2025-11-19T09:44:41Z

All contributors have signed the DCO.
_{Posted by the DCO Assistant Lite bot.}

grishma-shah7 · 2025-11-19T09:46:17Z

I have read the DCO document and I hereby sign the DCO.

netlify · 2025-11-19T09:51:02Z

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

Name	Link
🔨 Latest commit	`38a39a7`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/69242099ad652f0009495463
😎 Deploy Preview	https://deploy-preview-21051--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

netlify · 2025-11-19T09:51:49Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`38a39a7`
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-elements/deploys/6924209956b27d000878a12a
😎 Deploy Preview	https://deploy-preview-21051--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

netlify · 2025-11-19T09:53:48Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`92897c3`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/691d917c327fd100087bfc42
😎 Deploy Preview	https://deploy-preview-21051--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

netlify · 2025-11-19T10:02:47Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`38a39a7`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/692420990d89fb00086b8ef7
😎 Deploy Preview	https://deploy-preview-21051--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

heloiselui · 2025-11-21T11:19:00Z

Hey, the DCO check is failing. It looks like the commit was made with a different account, try signing off the DCO with that account as well.

codecov · 2025-11-21T11:43:51Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 92.59%. Comparing base (19424c0) to head (38a39a7).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #21051      +/-   ##
==========================================
- Coverage   92.60%   92.59%   -0.01%     
==========================================
  Files         515      515              
  Lines       38220    38222       +2     
  Branches     5861     5865       +4     
==========================================
+ Hits        35392    35393       +1     
- Misses       2678     2679       +1     
  Partials      150      150

Flag	Coverage Δ
main-packages	`85.61% <ø> (ø)`
web-components	`96.87% <100.00%> (-0.01%)`	⬇️

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.

heloiselui · 2025-11-21T12:06:57Z

packages/web-components/src/components/button/button.ts

            ?disabled="${disabled}"
            tabindex="${tabIndex}"
            type="${ifDefined(type)}"
+            aria-label="${ifDefined(tooltipText) ?? ''}"


Suggested change

aria-label="${ifDefined(tooltipText) ?? ''}"

aria-label="${ifDefined(tooltipText)}"

instead of always setting aria-label="${ifDefined(tooltipText) ?? ''}", we can omit the attribute when no tooltip text exists. The previous version left an empty aria-label="" on every non-tooltip button, which overrides any text content and strips the accessible name. With ifDefined(tooltipText) alone, pagination buttons still get their tooltip text as the label, while regular buttons fall back to the default label behavior.

Agreed! Have addressed this change

2nikhiltom

LGTM, thanks for following up
DCO check is still failing. looks like there are 2 different account, try signing off the DCO with that account as well

grishma-shah7 · 2025-11-24T07:59:49Z

LGTM, thanks for following up DCO check is still failing. looks like there are 2 different account, try signing off the DCO with that account as well

Hi @2nikhiltom that second account is not mine, not sure how but it seems like it picked up someone else's account
Can we do something for it, or would I need to create a new PR?

grishma · 2025-11-24T08:23:49Z

Can you please remove my email id from this thread? I have nothing to with this repo

…

On Mon, Nov 24, 2025 at 1:30 PM grishma-shah7 ***@***.***> wrote: *grishma-shah7* left a comment (carbon-design-system/carbon#21051) <#21051 (comment)> LGTM, thanks for following up DCO check is still failing. looks like there are 2 different account, try signing off the DCO with that account as well Hi @2nikhiltom <https://github.com/2nikhiltom> that second account is not mine, not sure how but it seems like it picked up someone else's account Can we do something for it, or would I need to create a new PR? — Reply to this email directly, view it on GitHub <#21051 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAL7LZP4RCJZ6UYEQPW7TUL36K3IZAVCNFSM6AAAAACMRVOTVCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTKNRZGM4TKMRSGM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

…stem#21036) Co-authored-by: Gururaj J <[email protected]> Co-authored-by: Heloise Lui <[email protected]>

…sign-system#20863 (carbon-design-system#21048) * feat(dropdown): reintroduce parity changes from reverted PR carbon-design-system#20863 * fix(multi-select): ensure input reflects aria-expanded state

…n-system#21044) * chore(styles): update sass api for web component builds * chore(styles): update deprecated type-of() in theme --------- Co-authored-by: Gururaj J <[email protected]> Co-authored-by: Heloise Lui <[email protected]>

…design-system#21064)

heloiselui

LGTM

grishma-shah7 requested a review from a team as a code owner November 19, 2025 09:44

grishma-shah7 requested review from 2nikhiltom and heloiselui November 19, 2025 09:44

grishma-shah7 deployed to @carbon/react storybook preview November 21, 2025 11:58 — with GitHub Actions View deployment

heloiselui requested changes Nov 21, 2025

View reviewed changes

2nikhiltom approved these changes Nov 24, 2025

View reviewed changes

2nikhiltom requested a review from heloiselui November 24, 2025 07:49

grishma-shah7 deployed to @carbon/react storybook preview November 24, 2025 07:58 — with GitHub Actions View deployment

grishma-shah7 and others added 7 commits November 24, 2025 14:36

fix: added missing accessibility labels for pagination elements

5a895f4

fix: update contribution

7c8360d

Fix formatting for cds-callout-notification section (carbon-design-sy…

c431a9a

…stem#21036) Co-authored-by: Gururaj J <[email protected]> Co-authored-by: Heloise Lui <[email protected]>

feat(dropdown): reintroduce parity changes from reverted PR carbon-de…

dfea2d1

…sign-system#20863 (carbon-design-system#21048) * feat(dropdown): reintroduce parity changes from reverted PR carbon-design-system#20863 * fix(multi-select): ensure input reflects aria-expanded state

fix: address review comment

113034d

fix(combobox): sync menu highlight with controlled selection (carbon-…

c9617f5

…design-system#21064)

grishma-shah7 force-pushed the pagination-accessibility branch from eea99ce to c9617f5 Compare November 24, 2025 09:07

Merge branch 'main' into pagination-accessibility

38a39a7

grishma-shah7 deployed to @carbon/react storybook preview November 24, 2025 09:34 — with GitHub Actions View deployment

heloiselui approved these changes Nov 24, 2025

View reviewed changes

heloiselui added the status: ready to merge 🎉 label Nov 24, 2025

heloiselui added this pull request to the merge queue Nov 24, 2025

Merged via the queue into carbon-design-system:main with commit b486103 Nov 24, 2025
41 of 43 checks passed

heloiselui mentioned this pull request Nov 27, 2025

fix: add arialabel for pagination and select elements #20043

Closed

6 tasks

grishma-shah7 deleted the pagination-accessibility branch December 12, 2025 14:29

	aria-label="${ifDefined(tooltipText) ?? ''}"
	aria-label="${ifDefined(tooltipText)}"

fix: added missing accessibility labels for pagination elements #21051

fix: added missing accessibility labels for pagination elements #21051

Uh oh!

Conversation

grishma-shah7 commented Nov 19, 2025

Changelog

Testing / Reviewing

PR Checklist

Uh oh!

github-actions bot commented Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

grishma-shah7 commented Nov 19, 2025

Uh oh!

netlify bot commented Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Uh oh!

netlify bot commented Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for carbon-elements ready!

Uh oh!

netlify bot commented Nov 19, 2025

✅ Deploy Preview for v11-carbon-react ready!

Uh oh!

netlify bot commented Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for v11-carbon-react ready!

Uh oh!

heloiselui commented Nov 21, 2025

Uh oh!

codecov bot commented Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

heloiselui Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

heloiselui Nov 21, 2025

Choose a reason for hiding this comment

Uh oh!

grishma-shah7 Nov 24, 2025

Choose a reason for hiding this comment

Uh oh!

2nikhiltom left a comment

Choose a reason for hiding this comment

Uh oh!

grishma-shah7 commented Nov 24, 2025

Uh oh!

grishma commented Nov 24, 2025 via email

Uh oh!

heloiselui left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

github-actions bot commented Nov 19, 2025 •

edited

Loading

netlify bot commented Nov 19, 2025 •

edited

Loading

netlify bot commented Nov 19, 2025 •

edited

Loading

netlify bot commented Nov 19, 2025 •

edited

Loading

codecov bot commented Nov 21, 2025 •

edited

Loading