Make sure an explicitly set aria-label attribute is not overwritten b…

…y the heading property
PolymerElements · Sep 7, 2016 · a27c7ea · a27c7ea
1 parent e0c01ae
commit a27c7ea
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 10 deletions.
diff --git a/paper-card.html b/paper-card.html
@@ -229,8 +229,12 @@
       },
 
       _headingChanged: function(heading) {
-        var label = this.getAttribute('aria-label');
-        this.setAttribute('aria-label', heading);
+        var currentHeading = this.getAttribute('heading'),
+            currentLabel = this.getAttribute('aria-label');
+
+        if (typeof currentLabel !== 'string' || currentLabel === currentHeading) {
+          this.setAttribute('aria-label', heading);
+        }
       },
 
       _computeHeadingClass: function(image) {

diff --git a/test/basic.html b/test/basic.html
@@ -34,21 +34,71 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="with-aria-label">
+    <template>
+      <paper-card heading="header" aria-label="the-aria-label">
+        <div class="card-content"><p>Sample content</p></div>
+      </paper-card>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="with-empty-aria-label">
+    <template>
+      <paper-card heading="header" aria-label="">
+        <div class="card-content"><p>Sample content</p></div>
+      </paper-card>
+    </template>
+  </test-fixture>
+
   <script>
     suite('a11y', function() {
       var f;
-      setup(function () {
-        f = fixture('basic');
+      suite('without aria-label', function() {
+        setup(function () {
+          f = fixture('basic');
+        });
+
+        test('aria-label set on card', function() {
+          assert.strictEqual(f.getAttribute('aria-label'), f.heading);
+        });
+
+        test('aria-label can be updated by heading', function() {
+          assert.strictEqual(f.getAttribute('aria-label'), f.heading);
+          f.heading = 'batman';
+          assert.strictEqual(f.getAttribute('aria-label'), 'batman');
+        });
       });
 
-      test('aria-label set on card', function() {
-        assert.strictEqual(f.getAttribute('aria-label'), f.heading);
+      suite('with aria-label', function() {
+        setup(function () {
+          f = fixture('with-aria-label');
+        });
+
+        test('defined aria-label is not overwritten by initial heading', function() {
+          assert.strictEqual(f.getAttribute('aria-label'), 'the-aria-label');
+        });
+
+        test('defined aria-label is not overwritten by heading update', function() {
+          assert.strictEqual(f.getAttribute('aria-label'), 'the-aria-label');
+          f.heading = 'batman';
+          assert.strictEqual(f.getAttribute('aria-label'), 'the-aria-label');
+        });
       });
 
-      test('aria-label can be updated', function() {
-        assert.strictEqual(f.getAttribute('aria-label'), f.heading);
-        f.heading = 'batman';
-        assert.strictEqual(f.getAttribute('aria-label'), 'batman');
+      suite('with empty aria-label', function() {
+        setup(function () {
+          f = fixture('with-empty-aria-label');
+        });
+
+        test('empty aria-label is not overwritten by initial heading', function() {
+          assert.strictEqual(f.getAttribute('aria-label'), '');
+        });
+
+        test('empty aria-label is not overwritten by heading update', function() {
+          assert.strictEqual(f.getAttribute('aria-label'), '');
+          f.heading = 'batman';
+          assert.strictEqual(f.getAttribute('aria-label'), '');
+        });
       });
     });
     suite('header image', function() {