refactor: use announce helper in field highlighter (#3240)

vaadin · Jan 3, 2022 · 24780bd · 24780bd
1 parent 43c2474
commit 24780bd
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 42 deletions.
diff --git a/packages/field-highlighter/package.json b/packages/field-highlighter/package.json
@@ -32,7 +32,6 @@
     "field"
   ],
   "dependencies": {
-    "@polymer/iron-a11y-announcer": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
     "@vaadin/component-base": "23.0.0-alpha2",
     "@vaadin/vaadin-lumo-styles": "23.0.0-alpha2",

diff --git a/packages/field-highlighter/src/vaadin-field-highlighter.js b/packages/field-highlighter/src/vaadin-field-highlighter.js
@@ -5,7 +5,7 @@
  */
 import './vaadin-field-outline.js';
 import './vaadin-user-tags.js';
-import { IronA11yAnnouncer } from '@polymer/iron-a11y-announcer/iron-a11y-announcer.js';
+import { announce } from '@vaadin/component-base/src/a11y-announcer.js';
 import { CheckboxGroupObserver } from './fields/vaadin-checkbox-group-observer.js';
 import { DatePickerObserver } from './fields/vaadin-date-picker-observer.js';
 import { DateTimePickerObserver } from './fields/vaadin-date-time-picker-observer.js';
@@ -61,7 +61,9 @@ export class FieldHighlighterController {
     this._user = user;
 
     if (user) {
-      this._announce(`${user.name} started editing`);
+      const msg = `${user.name} started editing`;
+      const { label } = this.host;
+      announce(label ? `${msg} ${label}` : msg);
     }
   }
 
@@ -94,7 +96,6 @@ export class FieldHighlighterController {
 
   hostConnected() {
     this.redraw();
-    IronA11yAnnouncer.requestAvailability();
   }
 
   addUser(user) {
@@ -143,23 +144,6 @@ export class FieldHighlighterController {
   redraw() {
     this.observer.redraw([...this.users].reverse());
   }
-
-  /**
-   * @param {string} msg
-   * @protected
-   */
-  _announce(msg) {
-    const label = this.host.label || '';
-    this.host.dispatchEvent(
-      new CustomEvent('iron-announce', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          text: label ? `${msg} ${label}` : msg
-        }
-      })
-    );
-  }
 }
 
 /**

diff --git a/packages/field-highlighter/test/field-highlighter.test.js b/packages/field-highlighter/test/field-highlighter.test.js
@@ -407,33 +407,36 @@ describe('field highlighter', () => {
     });
 
     describe('announcements', () => {
-      // NOTE: See <iron-a11y-announcer> API
-
-      function waitForAnnounce(callback) {
-        var listener = (event) => {
-          document.body.removeEventListener('iron-announce', listener);
-          callback(event.detail.text);
-        };
-        document.body.addEventListener('iron-announce', listener);
-      }
-
-      it('should announce adding a new user', (done) => {
-        waitForAnnounce((text) => {
-          expect(text).to.equal(`${user1.name} started editing`);
-          done();
-        });
+      let clock;
+      let region;
 
-        addUser(user1);
+      before(() => {
+        region = document.querySelector('[aria-live]');
       });
 
-      it('should announce field label, if any', (done) => {
-        waitForAnnounce((text) => {
-          expect(text).to.equal(`${user1.name} started editing ${field.label}`);
-          done();
-        });
+      beforeEach(() => {
+        clock = sinon.useFakeTimers();
+      });
 
+      afterEach(() => {
+        clock.restore();
+      });
+
+      it('should announce adding a new user', () => {
+        addUser(user1);
+
+        clock.tick(150);
+
+        expect(region.textContent).to.equal(`${user1.name} started editing`);
+      });
+
+      it('should announce field label, if any', () => {
         field.label = 'Username';
         addUser(user1);
+
+        clock.tick(150);
+
+        expect(region.textContent).to.equal(`${user1.name} started editing ${field.label}`);
       });
     });
   });