Skip to content

Commit 02e3265

Browse files
laske185laske185
authored
fix: adopt release pagination aria descriptions (#8598)
2 parents a148fed + c8513a2 commit 02e3265

File tree

4 files changed

+184
-18
lines changed

4 files changed

+184
-18
lines changed

‎packages/components/src/components/pagination/component.tsx‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const NUMBER_FORMATTER = new Intl.NumberFormat(userLanguage, {
6060
shadow: false,
6161
})
6262
export class KolPaginationWc implements PaginationAPI {
63-
@Element() private readonly host?: HTMLKolTextareaElement;
63+
@Element() private readonly host?: HTMLKolPaginationElement;
6464

6565
private readonly nonce = nonce();
6666
private readonly translatePageFirst = translate('kol-page-first');
@@ -322,34 +322,37 @@ export class KolPaginationWc implements PaginationAPI {
322322
};
323323

324324
private getUnselectedPageButton(page: number): JSX.Element {
325+
const pageText = NUMBER_FORMATTER.format(page);
326+
const ariaDescription = `${this.translatePage} ${pageText}`;
325327
return (
326328
<li key={nonce()}>
327329
<KolButtonWcTag
328-
exportparts="icon"
330+
_ariaDescription={ariaDescription}
329331
_customClass={this.state._customClass}
330-
_label=""
332+
_label={pageText}
331333
_on={{
332334
onClick: (event: Event) => {
333335
this.onClick(event, page);
334336
},
335337
}}
336-
>
337-
<span slot="expert">
338-
<span class="visually-hidden">{this.translatePage}</span> {NUMBER_FORMATTER.format(page)}
339-
</span>
340-
</KolButtonWcTag>
338+
></KolButtonWcTag>
341339
</li>
342340
);
343341
}
344342

345343
private getSelectedPageButton(page: number): JSX.Element {
344+
const pageText = NUMBER_FORMATTER.format(page);
345+
const ariaDescription = `${this.translatePage} ${pageText}`;
346346
return (
347347
<li key={nonce()}>
348-
<KolButtonWcTag class="kol-pagination__button kol-pagination__button--selected" _customClass={this.state._customClass} _disabled={true} _label="">
349-
<span slot="expert">
350-
<span class="visually-hidden">{this.translatePage}</span> {NUMBER_FORMATTER.format(page)}
351-
</span>
352-
</KolButtonWcTag>
348+
<KolButtonWcTag
349+
aria-current="page"
350+
class="kol-pagination__button kol-pagination__button--selected selected"
351+
_ariaDescription={ariaDescription}
352+
_customClass={this.state._customClass}
353+
_disabled={true}
354+
_label={pageText}
355+
></KolButtonWcTag>
353356
</li>
354357
);
355358
}

‎packages/components/src/components/pagination/pagination.e2e.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ test.describe('kol-pagination', () => {
2929
};
3030
});
3131
}, callbackName);
32-
await page.getByRole('button', { name: 'Seite 2' }).click();
32+
await page.getByRole('button', { name: '2' }).click();
3333

3434
await expect(callbackPromise).resolves.toBe(2);
3535
});
@@ -62,7 +62,7 @@ test.describe('kol-pagination', () => {
6262
});
6363
});
6464
}, eventName);
65-
await page.getByRole('button', { name: 'Seite 2' }).click();
65+
await page.getByRole('button', { name: '2' }).click();
6666

6767
await expect(eventPromise).resolves.toBe(2);
6868
});

‎packages/components/src/components/pagination/test/__snapshots__/snapshot.spec.tsx.snap‎

Lines changed: 144 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,157 @@
33
exports[`kol-pagination should render with _label="Label" _on={} _max=0 _page=4 _hasButtons=false _siblingCount=0 1`] = `
44
<kol-pagination>
55
<template shadowrootmode="open">
6-
<kol-pagination-wc _boundarycount="1" _label="Label" _max="0" _page="4" _pagesize="1" _siblingcount="0" _tooltipalign="top"></kol-pagination-wc>
6+
<kol-pagination-wc class="kol-pagination">
7+
<nav aria-label="Label" class="kol-pagination__navigation">
8+
<ul class="kol-pagination__navigation-list"></ul>
9+
</nav>
10+
</kol-pagination-wc>
711
</template>
812
</kol-pagination>
913
`;
1014

1115
exports[`kol-pagination should render with _label="Label" _on={} _max=2 _page=1 1`] = `
1216
<kol-pagination>
1317
<template shadowrootmode="open">
14-
<kol-pagination-wc _boundarycount="1" _hasbuttons="" _label="Label" _max="2" _page="1" _pagesize="1" _siblingcount="1" _tooltipalign="top"></kol-pagination-wc>
18+
<kol-pagination-wc class="kol-pagination">
19+
<nav aria-label="Label" class="kol-pagination__navigation">
20+
<ul class="kol-pagination__navigation-list">
21+
<li>
22+
<kol-button-wc _disabled="" _hidelabel="" _label="kol-page-first" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--first" exportparts="icon"></kol-button-wc>
23+
</li>
24+
<li>
25+
<kol-button-wc _disabled="" _hidelabel="" _label="kol-page-back" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--previous" exportparts="icon"></kol-button-wc>
26+
</li>
27+
<li>
28+
<kol-button-wc _ariadescription="kol-page 1" _disabled="" _label="1" aria-current="page" class="kol-pagination__button kol-pagination__button--selected selected"></kol-button-wc>
29+
</li>
30+
<li>
31+
<kol-button-wc _ariadescription="kol-page 2" _label="2"></kol-button-wc>
32+
</li>
33+
<li>
34+
<kol-button-wc _hidelabel="" _label="kol-page-next" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--next" exportparts="icon"></kol-button-wc>
35+
</li>
36+
<li>
37+
<kol-button-wc _hidelabel="" _label="kol-page-last" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--last" exportparts="icon"></kol-button-wc>
38+
</li>
39+
</ul>
40+
</nav>
41+
</kol-pagination-wc>
42+
</template>
43+
</kol-pagination>
44+
`;
45+
46+
exports[`kol-pagination should render with _label="Label" _on={} _max=10 _page=10 _boundaryCount=2 _siblingCount=2 1`] = `
47+
<kol-pagination>
48+
<template shadowrootmode="open">
49+
<kol-pagination-wc class="kol-pagination">
50+
<nav aria-label="Label" class="kol-pagination__navigation">
51+
<ul class="kol-pagination__navigation-list">
52+
<li>
53+
<kol-button-wc _hidelabel="" _label="kol-page-first" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--first" exportparts="icon"></kol-button-wc>
54+
</li>
55+
<li>
56+
<kol-button-wc _hidelabel="" _label="kol-page-back" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--previous" exportparts="icon"></kol-button-wc>
57+
</li>
58+
<li>
59+
<kol-button-wc _ariadescription="kol-page 1" _label="1"></kol-button-wc>
60+
</li>
61+
<li>
62+
<kol-button-wc _ariadescription="kol-page 2" _label="2"></kol-button-wc>
63+
</li>
64+
<li>
65+
<span aria-hidden="true" class="kol-pagination__separator"></span>
66+
</li>
67+
<li>
68+
<kol-button-wc _ariadescription="kol-page 8" _label="8"></kol-button-wc>
69+
</li>
70+
<li>
71+
<kol-button-wc _ariadescription="kol-page 9" _label="9"></kol-button-wc>
72+
</li>
73+
<li>
74+
<kol-button-wc _ariadescription="kol-page 10" _disabled="" _label="10" aria-current="page" class="kol-pagination__button kol-pagination__button--selected selected"></kol-button-wc>
75+
</li>
76+
<li>
77+
<kol-button-wc _disabled="" _hidelabel="" _label="kol-page-next" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--next" exportparts="icon"></kol-button-wc>
78+
</li>
79+
<li>
80+
<kol-button-wc _disabled="" _hidelabel="" _label="kol-page-last" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--last" exportparts="icon"></kol-button-wc>
81+
</li>
82+
</ul>
83+
</nav>
84+
</kol-pagination-wc>
85+
</template>
86+
</kol-pagination>
87+
`;
88+
89+
exports[`kol-pagination should render with _label="Label" _on={} _max=12 _page=6 _hasButtons={"first":false,"last":false,"next":true,"previous":true} _boundaryCount=0 _siblingCount=1 1`] = `
90+
<kol-pagination>
91+
<template shadowrootmode="open">
92+
<kol-pagination-wc class="kol-pagination">
93+
<nav aria-label="Label" class="kol-pagination__navigation">
94+
<ul class="kol-pagination__navigation-list">
95+
<li>
96+
<kol-button-wc _hidelabel="" _label="kol-page-back" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--previous" exportparts="icon"></kol-button-wc>
97+
</li>
98+
<li>
99+
<kol-button-wc _ariadescription="kol-page 5" _label="5"></kol-button-wc>
100+
</li>
101+
<li>
102+
<kol-button-wc _ariadescription="kol-page 6" _disabled="" _label="6" aria-current="page" class="kol-pagination__button kol-pagination__button--selected selected"></kol-button-wc>
103+
</li>
104+
<li>
105+
<kol-button-wc _ariadescription="kol-page 7" _label="7"></kol-button-wc>
106+
</li>
107+
<li>
108+
<span aria-hidden="true" class="kol-pagination__separator"></span>
109+
</li>
110+
<li>
111+
<kol-button-wc _hidelabel="" _label="kol-page-next" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--next" exportparts="icon"></kol-button-wc>
112+
</li>
113+
</ul>
114+
</nav>
115+
</kol-pagination-wc>
116+
</template>
117+
</kol-pagination>
118+
`;
119+
120+
exports[`kol-pagination should render with _label="Label" _on={} _max=25 _page=3 _pageSizeOptions=[5,10,20] _pageSize=5 _siblingCount=3 1`] = `
121+
<kol-pagination>
122+
<template shadowrootmode="open">
123+
<kol-pagination-wc class="kol-pagination">
124+
<nav aria-label="Label" class="kol-pagination__navigation">
125+
<ul class="kol-pagination__navigation-list">
126+
<li>
127+
<kol-button-wc _hidelabel="" _label="kol-page-first" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--first" exportparts="icon"></kol-button-wc>
128+
</li>
129+
<li>
130+
<kol-button-wc _hidelabel="" _label="kol-page-back" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--previous" exportparts="icon"></kol-button-wc>
131+
</li>
132+
<li>
133+
<kol-button-wc _ariadescription="kol-page 1" _label="1"></kol-button-wc>
134+
</li>
135+
<li>
136+
<kol-button-wc _ariadescription="kol-page 2" _label="2"></kol-button-wc>
137+
</li>
138+
<li>
139+
<kol-button-wc _ariadescription="kol-page 3" _disabled="" _label="3" aria-current="page" class="kol-pagination__button kol-pagination__button--selected selected"></kol-button-wc>
140+
</li>
141+
<li>
142+
<kol-button-wc _ariadescription="kol-page 4" _label="4"></kol-button-wc>
143+
</li>
144+
<li>
145+
<kol-button-wc _ariadescription="kol-page 5" _label="5"></kol-button-wc>
146+
</li>
147+
<li>
148+
<kol-button-wc _hidelabel="" _label="kol-page-next" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--next" exportparts="icon"></kol-button-wc>
149+
</li>
150+
<li>
151+
<kol-button-wc _hidelabel="" _label="kol-page-last" _tooltipalign="top" class="kol-pagination__button kol-pagination__button--last" exportparts="icon"></kol-button-wc>
152+
</li>
153+
</ul>
154+
</nav>
155+
<kol-select _hidelabel="" _id="pagination-size-nonce" _label="kol-entries-per-site" _value="5" class="kol-pagination__page-size-select"></kol-select>
156+
</kol-pagination-wc>
15157
</template>
16158
</kol-pagination>
17159
`;

‎packages/components/src/components/pagination/test/snapshot.spec.tsx‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,34 @@ import { KolPaginationTag } from '../../../core/component-names';
22
import type { PaginationProps } from '../../../schema';
33
import { executeSnapshotTests } from '../../../utils/testing';
44

5+
import KolCollapsibleFc from '../../../functional-components/Collapsible';
56
import { KolPagination } from '../shadow';
7+
import { KolPaginationWc } from '../component';
68

79
executeSnapshotTests<PaginationProps>(
810
KolPaginationTag,
9-
[KolPagination],
11+
[KolPagination, KolPaginationWc, KolCollapsibleFc],
1012
[
1113
{ _label: 'Label', _on: {}, _max: 2, _page: 1 },
1214
{ _label: 'Label', _on: {}, _max: 0, _page: 4, _hasButtons: false, _siblingCount: 0 },
15+
{ _label: 'Label', _on: {}, _max: 10, _page: 10, _boundaryCount: 2, _siblingCount: 2 },
16+
{
17+
_label: 'Label',
18+
_on: {},
19+
_max: 12,
20+
_page: 6,
21+
_hasButtons: { first: false, last: false, next: true, previous: true },
22+
_boundaryCount: 0,
23+
_siblingCount: 1,
24+
},
25+
{
26+
_label: 'Label',
27+
_on: {},
28+
_max: 25,
29+
_page: 3,
30+
_pageSizeOptions: [5, 10, 20],
31+
_pageSize: 5,
32+
_siblingCount: 3,
33+
},
1334
],
1435
);

0 commit comments

Comments
 (0)
⚡