Skip to content

Commit

Permalink
fix: announce current page for pagination (#2419)
Browse files Browse the repository at this point in the history
fix: announce current page for pagination
  • Loading branch information
okadurin authored Nov 28, 2024
1 parent 104c494 commit eac4312
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .changeset/purple-paws-scream.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@lion/ui': patch
---

[lion-pagination] announce current page
1 change: 1 addition & 0 deletions packages/ui/components/pagination/src/LionPagination.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
16 changes: 16 additions & 0 deletions packages/ui/components/pagination/test/lion-pagination.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down

0 comments on commit eac4312

Please sign in to comment.