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 }) => {