ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: announce current page for pagination (#2419)

Browse source 
fix: announce current page for pagination
This commit is contained in:
Oleksii Kadurin 2024-11-28 09:40:43 +01:00 committed by GitHub
parent 104c49449e
commit eac4312030
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 22 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/purple-paws-scream.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
[lion-pagination] announce current page

1
packages/ui/components/pagination/src/LionPagination.js
View file

@ -287,6 +287,7 @@ export class LionPagination extends LocalizeMixin(LitElement) {
<button
aria-label="${this.msgLit('lion-pagination:page', { page })}"
aria-current=${page === this.current}
aria-live="${page === this.current ? 'polite' : 'off'}"
@click=${() => this.__fire(page)}
>
${page}

16
packages/ui/components/pagination/test/lion-pagination.test.js
View file

@ -105,6 +105,22 @@ describe('Pagination', () => {
expect(el.current).to.equal(2);
});
it('should announce next and previous page using `next()` and `previous()`', async () => {
const el = await fixture(html` <lion-pagination count="6" current="2"></lion-pagination> `);
const buttons = Array.from(
/** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('button'),
);
expect(buttons[2].getAttribute('aria-live')).to.equal('polite');
el.next();
await el.updateComplete;
expect(buttons[3].getAttribute('aria-live')).to.equal('polite');
expect(buttons[2].getAttribute('aria-live')).to.equal('off');
el.previous();
await el.updateComplete;
expect(buttons[3].getAttribute('aria-live')).to.equal('off');
expect(buttons[2].getAttribute('aria-live')).to.equal('polite');
});
it('should goto next and previous page using `next()` and `previous()`', async () => {
const el = await fixture(html` <lion-pagination count="6" current="2"></lion-pagination> `);
el.next();