refactor: use announce helper in avatar-group (#3239)

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

Hide file tree

Showing 5 changed files with 85 additions and 62 deletions.
diff --git a/dev/avatar-group.html b/dev/avatar-group.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Avatar group</title>
+
+    <script type="module">
+      import '@vaadin/avatar-group';
+
+      const group = document.querySelector('vaadin-avatar-group');
+      group.items = [{ name: 'AA' }, { name: 'BB' }, { name: 'CC' }];
+
+      document.querySelector('#add').addEventListener('click', () => {
+        const alphabet = 'abcdefghijklmnopqrstuvwxyz';
+        const randomChar = alphabet[Math.floor(Math.random() * alphabet.length)];
+        group.items = [...group.items, { name: randomChar.toUpperCase().repeat(2) }];
+      });
+
+      document.querySelector('#remove').addEventListener('click', () => {
+        const items = [...group.items].splice(0, group.items.length - 1);
+        group.items = items;
+      });
+    </script>
+  </head>
+
+  <body>
+    <vaadin-avatar-group></vaadin-avatar-group>
+
+    <p>
+      <button id="add">Add item</button>
+      <button id="remove">Remove item</button>
+    </p>
+  </body>
+</html>
diff --git a/packages/avatar-group/package.json b/packages/avatar-group/package.json
@@ -33,7 +33,6 @@
     "polymer"
   ],
   "dependencies": {
-    "@polymer/iron-a11y-announcer": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
     "@vaadin/avatar": "23.0.0-alpha2",
     "@vaadin/component-base": "23.0.0-alpha2",

diff --git a/packages/avatar-group/src/vaadin-avatar-group.js b/packages/avatar-group/src/vaadin-avatar-group.js
@@ -3,14 +3,15 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import '@polymer/polymer/lib/elements/dom-repeat.js';
 import '@vaadin/avatar/src/vaadin-avatar.js';
 import '@vaadin/item/src/vaadin-item.js';
 import './vaadin-avatar-group-list-box.js';
 import './vaadin-avatar-group-overlay.js';
-import { IronA11yAnnouncer } from '@polymer/iron-a11y-announcer/iron-a11y-announcer.js';
 import { calculateSplices } from '@polymer/polymer/lib/utils/array-splice.js';
 import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { announce } from '@vaadin/component-base/src/a11y-announcer.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -278,8 +279,6 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
   ready() {
     super.ready();
 
-    IronA11yAnnouncer.requestAvailability();
-
     this.__boundSetPosition = this.__setPosition.bind(this);
 
     this._overlayElement = this.shadowRoot.querySelector('vaadin-avatar-group-overlay');
@@ -310,19 +309,6 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
     return this.shadowRoot.querySelectorAll('vaadin-avatar');
   }
 
-  /** @private */
-  __announce(text) {
-    this.dispatchEvent(
-      new CustomEvent('iron-announce', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          text
-        }
-      })
-    );
-  }
-
   /** @private */
   __getMessage(user, action) {
     return action.replace('{user}', user.name || user.abbr || this.i18n.anonymous);
@@ -473,7 +459,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
 
     const messages = removedMsg.concat(addedMsg);
     if (messages.length > 0) {
-      this.__announce(messages.join(', '));
+      announce(messages.join(', '));
     }
   }
 

diff --git a/packages/avatar-group/test/avatar-group.test.js b/packages/avatar-group/test/avatar-group.test.js
@@ -591,74 +591,77 @@ describe('avatar-group', () => {
   });
 
   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);
-    }
+    let clock;
+    let region;
+
+    before(() => {
+      region = document.querySelector('[aria-live]');
+    });
 
     beforeEach(async () => {
       group.items = [{ name: 'AA' }, { name: 'BB' }, { name: 'CC' }];
       await nextRender(group);
+      clock = sinon.useFakeTimers();
     });
 
-    it('should announce when adding single item', (done) => {
-      waitForAnnounce((text) => {
-        expect(text).to.equal('DD joined');
-        done();
-      });
+    afterEach(() => {
+      clock.restore();
+    });
+
+    it('should announce when adding single item', () => {
       group.splice('items', 2, 0, { name: 'DD' });
+
+      clock.tick(150);
+
+      expect(region.textContent).to.equal('DD joined');
     });
 
-    it('should announce when removing single item', (done) => {
-      waitForAnnounce((text) => {
-        expect(text).to.equal('CC left');
-        done();
-      });
+    it('should announce when removing single item', () => {
       group.splice('items', 2, 1);
+
+      clock.tick(150);
+
+      expect(region.textContent).to.equal('CC left');
     });
 
-    it('should announce when adding multiple items', (done) => {
-      waitForAnnounce((text) => {
-        expect(text).to.equal('DD joined, EE joined');
-        done();
-      });
+    it('should announce when adding multiple items', () => {
       group.splice('items', 2, 0, { name: 'DD' }, { name: 'EE' });
+
+      clock.tick(150);
+
+      expect(region.textContent).to.equal('DD joined, EE joined');
     });
 
-    it('should announce when removing multiple items', (done) => {
-      waitForAnnounce((text) => {
-        expect(text).to.equal('BB left, CC left');
-        done();
-      });
+    it('should announce when removing multiple items', () => {
       group.splice('items', 1, 2);
+
+      clock.tick(150);
+
+      expect(region.textContent).to.equal('BB left, CC left');
     });
 
-    it('should announce when adding and removing single item', (done) => {
-      waitForAnnounce((text) => {
-        expect(text).to.equal('CC left, DD joined');
-        done();
-      });
+    it('should announce when adding and removing single item', () => {
       group.splice('items', 2, 1, { name: 'DD' });
+
+      clock.tick(150);
+
+      expect(region.textContent).to.equal('CC left, DD joined');
     });
 
-    it('should announce when adding and removing multiple items', (done) => {
-      waitForAnnounce((text) => {
-        expect(text).to.equal('BB left, CC left, DD joined, EE joined');
-        done();
-      });
+    it('should announce when adding and removing multiple items', () => {
       group.splice('items', 1, 2, { name: 'DD' }, { name: 'EE' });
+
+      clock.tick(150);
+
+      expect(region.textContent).to.equal('BB left, CC left, DD joined, EE joined');
     });
 
-    it('should announce when the items property is reset', (done) => {
-      waitForAnnounce((text) => {
-        expect(text).to.equal('BB left, CC left');
-        done();
-      });
+    it('should announce when the items property is reset', () => {
       group.set('items', [group.items[0]]);
+
+      clock.tick(150);
+
+      expect(region.textContent).to.equal('BB left, CC left');
     });
   });
 });

diff --git a/packages/avatar/package.json b/packages/avatar/package.json
@@ -33,7 +33,6 @@
     "polymer"
   ],
   "dependencies": {
-    "@polymer/iron-a11y-announcer": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
     "@vaadin/component-base": "23.0.0-alpha2",
     "@vaadin/item": "23.0.0-alpha2",