fix(input): making validation reading work more consistently across browsers

Author: ShaneK

core/src/components/input/input.tsx

@@ -421,7 +421,7 @@ export class Input implements ComponentInterface {
     );
 
     // Watch for class changes to update validation state
-    if (Build.isBrowser) {
+    if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
       this.validationObserver = new MutationObserver(() => {
         const newIsInvalid = this.checkValidationState();
         if (this.isInvalid !== newIsInvalid) {
@@ -433,11 +433,11 @@ export class Input implements ComponentInterface {
         attributes: true,
         attributeFilter: ['class'],
       });
-
-      // Set initial state
-      this.isInvalid = this.checkValidationState();
     }
 
+    // Always set initial state
+    this.isInvalid = this.checkValidationState();
+
     this.debounceChanged();
     if (Build.isBrowser) {
       document.dispatchEvent(
@@ -664,20 +664,14 @@ export class Input implements ComponentInterface {
    * Renders the helper text or error text values
    */
   private renderHintText() {
-    const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
+    const { helperText, errorText, helperTextId, errorTextId } = this;
 
     return [
       <div id={helperTextId} class="helper-text">
         {helperText}
       </div>,
-      <div
-        id={errorTextId}
-        class="error-text"
-        role={isInvalid && errorText ? 'alert' : undefined}
-        aria-live={isInvalid && errorText ? 'polite' : 'off'}
-        aria-atomic="true"
-      >
-        {isInvalid && errorText ? errorText : ''}
+      <div id={errorTextId} class="error-text">
+        {errorText}
       </div>,
     ];
   }
@@ -908,7 +902,7 @@ export class Input implements ComponentInterface {
               onCompositionstart={this.onCompositionStart}
               onCompositionend={this.onCompositionEnd}
               aria-describedby={this.getHintTextID()}
-              aria-invalid={this.getHintTextID() === this.errorTextId}
+              aria-invalid={this.isInvalid ? 'true' : 'false'}
               {...this.inheritedAttributes}
             />
             {this.clearInput && !readonly && !disabled && (

core/src/components/input/test/input.spec.ts

@@ -144,44 +144,49 @@ describe('input: error text accessibility', () => {
 
     const errorTextEl = page.body.querySelector('ion-input .error-text');
     expect(errorTextEl).not.toBe(null);
-
-    // Error text element should always exist and have aria-atomic
-    expect(errorTextEl!.getAttribute('aria-atomic')).toBe('true');
     expect(errorTextEl!.getAttribute('id')).toContain('error-text');
+    expect(errorTextEl!.textContent).toBe('This field is required');
   });
 
-  it('should maintain error text structure when error text changes dynamically', async () => {
+  it('should set aria-invalid when input is invalid', async () => {
     const page = await newSpecPage({
       components: [Input],
-      html: `<ion-input label="Input"></ion-input>`,
+      html: `<ion-input label="Input" error-text="Required field" class="ion-touched ion-invalid"></ion-input>`,
     });
 
-    const input = page.body.querySelector('ion-input')!;
-
-    // Add error text dynamically
-    input.setAttribute('error-text', 'Invalid email format');
-    await page.waitForChanges();
+    const nativeInput = page.body.querySelector('ion-input input')!;
 
-    const errorTextEl = page.body.querySelector('ion-input .error-text');
-    expect(errorTextEl).not.toBe(null);
-    expect(errorTextEl!.getAttribute('aria-atomic')).toBe('true');
-    expect(errorTextEl!.getAttribute('id')).toContain('error-text');
+    // Should be invalid because of the classes
+    expect(nativeInput.getAttribute('aria-invalid')).toBe('true');
   });
 
-  it('should have proper aria-describedby reference structure', async () => {
+  it('should set aria-describedby to error text when invalid', async () => {
     const page = await newSpecPage({
       components: [Input],
-      html: `<ion-input label="Input" error-text="Required field"></ion-input>`,
+      html: `<ion-input label="Input" error-text="Required field" class="ion-touched ion-invalid"></ion-input>`,
     });
 
+    const nativeInput = page.body.querySelector('ion-input input')!;
     const errorTextEl = page.body.querySelector('ion-input .error-text')!;
 
-    // Verify the error text element has an ID
+    // Verify aria-describedby points to error text
     const errorId = errorTextEl.getAttribute('id');
-    expect(errorId).toContain('error-text');
+    expect(nativeInput.getAttribute('aria-describedby')).toBe(errorId);
+  });
+
+  it('should set aria-describedby to helper text when valid', async () => {
+    const page = await newSpecPage({
+      components: [Input],
+      html: `<ion-input label="Input" helper-text="Enter a value" error-text="Required field"></ion-input>`,
+    });
+
+    const nativeInput = page.body.querySelector('ion-input input')!;
+    const helperTextEl = page.body.querySelector('ion-input .helper-text')!;
 
-    // Note: aria-describedby is dynamically set based on validation state
-    // The actual connection happens when the input becomes invalid
+    // When not invalid, should point to helper text
+    const helperId = helperTextEl.getAttribute('id');
+    expect(nativeInput.getAttribute('aria-describedby')).toBe(helperId);
+    expect(nativeInput.getAttribute('aria-invalid')).toBe('false');
   });
 
   it('should have helper text element with proper structure', async () => {
@@ -195,4 +200,22 @@ describe('input: error text accessibility', () => {
     expect(helperTextEl!.getAttribute('id')).toContain('helper-text');
     expect(helperTextEl!.textContent).toBe('Enter a valid value');
   });
+
+  it('should maintain error text content when error text changes dynamically', async () => {
+    const page = await newSpecPage({
+      components: [Input],
+      html: `<ion-input label="Input"></ion-input>`,
+    });
+
+    const input = page.body.querySelector('ion-input')!;
+
+    // Add error text dynamically
+    input.setAttribute('error-text', 'Invalid email format');
+    await page.waitForChanges();
+
+    const errorTextEl = page.body.querySelector('ion-input .error-text');
+    expect(errorTextEl).not.toBe(null);
+    expect(errorTextEl!.getAttribute('id')).toContain('error-text');
+    expect(errorTextEl!.textContent).toBe('Invalid email format');
+  });
 });