fix(input-otp): inherit aria attributes and hide empty input boxes from screen readers

Author: brandyscarney

core/src/components/input-otp/input-otp.tsx

@@ -1,5 +1,7 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Fragment, Host, Prop, State, h, Watch } from '@stencil/core';
+import type { Attributes } from '@utils/helpers';
+import { inheritAriaAttributes } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
 import { isRTL } from '@utils/rtl';
 import { createColorClasses } from '@utils/theme';
@@ -23,6 +25,7 @@ import type {
   scoped: true,
 })
 export class InputOTP implements ComponentInterface {
+  private inheritedAttributes: Attributes = {};
   private inputRefs: HTMLInputElement[] = [];
   private inputId = `ion-input-otp-${inputIds++}`;
   private parsedSeparators: number[] = [];
@@ -242,10 +245,15 @@ export class InputOTP implements ComponentInterface {
   }
 
   componentWillLoad() {
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
     this.processSeparators();
     this.initializeValues();
   }
 
+  componentDidLoad() {
+    this.updateTabIndexes();
+  }
+
   /**
    * Initializes the input values array based on the current value prop.
    * This splits the value into individual characters and validates them against
@@ -352,6 +360,7 @@ export class InputOTP implements ComponentInterface {
     if (newValue.length === length) {
       this.ionComplete.emit({ value: newValue });
     }
+    this.updateTabIndexes();
   }
 
   /**
@@ -675,13 +684,16 @@ export class InputOTP implements ComponentInterface {
       }
     }
 
-    // Update tabIndex for all inputs
+    // Update tabIndex and aria-hidden for all inputs
     inputRefs.forEach((input, index) => {
-      // If all boxes are filled, make the last box tabbable
-      // Otherwise, make the first empty box tabbable
       const shouldBeTabbable = firstEmptyIndex === -1 ? index === length - 1 : firstEmptyIndex === index;
 
       input.tabIndex = shouldBeTabbable ? 0 : -1;
+
+      // If the input is empty and not the first empty input,
+      // it should be hidden from screen readers.
+      const isEmpty = !inputValues[index] || inputValues[index] === '';
+      input.setAttribute('aria-hidden', isEmpty && !shouldBeTabbable ? 'true' : 'false');
     });
   }
 
@@ -716,6 +728,7 @@ export class InputOTP implements ComponentInterface {
       disabled,
       fill,
       hasFocus,
+      inheritedAttributes,
       inputId,
       inputRefs,
       inputValues,
@@ -741,7 +754,7 @@ export class InputOTP implements ComponentInterface {
           'input-otp-readonly': readonly,
         })}
       >
-        <div role="group" aria-label="One-time password input" class="input-otp-group">
+        <div role="group" aria-label="One-time password input" class="input-otp-group" {...inheritedAttributes}>
           {Array.from({ length }).map((_, index) => (
             <>
               <div class="native-wrapper">

core/src/components/input-otp/test/a11y/input-otp.e2e.ts

@@ -0,0 +1,88 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * Functionality is the same across modes
+ */
+configs().forEach(({ title, config }) => {
+  test.describe(title('input-otp: a11y'), () => {
+    test('should not have accessibility violations', async ({ page }) => {
+      await page.setContent(
+        `
+        <main>
+          <ion-input-otp></ion-input-otp>
+        </main>
+      `,
+        config
+      );
+
+      const results = await new AxeBuilder({ page }).analyze();
+      expect(results.violations).toEqual([]);
+    });
+
+    test('should render with correct aria attributes on initial load', async ({ page }) => {
+      await page.setContent(`<ion-input-otp></ion-input-otp>`, config);
+
+      const inputOtpGroup = page.locator('ion-input-otp .input-otp-group');
+      await expect(inputOtpGroup).toHaveAttribute('aria-label', 'One-time password input');
+
+      const inputBoxes = page.locator('ion-input-otp input');
+
+      await expect(inputBoxes.nth(0)).toHaveAttribute('aria-hidden', 'false');
+      await expect(inputBoxes.nth(1)).toHaveAttribute('aria-hidden', 'true');
+      await expect(inputBoxes.nth(2)).toHaveAttribute('aria-hidden', 'true');
+      await expect(inputBoxes.nth(3)).toHaveAttribute('aria-hidden', 'true');
+    });
+
+    test('should update aria-hidden when value is set', async ({ page }) => {
+      await page.setContent(`<ion-input-otp value="12"></ion-input-otp>`, config);
+
+      const inputBoxes = page.locator('ion-input-otp input');
+
+      await expect(inputBoxes.nth(0)).toHaveAttribute('aria-hidden', 'false');
+      await expect(inputBoxes.nth(1)).toHaveAttribute('aria-hidden', 'false');
+      await expect(inputBoxes.nth(2)).toHaveAttribute('aria-hidden', 'false');
+      await expect(inputBoxes.nth(3)).toHaveAttribute('aria-hidden', 'true');
+    });
+
+    test('should update aria-hidden when typing a value', async ({ page }) => {
+      await page.setContent(`<ion-input-otp></ion-input-otp>`, config);
+
+      const inputBoxes = page.locator('ion-input-otp input');
+
+      const firstInput = page.locator('ion-input-otp input').first();
+      await firstInput.focus();
+
+      await page.keyboard.type('123');
+
+      await expect(inputBoxes.nth(0)).toHaveAttribute('aria-hidden', 'false');
+      await expect(inputBoxes.nth(1)).toHaveAttribute('aria-hidden', 'false');
+      await expect(inputBoxes.nth(2)).toHaveAttribute('aria-hidden', 'false');
+      await expect(inputBoxes.nth(3)).toHaveAttribute('aria-hidden', 'false');
+    });
+
+    test('should update aria-hidden when value is cleared using backspace', async ({ page }) => {
+      await page.setContent(`<ion-input-otp value="12"></ion-input-otp>`, config);
+
+      const inputBoxes = page.locator('ion-input-otp input');
+
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Backspace');
+      await page.keyboard.press('Backspace');
+
+      await expect(inputBoxes.nth(0)).toHaveAttribute('aria-hidden', 'false');
+      await expect(inputBoxes.nth(1)).toHaveAttribute('aria-hidden', 'true');
+      await expect(inputBoxes.nth(2)).toHaveAttribute('aria-hidden', 'true');
+      await expect(inputBoxes.nth(3)).toHaveAttribute('aria-hidden', 'true');
+    });
+
+    test('should update aria-label and aria-labelledby when set on host', async ({ page }) => {
+      await page.setContent(`<ion-input-otp aria-label="Custom label" aria-labelledby="my-label"></ion-input-otp>`, config);
+
+      const inputOtpGroup = page.locator('ion-input-otp .input-otp-group');
+      await expect(inputOtpGroup).toHaveAttribute('aria-label', 'Custom label');
+      await expect(inputOtpGroup).toHaveAttribute('aria-labelledby', 'my-label');
+    });
+  });
+});

core/src/components/input-otp/test/basic/input-otp.e2e.ts

@@ -262,7 +262,10 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
     });
 
     test('should accept only Cyrillic characters when pattern is set', async ({ page }) => {
-      await page.setContent(`<ion-input-otp type="text" pattern="[\\p{Script=Cyrillic}]">Description</ion-input-otp>`, config);
+      await page.setContent(
+        `<ion-input-otp type="text" pattern="[\\p{Script=Cyrillic}]">Description</ion-input-otp>`,
+        config
+      );
 
       const inputOtp = page.locator('ion-input-otp');
       const firstInput = page.locator('ion-input-otp input').first();