refactor: use attributeChangedCallback for aria-label

vaadin · Feb 8, 2019 · 3dbcd07 · 3dbcd07
1 parent a3592f5
commit 3dbcd07
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 14 deletions.
diff --git a/src/vaadin-button.html b/src/vaadin-button.html
@@ -77,7 +77,7 @@
         <slot name="suffix"></slot>
       </div>
     </div>
-    <button id="button" type="button"></button>
+    <button id="button" type="button" aria-label$="[[_ariaLabel]]"></button>
   </template>
   <script>
     (function() {
@@ -144,13 +144,16 @@
              * default) means that the `aria-label` attribute is not present at
              * all.
              */
-            ariaLabel: {
-              type: String,
-              observer: '_ariaLabelChanged'
+            _ariaLabel: {
+              type: String
             }
           };
         }
 
+        static get observedAttributes() {
+          return super.observedAttributes.concat(['aria-label']);
+        }
+
         ready() {
           super.ready();
 
@@ -162,7 +165,7 @@
           this.$.button.setAttribute('role', 'presentation');
 
           this._addActiveListeners();
-          this._ariaLabelChanged(this.ariaLabel);
+          this._updateAriaLabel(this.getAttribute('aria-label'));
         }
 
         /**
@@ -178,6 +181,16 @@
           }
         }
 
+        /**
+         * @protected
+         */
+        attributeChangedCallback(attr, oldVal, newVal) {
+          super.attributeChangedCallback(attr, oldVal, newVal);
+          if (attr === 'aria-label') {
+            this._updateAriaLabel(newVal);
+          }
+        }
+
         _addActiveListeners() {
           Polymer.Gestures.addListener(this, 'down', () => !this.disabled && this.setAttribute('active', ''));
           Polymer.Gestures.addListener(this, 'up', () => this.removeAttribute('active'));
@@ -186,12 +199,8 @@
           this.addEventListener('blur', () => this.removeAttribute('active'));
         }
 
-        _ariaLabelChanged(ariaLabel) {
-          if (ariaLabel !== undefined && ariaLabel !== null) {
-            this.$.button.setAttribute('aria-label', ariaLabel);
-          } else {
-            this.$.button.setAttribute('aria-label', this.innerText);
-          }
+        _updateAriaLabel(ariaLabel) {
+          this._ariaLabel = ariaLabel !== undefined && ariaLabel !== null ? ariaLabel : this.innerText;
         }
 
         /**

diff --git a/test/vaadin-button_test.html b/test/vaadin-button_test.html
@@ -130,17 +130,26 @@
         expect(vaadinButton.hasAttribute('active')).to.be.false;
       });
 
-      it('should set buttom text to native button aria-label', () => {
+      it('should set button text to native button aria-label', () => {
         expect(nativeButton.hasAttribute('aria-label')).to.be.true;
         // Remove extra line breaks
         expect(nativeButton.getAttribute('aria-label').replace(/(\r\n|\n|\r)/gm, ''))
           .to.contain(vaadinButton.innerText.replace(/(\r\n|\n|\r)/gm, ''));
       });
 
       it('should set button aria-label to native button aria-label', () => {
-        vaadinButton.ariaLabel = 'accessible';
+        vaadinButton.setAttribute('aria-label', 'accessible');
         expect(nativeButton.hasAttribute('aria-label')).to.be.true;
-        expect(nativeButton.getAttribute('aria-label')).to.be.eql(vaadinButton.ariaLabel);
+        expect(nativeButton.getAttribute('aria-label')).to.be.eql('accessible');
+      });
+
+      it('should set button aria-label when adding dynamically', () => {
+        const button = document.createElement('vaadin-button');
+        button.setAttribute('aria-label', '1');
+        button.textContent = '2';
+        document.body.appendChild(button);
+        expect(button.shadowRoot.querySelector('button').getAttribute('aria-label')).to.equal('1');
+        document.body.removeChild(button);
       });
     });
   </script>