fix(input): add aria-live attributes to error text

Author: ShaneK

core/src/components/input/input.tsx

@@ -632,7 +632,7 @@ export class Input implements ComponentInterface {
       <div id={helperTextId} class="helper-text">
         {helperText}
       </div>,
-      <div id={errorTextId} class="error-text">
+      <div id={errorTextId} class="error-text" aria-live="assertive" aria-atomic="true">
         {errorText}
       </div>,
     ];

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

@@ -133,3 +133,58 @@ describe('input: clear icon', () => {
     expect(icon.getAttribute('icon')).toBe('foo');
   });
 });
+
+// Regression tests for screen reader accessibility of error messages
+describe('input: error text accessibility', () => {
+  it('should have aria-live="assertive" and aria-atomic="true" on error text for screen reader announcements', async () => {
+    const page = await newSpecPage({
+      components: [Input],
+      html: `<ion-input label="Input" error-text="This field is required"></ion-input>`,
+    });
+
+    const errorTextEl = page.body.querySelector('ion-input .error-text');
+    expect(errorTextEl).not.toBe(null);
+    
+    // These attributes ensure screen readers announce errors immediately when they appear
+    expect(errorTextEl!.getAttribute('aria-live')).toBe('assertive');
+    expect(errorTextEl!.getAttribute('aria-atomic')).toBe('true');
+  });
+
+  it('should maintain accessibility attributes 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')!;
+    
+    // Simulate validation error appearing on blur
+    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('aria-live')).toBe('assertive');
+    expect(errorTextEl!.getAttribute('aria-atomic')).toBe('true');
+    expect(errorTextEl!.textContent).toBe('Invalid email format');
+  });
+
+  it('should properly link error text to input via aria-describedby when invalid', async () => {
+    const page = await newSpecPage({
+      components: [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 input references the error text ID
+    const describedBy = nativeInput.getAttribute('aria-describedby');
+    const errorId = errorTextEl.getAttribute('id');
+    
+    expect(describedBy).toBe(errorId);
+    expect(describedBy).toContain('error-text');
+    // When invalid, aria-invalid should be set
+    expect(nativeInput.hasAttribute('aria-invalid')).toBe(true);
+  });
+});