Merge pull request #78 from greenyouse/fix-alt-text

add alt text for images
PolymerElements · Aug 1, 2016 · e60466a · e60466a
2 parents 3473647 + ba3f126
commit e60466a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -37,7 +37,7 @@ Example:
 Example - top card image:
 
 ```html
-<paper-card heading="Card Title" image="/path/to/image.png">
+<paper-card heading="Card Title" image="/path/to/image.png" alt="image">
   ...
 </paper-card>
 ```

diff --git a/demo/index.html b/demo/index.html
@@ -99,7 +99,7 @@
       <h3>A paper-card with a simple heading, header image, body content, and actions</h3>
       <demo-snippet>
         <template>
-          <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000">
+          <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000" alt="Emmental">
             <div class="card-content">
               Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
             </div>
@@ -130,7 +130,7 @@ <h3>Paper-cards can contain advanced content</h3>
             }
             iron-icon.star:last-of-type { color: var(--paper-grey-500); }
           </style>
-            <paper-card image="./donuts.png">
+            <paper-card image="./donuts.png" alt="Donuts">
               <div class="card-content">
                 <div class="cafe-header">Cafe Basilico
                   <div class="cafe-location cafe-light">
@@ -207,7 +207,7 @@ <h3>Paper-cards can have a horizontal image</h3>
       <h3>Paper-cards can have expanded supporting text</h3>
       <demo-snippet>
         <template>
-          <paper-card heading="Top western road trips" image="./trip.png" class="white">
+          <paper-card heading="Top western road trips" image="./trip.png" alt="Sailboat Harbor" class="white">
             <div class="card-content">1,000 miles of wonder</div>
             <div class="card-actions">
               <paper-button>Share</paper-button>
@@ -245,22 +245,22 @@ <h3>Same layout, different content</h3>
               --paper-card-header-color: #fff;
             }
           </style>
-          <paper-card heading="Pre-fab homes" image="./house.png" class="white" style="margin-bottom:8px;">
+          <paper-card heading="Pre-fab homes" image="./house.png" alt="House" class="white" style="margin-bottom:8px;">
             <div class="card-actions">
               <paper-icon-button icon="favorite"></paper-icon-button>
               <paper-icon-button icon="bookmark"></paper-icon-button>
               <paper-icon-button icon="social:share"></paper-icon-button>
             </div>
           </paper-card>
           <div class="horizontal">
-            <paper-card heading="Favorite trips" image="./trip.png" class="white" style="margin-right:4px;">
+            <paper-card heading="Favorite trips" image="./trip.png" alt="Trip" class="white" style="margin-right:4px;">
               <div class="card-actions horizontal justified">
                 <paper-icon-button icon="favorite"></paper-icon-button>
                 <paper-icon-button icon="bookmark"></paper-icon-button>
                 <paper-icon-button icon="social:share"></paper-icon-button>
               </div>
             </paper-card>
-            <paper-card heading="Best airlines" image="./travel.png" class="white" style="margin-left:4px;">
+            <paper-card heading="Best airlines" image="./travel.png" alt="Travel" class="white" style="margin-left:4px;">
               <div class="card-actions horizontal justified">
                 <paper-icon-button icon="favorite"></paper-icon-button>
                 <paper-icon-button icon="bookmark"></paper-icon-button>
@@ -310,7 +310,7 @@ <h3>Different layout and content</h3>
               </div>
             </paper-card>
             <paper-card heading="clean desk" class="lime"></paper-card>
-            <paper-card image="./donuts.png" class="amber">
+            <paper-card image="./donuts.png" alt="Donuts" class="amber">
               <div class="card-content">New cafe opened on Valencia St.</div>
             </paper-card>
             <paper-card heading="Yuna tickets on sale 6/24" class="cyan">

diff --git a/paper-card.html b/paper-card.html
@@ -30,7 +30,7 @@
 
 Example - top card image:
 
-    <paper-card heading="Card Title" image="/path/to/image.png">
+    <paper-card heading="Card Title" image="/path/to/image.png" alt="image">
       ...
     </paper-card>
 
@@ -132,6 +132,7 @@
       <iron-image
           hidden$="[[!image]]"
           src="[[image]]"
+          alt="[[alt]]"
           placeholder="[[placeholderImage]]"
           preload="[[preloadImage]]"
           fade="[[fadeImage]]"></iron-image>
@@ -163,6 +164,13 @@
           value: ''
         },
 
+        /**
+         * The text alternative of the card's title image.
+         */
+        alt: {
+          type: String
+        },
+
         /**
          * When `true`, any change to the image url property will cause the
          * `placeholder` image to be shown until the image is fully rendered.

diff --git a/test/basic.html b/test/basic.html
@@ -86,6 +86,12 @@
         f.placeholderImage = 'some-place-holder';
         assert.strictEqual(img.placeholder, f.placeholderImage);
       });
+
+      test('alt properly setup', function() {
+        assert.strictEqual(img.alt, null);
+        f.alt = 'some-text';
+        assert.strictEqual(img.alt, f.alt);
+      });
     });
   </script>