diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index 9eecd0d2c62..0e4741f4acd 100644 --- a/core/src/components/button/button.tsx +++ b/core/src/components/button/button.tsx @@ -170,6 +170,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf */ @Watch('aria-checked') @Watch('aria-label') + @Watch('aria-pressed') onAriaChanged(newValue: string, _oldValue: string, propName: string) { this.inheritedAttributes = { ...this.inheritedAttributes, diff --git a/core/src/components/input-password-toggle/input-password-toggle.tsx b/core/src/components/input-password-toggle/input-password-toggle.tsx index 90b743b41e7..65ad20ffbaf 100644 --- a/core/src/components/input-password-toggle/input-password-toggle.tsx +++ b/core/src/components/input-password-toggle/input-password-toggle.tsx @@ -126,9 +126,8 @@ export class InputPasswordToggle implements ComponentInterface { color={color} fill="clear" shape="round" - aria-checked={isPasswordVisible ? 'true' : 'false'} aria-label={isPasswordVisible ? 'Hide password' : 'Show password'} - role="switch" + aria-pressed={isPasswordVisible ? 'true' : 'false'} type="button" onPointerDown={(ev) => { /** diff --git a/core/src/components/input-password-toggle/test/a11y/input-password-toggle.e2e.ts b/core/src/components/input-password-toggle/test/a11y/input-password-toggle.e2e.ts index 0493509dc24..da9846ef9d8 100644 --- a/core/src/components/input-password-toggle/test/a11y/input-password-toggle.e2e.ts +++ b/core/src/components/input-password-toggle/test/a11y/input-password-toggle.e2e.ts @@ -22,7 +22,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => { }); test.describe(title('input password toggle: aria attributes'), () => { - test('should inherit aria attributes to inner button on load', async ({ page }) => { + test('should have correct aria attributes on load', async ({ page }) => { await page.setContent( ` @@ -35,9 +35,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => { const nativeButton = page.locator('ion-input-password-toggle button'); await expect(nativeButton).toHaveAttribute('aria-label', 'Show password'); - await expect(nativeButton).toHaveAttribute('aria-checked', 'false'); + await expect(nativeButton).toHaveAttribute('aria-pressed', 'false'); }); - test('should inherit aria attributes to inner button after toggle', async ({ page }) => { + test('should update aria attributes after toggle', async ({ page }) => { await page.setContent( ` @@ -51,7 +51,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => { await nativeButton.click(); await expect(nativeButton).toHaveAttribute('aria-label', 'Hide password'); - await expect(nativeButton).toHaveAttribute('aria-checked', 'true'); + await expect(nativeButton).toHaveAttribute('aria-pressed', 'true'); }); }); });