diff --git a/packages/core/src/components/pagination/pagination.tsx b/packages/core/src/components/pagination/pagination.tsx index ef148e923b0..a067f0daa9e 100644 --- a/packages/core/src/components/pagination/pagination.tsx +++ b/packages/core/src/components/pagination/pagination.tsx @@ -17,7 +17,6 @@ import { Prop, } from '@stencil/core'; import { BaseButton, BaseButtonProps } from '../button/base-button'; -import { a11yBoolean } from '../utils/a11y'; import { iconChevronLeftSmall, iconChevronRightSmall, @@ -166,7 +165,10 @@ export class Pagination { onClick: () => this.selectPage(index), selected: this.selectedPage === index, ariaAttributes: { - 'aria-pressed': a11yBoolean(this.selectedPage === index), + 'aria-label': `Go to ${this.i18nPage} ${index + 1}`, + ...(this.selectedPage === index + ? { 'aria-current': 'page', 'aria-selected': 'true' } + : {}), }, }; @@ -198,7 +200,14 @@ export class Pagination { }, }; pageButtons.push(this.getPageButton(0)); - pageButtons.push(...); + pageButtons.push( + + ... + + ); if (hasOverflowEnd) { start = this.count - this.maxCountPages + 2; @@ -232,7 +241,14 @@ export class Pagination { } }, }; - pageButtons.push(...); + pageButtons.push( + + ... + + ); pageButtons.push(this.getPageButton(this.count - 1)); } @@ -249,9 +265,10 @@ export class Pagination { render() { return ( - + this.decrease()} @@ -298,6 +315,9 @@ export class Pagination { this.increase()} diff --git a/packages/core/src/components/pagination/test/pagination.ct.ts b/packages/core/src/components/pagination/test/pagination.ct.ts index 16f476f4c62..c796c848355 100644 --- a/packages/core/src/components/pagination/test/pagination.ct.ts +++ b/packages/core/src/components/pagination/test/pagination.ct.ts @@ -99,8 +99,8 @@ regressionTest('should not change page', async ({ mount, page }) => { const buttons = pagination.locator('button'); await buttons.nth(1).click(); - await expect(buttons.first()).toHaveAttribute('aria-pressed', 'true'); - await expect(buttons.nth(1)).toHaveAttribute('aria-pressed', 'false'); + await expect(buttons.first()).toHaveAttribute('aria-selected', 'true'); + await expect(buttons.nth(1)).not.toHaveAttribute('aria-selected', ''); }); regressionTest('should handle valid page input', async ({ mount, page }) => {