From b6c6b5bab541c09c94d0be2d0aafe1c4e5f45212 Mon Sep 17 00:00:00 2001
From: greenyouse <greenyouse1@gmail.com>
Date: Wed, 27 Jul 2016 17:28:53 -0500
Subject: [PATCH] add alt text for images

---
 README.md       |  2 +-
 demo/index.html | 14 +++++++-------
 paper-card.html | 11 ++++++++++-
 test/basic.html |  6 ++++++
 4 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 94466db..c16cb51 100644
--- 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
index c4dfbe9..15bc203 100644
--- 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,7 +245,7 @@ <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>
@@ -253,14 +253,14 @@ <h3>Same layout, different content</h3>
             </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
index a1363f4..739dbf9 100644
--- 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,14 @@
           value: ''
         },
 
+        /**
+         * The text alternative of the card's title image.
+         */
+        alt: {
+          type: String,
+          value: null
+        },
+
         /**
          * 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
index a092ddf..2f35c11 100644
--- 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>