Skip to content

fix: add arialabel for pagination and select elements #20043

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
r1shabhsharma wants to merge 9 commits into from
Closed

fix: add arialabel for pagination and select elements #20043

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7e63b4e
fix: add arialabel for pagination and select elements
r1shabhsharma Jul 30, 2025
7134e80
fix: update contribution
r1shabhsharma Jul 30, 2025
1231c9a
fix: update contribution
r1shabhsharma Jul 30, 2025
e246d45
fix: review comments
r1shabhsharma Sep 10, 2025
0a4025b
Merge remote-tracking branch 'upstream/main' into issue-20042
r1shabhsharma Sep 10, 2025
f225b72
fix: unit tests
r1shabhsharma Sep 10, 2025
bc0ecc7
Merge remote-tracking branch 'upstream/main' into issue-20042
RishabhSharma6 Sep 11, 2025
3cafb07
Merge branch 'main' into issue-20042
heloiselui Sep 12, 2025
ae0e1b2
Merge branch 'main' into issue-20042
r1shabhsharma Sep 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions .all-contributorsrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1517,6 +1517,16 @@
"contributions": [
"code"
]
},
{
"login": "r1shabhsharma",
"name": "Rishabh Sharma",
"avatar_url": "https://avatars.githubusercontent.com/u/56930207?v=4",
"profile": "https://github.com/r1shabhsharma",
"contributions": [
"code",
"a11y"
]
}
],
"commitConvention": "none"
Expand Down
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -369,6 +369,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
<td align="center"><a href="https://github.com/anjju"><img src="https://avatars.githubusercontent.com/u/20580246?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Anju Shivan</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=anjju" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/seanhaug"><img src="https://avatars.githubusercontent.com/u/227620549?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sean Haughey</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=seanhaug" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/Vignesh-Loganathan-IBM-1"><img src="https://avatars.githubusercontent.com/u/196759586?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Vignesh-Loganathan-IBM-1</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Vignesh-Loganathan-IBM-1" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/r1shabhsharma"><img src="https://avatars.githubusercontent.com/u/56930207?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Rishabh Sharma</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=r1shabhsharma" title="Code">💻</a> <a href="#a11y-r1shabhsharma" title="Accessibility">️️️️♿️</a></td>
</tr>
</table>

Expand Down
34 changes: 34 additions & 0 deletions packages/web-components/src/components/button/__tests__/__snapshots__/button-test.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ snapshots[
snapshots['cds-button should support a custom tabIndex through props'] =
`<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--lg cds--btn--primary cds--layout--size-lg"
id="button"
part="button"
Expand All @@ -50,6 +51,7 @@ snapshots[
'cds-button should support a custom className on the outermost element'
] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--lg cds--btn--primary cds--layout--size-lg"
id="button"
part="button"
Expand All @@ -71,6 +73,7 @@ snapshots[

snapshots['cds-button should render an element with the button role'] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--lg cds--btn--primary cds--layout--size-lg"
id="button"
part="button"
Expand All @@ -94,6 +97,7 @@ snapshots[
'cds-button should use the disabled prop to set disabled on the <button>'
] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--disabled cds--btn--lg cds--btn--primary cds--layout--size-lg"
disabled=""
id="button"
Expand All @@ -117,6 +121,7 @@ snapshots[
snapshots['cds-button should render with a default button type of button'] =
`<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--lg cds--btn--primary cds--layout--size-lg"
id="button"
part="button"
Expand All @@ -140,6 +145,7 @@ snapshots[
'cds-button should support changing the button type to button with the `type` prop'
] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--lg cds--btn--primary cds--layout--size-lg"
id="button"
part="button"
Expand All @@ -163,6 +169,7 @@ snapshots[
'cds-button should support changing the button type to submit with the `type` prop'
] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--lg cds--btn--primary cds--layout--size-lg"
id="button"
part="button"
Expand All @@ -186,6 +193,7 @@ snapshots[
'cds-button should support changing the button type to reset with the `type` prop'
] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--lg cds--btn--primary cds--layout--size-lg"
id="button"
part="button"
Expand All @@ -209,6 +217,7 @@ snapshots[
'cds-button should render as an element with the role of `link` when the `href` prop is used'
] = `<a
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--lg cds--btn--primary cds--layout--size-lg"
href="/"
id="button"
Expand All @@ -234,6 +243,7 @@ snapshots[
'cds-button should not error on tooltipAlignment even when hasIconOnly=false'
] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--lg cds--btn--primary cds--layout--size-lg"
id="button"
part="button"
Expand All @@ -257,6 +267,7 @@ snapshots[
'cds-button should set the expected classes for the button of kind: primary'
] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--lg cds--btn--primary cds--layout--size-lg"
id="button"
part="button"
Expand All @@ -280,6 +291,7 @@ snapshots[
'cds-button should set the expected classes for the button of kind: secondary'
] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--lg cds--btn--secondary cds--layout--size-lg"
id="button"
part="button"
Expand All @@ -303,6 +315,7 @@ snapshots[
'cds-button should set the expected classes for the button of kind: ghost'
] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--ghost cds--btn--lg cds--layout--size-lg"
id="button"
part="button"
Expand All @@ -326,6 +339,7 @@ snapshots[
'cds-button should set the expected classes for the button of kind: danger'
] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--danger cds--btn--lg cds--layout--size-lg"
id="button"
part="button"
Expand All @@ -351,6 +365,7 @@ snapshots[
'cds-button should set the expected classes for the button of kind: danger--primary'
] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--danger--primary cds--btn--lg cds--layout--size-lg"
id="button"
part="button"
Expand All @@ -376,6 +391,7 @@ snapshots[
'cds-button should set the expected classes for the button of kind: danger--ghost'
] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--lg cds--layout--size-lg"
id="button"
part="button"
Expand All @@ -401,6 +417,7 @@ snapshots[
'cds-button should set the expected classes for the button of kind: danger--tertiary'
] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--lg cds--layout--size-lg"
id="button"
part="button"
Expand All @@ -426,6 +443,7 @@ snapshots[
'cds-button should set the expected classes for the button of kind: tertiary'
] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--lg cds--btn--tertiary cds--layout--size-lg"
id="button"
part="button"
Expand All @@ -449,6 +467,7 @@ snapshots[
'cds-button should set the expected classes for the button of size: sm'
] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-sm"
id="button"
part="button"
Expand All @@ -472,6 +491,7 @@ snapshots[
'cds-button should set the expected classes for the button of size: md'
] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--md cds--btn--primary cds--layout--size-md"
id="button"
part="button"
Expand All @@ -495,6 +515,7 @@ snapshots[
'cds-button should set the expected classes for the button of size: lg'
] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--lg cds--btn--primary cds--layout--size-lg"
id="button"
part="button"
Expand All @@ -518,6 +539,7 @@ snapshots[
'cds-button should set the expected classes for the button of size: xl'
] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--primary cds--btn--xl cds--layout--size-xl"
id="button"
part="button"
Expand All @@ -541,6 +563,7 @@ snapshots[
'cds-button should set the expected classes for the button of size: 2xl'
] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--2xl cds--btn--primary cds--layout--size-2xl"
id="button"
part="button"
Expand All @@ -564,6 +587,7 @@ snapshots[
'cds-button Button with Icon variant should render the given icon within the <button> element'
] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--lg cds--btn--primary cds--layout--size-lg cds-ce--btn--has-icon"
id="button"
part="button"
Expand All @@ -586,6 +610,7 @@ snapshots[
snapshots['cds-button Icon Button variant should set the icon-only class'] =
`<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--icon-only cds--btn--lg cds--btn--primary cds--layout--size-lg cds-ce--btn--has-icon"
id="button"
part="button"
Expand All @@ -608,6 +633,7 @@ snapshots['cds-button Icon Button variant should set the icon-only class'] =
snapshots['cds-button Icon Button variant should support badge indicator'] =
`<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--ghost cds--btn--icon-only cds--btn--lg cds--layout--size-lg cds-ce--btn--has-icon"
id="button"
part="button"
Expand All @@ -631,6 +657,7 @@ snapshots[
'cds-button Icon Button variant should support badge indicator and truncate'
] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--ghost cds--btn--icon-only cds--btn--lg cds--layout--size-lg cds-ce--btn--has-icon"
id="button"
part="button"
Expand All @@ -654,6 +681,7 @@ snapshots[
'cds-button should set the expected classes for the button of size: `sm`'
] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-sm"
id="button"
part="button"
Expand All @@ -677,6 +705,7 @@ snapshots[
'cds-button should set the expected classes for the button of size: `md`'
] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--md cds--btn--primary cds--layout--size-md"
id="button"
part="button"
Expand Down Expand Up @@ -767,6 +796,7 @@ snapshots[

snapshots['cds-button supports props.size size="sm"'] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--primary cds--btn--sm cds--layout--size-sm"
id="button"
part="button"
Expand All @@ -788,6 +818,7 @@ snapshots['cds-button supports props.size size="sm"'] = `<button

snapshots['cds-button supports props.size size="md"'] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--md cds--btn--primary cds--layout--size-md"
id="button"
part="button"
Expand All @@ -809,6 +840,7 @@ snapshots['cds-button supports props.size size="md"'] = `<button

snapshots['cds-button supports props.size size="lg"'] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--lg cds--btn--primary cds--layout--size-lg"
id="button"
part="button"
Expand All @@ -830,6 +862,7 @@ snapshots['cds-button supports props.size size="lg"'] = `<button

snapshots['cds-button supports props.size size="xl"'] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--primary cds--btn--xl cds--layout--size-xl"
id="button"
part="button"
Expand All @@ -851,6 +884,7 @@ snapshots['cds-button supports props.size size="xl"'] = `<button

snapshots['cds-button supports props.size size="2xl"'] = `<button
aria-describedby="badge-indicator"
aria-label=""
class="cds--btn cds--btn--2xl cds--btn--primary cds--layout--size-2xl"
id="button"
part="button"
Expand Down
8 changes: 8 additions & 0 deletions packages/web-components/src/components/button/button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,12 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
this.openTooltip = false;
};

/**
* Specify text for the accessibility label of the button
*/
@property({ attribute: 'aria-label' })
ariaLabel = '';
Copy link
Member

@tay1orjones tay1orjones Sep 23, 2025

Choose a reason for hiding this comment

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

This should be undefined by default I think, rather than an empty string. This is why it's being included in the snapshot when I don't think it should be.

Suggested change
ariaLabel = '';
ariaLabel!: string;


/**
* `true` if the button should have input focus when the page loads.
*/
Expand Down Expand Up @@ -268,6 +274,7 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {

render() {
const {
ariaLabel,
autofocus,
buttonClassName,
dangerDescription,
Expand Down Expand Up @@ -404,6 +411,7 @@ class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
?disabled="${disabled}"
tabindex="${tabIndex}"
type="${ifDefined(type)}"
aria-label="${ifDefined(ariaLabel)}"
aria-describedby="badge-indicator">
${isDanger
? html`<span class="${prefix}--visually-hidden"
Expand Down
2 changes: 2 additions & 0 deletions packages/web-components/src/components/pagination/pagination.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -482,6 +482,7 @@ class CDSPagination extends FocusMixin(HostListenerMixin(LitElement)) {
?disabled="${prevButtonDisabled}"
button-class-name="${prevButtonClasses}"
tooltip-text="${backwardText}"
aria-label="${backwardText}"
@click="${handleClickPrevButton}">
${iconLoader(CaretLeft16, { slot: 'icon' })}
</cds-button>
Expand All @@ -492,6 +493,7 @@ class CDSPagination extends FocusMixin(HostListenerMixin(LitElement)) {
?disabled="${nextButtonDisabled}"
button-class-name="${nextButtonClasses}"
tooltip-text="${forwardText}"
aria-label="${forwardText}"
@click="${handleClickNextButton}">
${iconLoader(CaretRight16, { slot: 'icon' })}
</cds-button>
Expand Down
8 changes: 8 additions & 0 deletions packages/web-components/src/components/select/select.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,12 @@ class CDSSelect extends FormMixin(LitElement) {
@property({ type: Boolean, reflect: true })
disabled = false;

/**
* Specify text for the accessibility label of the 'select' element
*/
@property({ attribute: 'aria-label' })
ariaLabel = 'Select option';

/**
* The helper text.
*/
Expand Down Expand Up @@ -395,6 +401,7 @@ class CDSSelect extends FormMixin(LitElement) {

render() {
const {
ariaLabel,
disabled,
helperText,
hideLabel,
Expand Down Expand Up @@ -450,6 +457,7 @@ class CDSSelect extends FormMixin(LitElement) {
?disabled="${disabled}"
aria-readonly="${String(Boolean(readonly))}"
aria-invalid="${String(Boolean(invalid))}"
aria-label=${ifDefined(ariaLabel)}
Copy link
Member

@tay1orjones tay1orjones Sep 23, 2025

Choose a reason for hiding this comment

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

I think the way to fix this isn't through an aria-label, but refactoring the hideLabel logic down on L498.

In the react version, Select always has a label. hideLabel toggles a class to visibly hide the label, not completely omit it from the dom like the web components one does here. I think this would fix most/all situations where you'd reach for an aria-label and would make it more accessible out of the box.

aria-describedby="${ifDefined(!invalid ? undefined : 'invalid-text')}"
@input="${handleInput}">
${!placeholder || value
Expand Down
Loading