Merge remote-tracking branch 'upstream/master' into aria-label

PolymerElements · Oct 12, 2016 · ef6e8d2 · ef6e8d2
2 parents a27c7ea + e6a2a22
commit ef6e8d2
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 57 deletions.
diff --git a/README.md b/README.md
@@ -1,65 +1,79 @@
-
-<!---
-
-This README is automatically generated from the comments in these files:
-paper-card.html
-
-Edit those files, and our readme bot will duplicate them over here!
-Edit this file, and the bot will squash your changes :)
-
-The bot does some handling of markdown. Please file a bug if it does the wrong
-thing! https://github.com/PolymerLabs/tedium/issues
-
--->
-
 [![Build status](https://travis-ci.org/PolymerElements/paper-card.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-card)
 
-_[Demo and API docs](https://elements.polymer-project.org/elements/paper-card)_
-
-
 ##&lt;paper-card&gt;
 
 Material design: [Cards](https://www.google.com/design/spec/components/cards.html)
 
 `paper-card` is a container with a drop shadow.
 
-Example:
-
+<!---
 ```html
-<paper-card heading="Card Title">
-  <div class="card-content">Some content</div>
-  <div class="card-actions">
-    <paper-button>Some action</paper-button>
-  </div>
-</paper-card>
+<custom-element-demo>
+<template>
+<script src="../webcomponentsjs/webcomponents-lite.js"></script>
+<link rel="import" href="../iron-icons/iron-icons.html">
+<link rel="import" href="../iron-icons/communication-icons.html">
+<link rel="import" href="../paper-button/paper-button.html">
+<link rel="import" href="../paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../paper-styles/color.html">
+<link rel="import" href="../paper-styles/typography.html">
+<link rel="import" href="paper-card.html">
+<style is="custom-style">
+  body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  paper-card {
+	max-width: 500px;
+  }
+  .cafe-header { @apply(--paper-font-headline); }
+  .cafe-light { color: var(--paper-grey-600); }
+  .cafe-location {
+    float: right;
+    font-size: 15px;
+    vertical-align: middle;
+  }
+  .cafe-reserve { color: var(--google-blue-500); }
+  iron-icon.star {
+    --iron-icon-width: 16px;
+    --iron-icon-height: 16px;
+    color: var(--paper-amber-500);
+  }
+  iron-icon.star:last-of-type { color: var(--paper-grey-500); }
+</style>
+<next-code-block></next-code-block>
+</template>
+</custom-element-demo>
 ```
-
-Example - top card image:
-
+-->
 ```html
-<paper-card heading="Card Title" image="/path/to/image.png" alt="image">
-  ...
+<paper-card image="demo/donuts.png">
+  <div class="card-content">
+    <div class="cafe-header">Cafe Basilico
+      <div class="cafe-location cafe-light">
+        <iron-icon icon="communication:location-on"></iron-icon>
+        <span>250ft</span>
+      </div>
+    </div>
+    <div class="cafe-rating">
+      <iron-icon class="star" icon="star"></iron-icon>
+      <iron-icon class="star" icon="star"></iron-icon>
+      <iron-icon class="star" icon="star"></iron-icon>
+      <iron-icon class="star" icon="star"></iron-icon>
+      <iron-icon class="star" icon="star"></iron-icon>
+    </div>
+    <p>$・Italian, Cafe</p>
+    <p class="cafe-light">Small plates, salads &amp; sandwiches in an intimate setting.</p>
+  </div>
+  <div class="card-actions">
+    <div class="horizontal justified">
+      <paper-icon-button icon="icons:event"></paper-icon-button>
+      <paper-button>5:30PM</paper-button>
+      <paper-button>7:30PM</paper-button>
+      <paper-button>9:00PM</paper-button>
+      <paper-button class="cafe-reserve">Reserve</paper-button>
+    </div>
+  </div>
 </paper-card>
 ```
-
-### Accessibility
-
-By default, the `aria-label` will be set to the value of the `heading` attribute.
-
-### Styling
-
-The following custom properties and mixins are available for styling:
-
-| Custom property | Description | Default |
-| --- | --- | --- |
-| `--paper-card-background-color` | The background color of the card | `--primary-background-color` |
-| `--paper-card-header-color` | The color of the header text | `#000` |
-| `--paper-card-header` | Mixin applied to the card header section | `{}` |
-| `--paper-card-header-text` | Mixin applied to the title in the card header section | `{}` |
-| `--paper-card-header-image` | Mixin applied to the image in the card header section | `{}` |
-| `--paper-card-header-image-text` | Mixin applied to the text overlapping the image in the card header section | `{}` |
-| `--paper-card-content` | Mixin applied to the card content section | `{}` |
-| `--paper-card-actions` | Mixin applied to the card action section | `{}` |
-| `--paper-card` | Mixin applied to the card | `{}` |
-
-
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "paper-card",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Material design piece of paper with unique related data",
   "authors": [
     "The Polymer Authors"
@@ -11,7 +11,6 @@
     "card"
   ],
   "main": "paper-card.html",
-  "private": true,
   "repository": {
     "type": "git",
     "url": "git://github.com/PolymerElements/paper-card.git"

diff --git a/paper-card.html b/paper-card.html
@@ -131,6 +131,7 @@
     <div class="header">
       <iron-image
           hidden$="[[!image]]"
+          aria-hidden$="[[_isHidden(image)]]"
           src="[[image]]"
           alt="[[alt]]"
           placeholder="[[placeholderImage]]"
@@ -227,6 +228,14 @@
           computed: '_computeAnimated(animatedShadow)'
         }
       },
+
+      /**
+       * Format function for aria-hidden. Use the ! operator results in the
+       * empty string when given a falsy value.
+       */
+      _isHidden: function(image) {
+        return image ? 'false' : 'true';
+      },
 
       _headingChanged: function(heading) {
         var currentHeading = this.getAttribute('heading'),

diff --git a/test/basic.html b/test/basic.html
@@ -53,7 +53,7 @@
   <script>
     suite('a11y', function() {
       var f;
-      suite('without aria-label', function() {
+      suite('without aria-label attribute set', function() {
         setup(function () {
           f = fixture('basic');
         });
@@ -69,7 +69,7 @@
         });
       });
 
-      suite('with aria-label', function() {
+      suite('with aria-label attribute set', function() {
         setup(function () {
           f = fixture('with-aria-label');
         });
@@ -85,7 +85,7 @@
         });
       });
 
-      suite('with empty aria-label', function() {
+      suite('with aria-label attribute set to ""', function() {
         setup(function () {
           f = fixture('with-empty-aria-label');
         });
@@ -100,7 +100,24 @@
           assert.strictEqual(f.getAttribute('aria-label'), '');
         });
       });
+
+      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 () {