fix(input-password-toggle): improve screen reader announcements

Author: ShaneK

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,

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) => {
             /**

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(
         `
         <ion-input label="input" type="password">
@@ -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(
         `
         <ion-input label="input" type="password">
@@ -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');
     });
   });
 });