Skip to content

Commit 19e73c0

Browse files
davidmenendezdavidmenendez
authored
fix: address accessibility for pagination and select (#21942)
* fix: address accessibility for pagination and select * fix: update select wc story * fix: tests * fix: resolve input and select query * fix: minor label margin style * fix: add label slot back into pagination * fix: tests * fix: added missing select ids and testing * fix: remove only from test * fix: add default id back in select * fix: react tests * fix: react tests * fix: docs
1 parent 9595886 commit 19e73c0

7 files changed

Lines changed: 90 additions & 39 deletions

File tree

‎packages/styles/scss/components/pagination/_pagination.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -206,11 +206,11 @@
206206

207207
span.#{$prefix}--pagination__text {
208208
color: $text-primary;
209-
margin-inline-start: $spacing-05;
210209
}
211210

212211
span.#{$prefix}--pagination__text.#{$prefix}--pagination__items-count {
213212
color: $text-secondary;
213+
margin-inline-start: $spacing-05;
214214
}
215215

216216
.#{$prefix}--pagination__button,

‎packages/web-components/src/components/fluid-select/fluid-select.stories.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ export const Default = {
105105
const {
106106
defaultWidth,
107107
disabled,
108+
id,
108109
invalid,
109110
invalidText,
110111
labelText,
@@ -116,6 +117,7 @@ export const Default = {
116117
return html`
117118
<div style="width:${defaultWidth}px;">
118119
<cds-fluid-select
120+
id="${id}"
119121
?disabled="${disabled}"
120122
?invalid="${invalid}"
121123
invalid-text="${ifDefined(invalidText)}"
@@ -177,6 +179,7 @@ export const WithAILabel = {
177179
render: (args) => {
178180
const {
179181
disabled,
182+
id,
180183
invalid,
181184
invalidText,
182185
labelText,
@@ -189,6 +192,7 @@ export const WithAILabel = {
189192

190193
return html` <div style="width:${defaultWidth}px;">
191194
<cds-fluid-select
195+
id="${id}"
192196
?disabled="${disabled}"
193197
?invalid="${invalid}"
194198
invalid-text="${ifDefined(invalidText)}"

‎packages/web-components/src/components/pagination/__tests__/pagination-test.js‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -148,10 +148,25 @@ describe('cds-pagination', () => {
148148
</cds-pagination>
149149
`);
150150

151-
const label = el.shadowRoot?.querySelector(`.cds--pagination__text`);
151+
const label = el.shadowRoot?.querySelector(
152+
'.cds--pagination__left div[slot="label-text"]'
153+
);
152154
expect(label?.textContent?.trim()).to.equal('éléments par page');
153155
});
154156

157+
it('should respect items-per-page-text attribute when not supplied', async () => {
158+
const el = await fixture(html`
159+
<cds-pagination total-items="20">
160+
<cds-select-item value="10">10</cds-select-item>
161+
</cds-pagination>
162+
`);
163+
164+
const label = el.shadowRoot?.querySelector(
165+
'.cds--pagination__left div[slot="label-text"]'
166+
);
167+
expect(label?.textContent?.trim()).to.be.empty;
168+
});
169+
155170
it('should disable page and pageSize selects with attributes', async () => {
156171
const el = await fixture(html`
157172
<cds-pagination
@@ -296,7 +311,7 @@ describe('cds-pagination', () => {
296311
await el.updateComplete;
297312

298313
const label = el.shadowRoot?.querySelector(
299-
'.cds--label.cds--visually-hidden'
314+
'.cds--pagination__right span[slot="label-text"]'
300315
);
301316
expect(label?.textContent?.trim()).to.equal('Page of 2 total');
302317
});

‎packages/web-components/src/components/pagination/pagination.ts‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -286,7 +286,7 @@ class CDSPagination extends FocusMixin(HostListenerMixin(LitElement)) {
286286
* The translatable text indicating the number of items per page.
287287
*/
288288
@property({ attribute: 'items-per-page-text' })
289-
itemsPerPageText = 'Items per page:';
289+
itemsPerPageText = '';
290290

291291
/**
292292
* `true` if the pagination UI should be disabled.
@@ -485,17 +485,22 @@ class CDSPagination extends FocusMixin(HostListenerMixin(LitElement)) {
485485

486486
return html`
487487
<div class="${prefix}--pagination__left">
488-
<label for="select" class="${prefix}--pagination__text"
489-
><slot name="label-text">${itemsPerPageText}</slot></label
490-
>
491488
<cds-select
492489
?disabled=${disabled || pageSizeInputDisabled}
493490
id="page-size-select"
494491
left-select
495492
pagination
496493
size="${size}"
497494
inline
498-
value="${pageSize}">
495+
value="${pageSize}"
496+
label-styles-disable>
497+
<div slot="label-text">
498+
${itemsPerPageText &&
499+
html`<span class="${prefix}--pagination__text"
500+
>${itemsPerPageText}</span
501+
>`}
502+
<slot name="label-text"></slot>
503+
</div>
499504
<slot @slotchange=${handleSlotChange}></slot>
500505
</cds-select>
501506
<span
@@ -504,15 +509,6 @@ class CDSPagination extends FocusMixin(HostListenerMixin(LitElement)) {
504509
>
505510
</div>
506511
<div class="${prefix}--pagination__right">
507-
${!pagesUnknown || totalItems
508-
? html`
509-
<label
510-
for="select"
511-
class="${prefix}--label ${prefix}--visually-hidden">
512-
${formatLabelText({ count: totalPages })}
513-
</label>
514-
`
515-
: null}
516512
${pagesUnknown || !totalItems
517513
? html`
518514
<span
@@ -527,7 +523,11 @@ class CDSPagination extends FocusMixin(HostListenerMixin(LitElement)) {
527523
pagination
528524
size="${size}"
529525
inline
530-
value="${page}">
526+
value="${page}"
527+
hide-label>
528+
<span slot="label-text">
529+
${formatLabelText({ count: totalPages })}
530+
</span>
531531
${Array.from(new Array(totalPagesSafe)).map(
532532
(_item, index) => html`
533533
<cds-select-item

‎packages/web-components/src/components/select/select.mdx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -55,23 +55,25 @@ import '@carbon/web-components/es/components/form/index.js';
5555
```html
5656
<cds-form-item>
5757
<cds-select
58+
id="id_for_label"
5859
helper-text="Optional helper text"
5960
label-text="Select"
6061
placeholder="Optional placeholder text">
61-
<cds-select-item-group label="Category 1">
62-
<cds-select-item value="all">Option 1</cds-select-item>
63-
<cds-select-item value="cloudFoundry">Option 2</cds-select-item>
64-
</cds-select-item-group>
65-
<cds-select-item-group label="Category 2">
66-
<cds-select-item value="staging">Option 3</cds-select-item>
67-
<cds-select-item value="dea">Option 4</cds-select-item>
68-
<cds-select-item value="router">Option 5</cds-select-item>
69-
</cds-select-item-group>
62+
<cds-select-item-group label="Category 1">
63+
<cds-select-item value="all">Option 1</cds-select-item>
64+
<cds-select-item value="cloudFoundry">Option 2</cds-select-item>
65+
</cds-select-item-group>
66+
<cds-select-item-group label="Category 2">
67+
<cds-select-item value="staging">Option 3</cds-select-item>
68+
<cds-select-item value="dea">Option 4</cds-select-item>
69+
<cds-select-item value="router">Option 5</cds-select-item>
70+
</cds-select-item-group>
7071
</cds-select>
7172
</cds-form-item>
7273
```
7374

7475
## `<cds-select>` attributes, properties and events
76+
7577
<Canvas of={SelectStories.Skeleton} />
7678

7779
## AI Label

‎packages/web-components/src/components/select/select.stories.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,11 @@ const args = {
6565
disabled: false,
6666
helperText: 'Optional helper text',
6767
hideLabel: false,
68+
id: 'select',
6869
inline: false,
6970
invalid: false,
7071
invalidText: 'Error message',
72+
labelStylesDisable: false,
7173
labelText: 'Select an option',
7274
placeholder: '',
7375
size: INPUT_SIZE.MEDIUM,
@@ -105,6 +107,10 @@ const argTypes = {
105107
control: 'boolean',
106108
description: 'Specify whether you want the inline version of this control.',
107109
},
110+
id: {
111+
control: 'text',
112+
description: 'Specify the id for the label.',
113+
},
108114
invalid: {
109115
control: 'boolean',
110116
description: 'Specify if the currently value is invalid.',
@@ -113,6 +119,10 @@ const argTypes = {
113119
control: 'text',
114120
description: 'Message which is displayed if the value is invalid.',
115121
},
122+
labelStylesDisable: {
123+
control: 'boolean',
124+
description: 'Specify if you want to disable the default label styling',
125+
},
116126
labelText: {
117127
control: 'text',
118128
description:
@@ -160,9 +170,11 @@ export const Default = {
160170
disabled,
161171
helperText,
162172
hideLabel,
173+
id,
163174
inline,
164175
invalid,
165176
invalidText,
177+
labelStylesDisable,
166178
labelText,
167179
name,
168180
placeholder,
@@ -177,12 +189,14 @@ export const Default = {
177189
return html`
178190
<cds-form-item>
179191
<cds-select
192+
id="${id}"
180193
?inline="${inline}"
181194
?disabled="${disabled}"
182195
helper-text="${ifDefined(helperText)}"
183196
?hide-label="${hideLabel}"
184197
?invalid="${invalid}"
185198
invalid-text="${ifDefined(invalidText)}"
199+
?label-styles-disable="${labelStylesDisable}"
186200
label-text="${ifDefined(labelText)}"
187201
name="${ifDefined(name)}"
188202
placeholder="${ifDefined(placeholder)}"
@@ -219,9 +233,11 @@ export const Inline = {
219233
disabled,
220234
helperText,
221235
hideLabel,
236+
id,
222237
inline,
223238
invalid,
224239
invalidText,
240+
labelStylesDisable,
225241
labelText,
226242
name,
227243
placeholder,
@@ -236,12 +252,14 @@ export const Inline = {
236252
return html`
237253
<cds-form-item>
238254
<cds-select
255+
id="${id}"
239256
?inline="${inline}"
240257
?disabled="${disabled}"
241258
helper-text="${ifDefined(helperText)}"
242259
?hide-label="${hideLabel}"
243260
?invalid="${invalid}"
244261
invalid-text="${ifDefined(invalidText)}"
262+
?label-styles-disable="${labelStylesDisable}"
245263
label-text="${ifDefined(labelText)}"
246264
name="${ifDefined(name)}"
247265
placeholder="${ifDefined(placeholder)}"
@@ -276,8 +294,10 @@ export const WithAILabel = {
276294
disabled,
277295
helperText,
278296
hideLabel,
297+
id,
279298
invalid,
280299
invalidText,
300+
labelStylesDisable,
281301
labelText,
282302
name,
283303
placeholder,
@@ -292,12 +312,14 @@ export const WithAILabel = {
292312

293313
return html` <div style="width: 400px">
294314
<cds-select
315+
id="${id}"
295316
?inline="${false}"
296317
?disabled="${disabled}"
297318
helper-text="${ifDefined(helperText)}"
298319
?hide-label="${hideLabel}"
299320
?invalid="${invalid}"
300321
invalid-text="${ifDefined(invalidText)}"
322+
?label-styles-disable="${labelStylesDisable}"
301323
label-text="${ifDefined(labelText)}"
302324
name="${ifDefined(name)}"
303325
placeholder="${ifDefined(placeholder)}"
@@ -334,8 +356,10 @@ export const WithLayer = {
334356
disabled,
335357
helperText,
336358
hideLabel,
359+
id,
337360
invalid,
338361
invalidText,
362+
labelStylesDisable,
339363
labelText,
340364
name,
341365
placeholder,
@@ -350,12 +374,14 @@ export const WithLayer = {
350374

351375
return html`
352376
<cds-select
377+
id="${id}"
353378
?inline="${false}"
354379
?disabled="${disabled}"
355380
helper-text="${ifDefined(helperText)}"
356381
?hide-label="${hideLabel}"
357382
?invalid="${invalid}"
358383
invalid-text="${ifDefined(invalidText)}"
384+
?label-styles-disable="${labelStylesDisable}"
359385
label-text="${ifDefined(labelText)}"
360386
name="${ifDefined(name)}"
361387
placeholder="${ifDefined(placeholder)}"

0 commit comments

Comments
 (0)