Merge pull request #81 from whenlit/aria-label

Make sure an explicitly set aria-label attribute is not overwritten
PolymerElements · Apr 18, 2017 · ee0573c · ee0573c
2 parents 2e7de1f + ef6e8d2
commit ee0573c
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 20 deletions.
diff --git a/paper-card.html b/paper-card.html
@@ -238,8 +238,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,33 +34,90 @@
     </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, img;
-      setup(function () {
-        f = fixture('basic');
-        img = f.$$('iron-image');
+      var f;
+      suite('without aria-label attribute set', 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 attribute set', 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 aria-label attribute set to ""', 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'), '');
+        });
       });
-
-      test('aria-hidden is set on image', function() {
-        assert.strictEqual(img.getAttribute('aria-hidden'), 'true');
-	  });
-
-      test('aria-hidden is removed when image is set', function() {
-        f.image = 'some-image-url';
-        assert.strictEqual(img.getAttribute('aria-hidden'), 'false');
+
+      suite('header image', function() {
+        var img;
+        setup(function () {
+          f = fixture('basic');
+          img = f.$$('iron-image');
+        });
+        test('aria-hidden is set on image', function() {
+          assert.strictEqual(img.getAttribute('aria-hidden'), 'true');
+        });
+
+        test('aria-hidden is removed when image is set', function() {
+          f.image = 'some-image-url';
+          assert.strictEqual(img.getAttribute('aria-hidden'), 'false');
+        });
       });
     });
+
     suite('header image', function() {
       var f, img;
       setup(function () {