fix: ensure error message is announced by VoiceOver (#8384) (#8395)

Co-authored-by: Sergey Vinogradov <[email protected]>
vaadin · Dec 23, 2024 · 679a5fa · 679a5fa
1 parent 5ec75b7
commit 679a5fa
Show file tree

Hide file tree

Showing 19 changed files with 32 additions and 36 deletions.
diff --git a/packages/checkbox-group/test/dom/__snapshots__/checkbox-group.test.snap.js b/packages/checkbox-group/test/dom/__snapshots__/checkbox-group.test.snap.js
@@ -545,7 +545,6 @@ snapshots["vaadin-checkbox-group host error"] =
   </label>
   <div
     id="error-message-vaadin-checkbox-group-2"
-    role="alert"
     slot="error-message"
   >
     Error

diff --git a/packages/checkbox/test/dom/__snapshots__/checkbox.test.snap.js b/packages/checkbox/test/dom/__snapshots__/checkbox.test.snap.js
@@ -219,7 +219,6 @@ snapshots["vaadin-checkbox host error"] =
   </label>
   <div
     id="error-message-vaadin-checkbox-2"
-    role="alert"
     slot="error-message"
   >
     Error

diff --git a/packages/combo-box/test/dom/__snapshots__/combo-box.test.snap.js b/packages/combo-box/test/dom/__snapshots__/combo-box.test.snap.js
@@ -264,7 +264,6 @@ snapshots["vaadin-combo-box host error"] =
   </label>
   <div
     id="error-message-vaadin-combo-box-2"
-    role="alert"
     slot="error-message"
   >
     Error

diff --git a/packages/custom-field/test/dom/__snapshots__/custom-field.test.snap.js b/packages/custom-field/test/dom/__snapshots__/custom-field.test.snap.js
@@ -102,7 +102,6 @@ snapshots["vaadin-custom-field host error"] =
   </label>
   <div
     id="error-message-vaadin-custom-field-2"
-    role="alert"
     slot="error-message"
   >
     Error

diff --git a/packages/date-picker/test/dom/__snapshots__/date-picker.test.snap.js b/packages/date-picker/test/dom/__snapshots__/date-picker.test.snap.js
@@ -213,7 +213,6 @@ snapshots["vaadin-date-picker host error"] =
   </label>
   <div
     id="error-message-vaadin-date-picker-2"
-    role="alert"
     slot="error-message"
   >
     Error

diff --git a/packages/date-time-picker/test/dom/__snapshots__/date-time-picker.test.snap.js b/packages/date-time-picker/test/dom/__snapshots__/date-time-picker.test.snap.js
@@ -455,7 +455,6 @@ snapshots["vaadin-date-time-picker host error"] =
   </label>
   <div
     id="error-message-vaadin-date-time-picker-2"
-    role="alert"
     slot="error-message"
   >
     Error

diff --git a/packages/email-field/test/dom/__snapshots__/email-field.test.snap.js b/packages/email-field/test/dom/__snapshots__/email-field.test.snap.js
@@ -311,7 +311,6 @@ snapshots["vaadin-email-field host error"] =
   </label>
   <div
     id="error-message-vaadin-email-field-2"
-    role="alert"
     slot="error-message"
   >
     Error

diff --git a/packages/field-base/src/error-controller.js b/packages/field-base/src/error-controller.js
@@ -3,6 +3,7 @@
  * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { announce } from '@vaadin/a11y-base/src/announce.js';
 import { SlotChildObserveController } from '@vaadin/component-base/src/slot-child-observe-controller.js';
 
 /**
@@ -108,12 +109,10 @@ export class ErrorController extends SlotChildObserveController {
       errorNode.textContent = hasError ? errorMessage : '';
       errorNode.hidden = !hasError;
 
-      // Role alert will make the error message announce immediately
-      // as the field becomes invalid
       if (hasError) {
-        errorNode.setAttribute('role', 'alert');
-      } else {
-        errorNode.removeAttribute('role');
+        // Assertive mode ensures VoiceOver reads
+        // the error message on commit with Enter.
+        announce(errorMessage, { mode: 'assertive' });
       }
     }
 

diff --git a/packages/field-base/test/field-mixin.test.js b/packages/field-base/test/field-mixin.test.js
@@ -1,5 +1,6 @@
 import { expect } from '@vaadin/chai-plugins';
 import { aTimeout, defineLit, definePolymer, fixtureSync, nextRender, nextUpdate } from '@vaadin/testing-helpers';
+import sinon from 'sinon';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { FieldMixin } from '../src/field-mixin.js';
@@ -142,30 +143,46 @@ const runTests = (defineHelper, baseMixin) => {
         await nextUpdate(element);
         expect(element.hasAttribute('has-error-message')).to.be.false;
       });
+    });
+
+    describe('announcements', () => {
+      let announceRegion, clock;
+
+      beforeEach(async () => {
+        element = fixtureSync(`<${tag}></${tag}>`);
+        await nextRender();
+        clock = sinon.useFakeTimers({ toFake: ['setTimeout'] });
+        announceRegion = document.querySelector('[aria-live]');
+        announceRegion.textContent = '';
+      });
 
-      it('should not set alert role with no error', () => {
-        expect(error.hasAttribute('role')).to.be.false;
+      afterEach(() => {
+        clock.restore();
       });
 
-      it('should set alert role when attribute is set', async () => {
+      it('should announce error message set via attribute when field is invalid', async () => {
+        element.invalid = true;
         element.setAttribute('error-message', 'This field is required');
         await nextUpdate(element);
-        expect(error.getAttribute('role')).to.equal('alert');
+        clock.tick(150);
+        expect(announceRegion.textContent).to.equal('This field is required');
+        expect(announceRegion.getAttribute('aria-live')).to.equal('assertive');
       });
 
-      it('should set alert role when property is set', async () => {
+      it('should announce error message set via property when field is invalid', async () => {
+        element.invalid = true;
         element.errorMessage = 'This field is required';
         await nextUpdate(element);
-        expect(error.getAttribute('role')).to.equal('alert');
+        clock.tick(150);
+        expect(announceRegion.textContent).to.equal('This field is required');
+        expect(announceRegion.getAttribute('aria-live')).to.equal('assertive');
       });
 
-      it('should remove alert role when field is valid', async () => {
+      it('should not announce error message when field is valid', async () => {
         element.errorMessage = 'This field is required';
         await nextUpdate(element);
-
-        element.invalid = false;
-        await nextUpdate(element);
-        expect(error.hasAttribute('role')).to.be.false;
+        clock.tick(150);
+        expect(announceRegion.textContent).to.equal('');
       });
     });
 

diff --git a/packages/integer-field/test/dom/__snapshots__/integer-field.test.snap.js b/packages/integer-field/test/dom/__snapshots__/integer-field.test.snap.js
@@ -73,7 +73,6 @@ snapshots["vaadin-integer-field host error"] =
   </label>
   <div
     id="error-message-vaadin-integer-field-2"
-    role="alert"
     slot="error-message"
   >
     Error

diff --git a/packages/login/test/dom/__snapshots__/login-form.test.snap.js b/packages/login/test/dom/__snapshots__/login-form.test.snap.js
@@ -156,7 +156,6 @@ snapshots["vaadin-login-form host required"] =
         </label>
         <div
           id="error-message-vaadin-text-field-2"
-          role="alert"
           slot="error-message"
         >
           Username is required
@@ -192,7 +191,6 @@ snapshots["vaadin-login-form host required"] =
         </label>
         <div
           id="error-message-vaadin-password-field-5"
-          role="alert"
           slot="error-message"
         >
           Password is required
@@ -383,7 +381,6 @@ snapshots["vaadin-login-form host i18n-required"] =
         </label>
         <div
           id="error-message-vaadin-text-field-2"
-          role="alert"
           slot="error-message"
         >
           Käyttäjätunnus vaaditaan
@@ -419,7 +416,6 @@ snapshots["vaadin-login-form host i18n-required"] =
         </label>
         <div
           id="error-message-vaadin-password-field-5"
-          role="alert"
           slot="error-message"
         >
           Salasana vaaditaan

diff --git a/packages/multi-select-combo-box/test/dom/__snapshots__/multi-select-combo-box.test.snap.js b/packages/multi-select-combo-box/test/dom/__snapshots__/multi-select-combo-box.test.snap.js
@@ -131,7 +131,6 @@ snapshots["vaadin-multi-select-combo-box host error"] =
   </label>
   <div
     id="error-message-vaadin-multi-select-combo-box-2"
-    role="alert"
     slot="error-message"
   >
     Error

diff --git a/packages/number-field/test/dom/__snapshots__/number-field.test.snap.js b/packages/number-field/test/dom/__snapshots__/number-field.test.snap.js
@@ -73,7 +73,6 @@ snapshots["vaadin-number-field host error"] =
   </label>
   <div
     id="error-message-vaadin-number-field-2"
-    role="alert"
     slot="error-message"
   >
     Error

diff --git a/packages/password-field/test/dom/__snapshots__/password-field.test.snap.js b/packages/password-field/test/dom/__snapshots__/password-field.test.snap.js
@@ -85,7 +85,6 @@ snapshots["vaadin-password-field host error"] =
   </label>
   <div
     id="error-message-vaadin-password-field-2"
-    role="alert"
     slot="error-message"
   >
     Error

diff --git a/packages/radio-group/test/dom/__snapshots__/radio-group.test.snap.js b/packages/radio-group/test/dom/__snapshots__/radio-group.test.snap.js
@@ -394,7 +394,6 @@ snapshots["vaadin-radio-group host error"] =
   </label>
   <div
     id="error-message-vaadin-radio-group-2"
-    role="alert"
     slot="error-message"
   >
     Error

diff --git a/packages/select/test/dom/__snapshots__/select.test.snap.js b/packages/select/test/dom/__snapshots__/select.test.snap.js
@@ -250,7 +250,6 @@ snapshots["vaadin-select host error"] =
   </label>
   <div
     id="error-message-vaadin-select-2"
-    role="alert"
     slot="error-message"
   >
     Error

diff --git a/packages/text-area/test/dom/__snapshots__/text-area.test.snap.js b/packages/text-area/test/dom/__snapshots__/text-area.test.snap.js
@@ -67,7 +67,6 @@ snapshots["vaadin-text-area host error"] =
   </label>
   <div
     id="error-message-vaadin-text-area-2"
-    role="alert"
     slot="error-message"
   >
     Error

diff --git a/packages/text-field/test/dom/__snapshots__/text-field.test.snap.js b/packages/text-field/test/dom/__snapshots__/text-field.test.snap.js
@@ -67,7 +67,6 @@ snapshots["vaadin-text-field host error"] =
   </label>
   <div
     id="error-message-vaadin-text-field-2"
-    role="alert"
     slot="error-message"
   >
     Error

diff --git a/packages/time-picker/test/dom/__snapshots__/time-picker.test.snap.js b/packages/time-picker/test/dom/__snapshots__/time-picker.test.snap.js
@@ -110,7 +110,6 @@ snapshots["vaadin-time-picker host error"] =
   </label>
   <div
     id="error-message-vaadin-time-picker-2"
-    role="alert"
     slot="error-message"
   >
     Error