paper-spinner.html in polymer-paper-rails-0.2.6

- old
+ new

@@ -27,18 +27,25 @@
       }
     </style>
 
     <paper-spinner class="blue" active></paper-spinner>
 
+Alt attribute should be set to provide adequate context for accessibility. If not provided,
+it defaults to 'loading'.
+Empty alt can be provided to mark the element as decorative if alternative content is provided
+in another form (e.g. a text block following the spinner).
+
+##### Example
+  <paper-spinner alt="Loading contacts list" active></paper-spinner>
+
 @element paper-spinner
 @blurb Element providing material design circular spinner.
 @status alpha
 @homepage http://polymerlabs.github.io/paper-spinner
 -->
 
-<polymer-element name="paper-spinner" attributes="active">
-
+<polymer-element name="paper-spinner" attributes="active alt" role="progressbar">
   <template>
     <link rel="stylesheet" href="paper-spinner.css">
 
     <div id="spinnerContainer">
       <div class="spinner-layer blue">
@@ -95,22 +102,56 @@
          *
          * @attribute active
          * @type boolean
          * @default false
          */
-        active: {value: false, reflect: true}
+        active: {value: false, reflect: true},
+
+        /**
+         * Alternative text content for accessibility support.
+         * If alt is present, it will add an aria-label whose content matches alt when active.
+         * If alt is not present, it will default to 'loading' as the alt value.
+         * @attribute alt
+         * @type string
+         * @default 'loading'
+         */
+        alt: {value: 'loading', reflect: true}
       },
 
+      ready: function() {
+        // Allow user-provided `aria-label` take preference to any other text alternative.
+        if (this.hasAttribute('aria-label')) {
+          this.alt = this.getAttribute('aria-label');
+        } else {
+          this.setAttribute('aria-label', this.alt);
+        }
+        if (!this.active) {
+          this.setAttribute('aria-hidden', 'true');
+        }
+      },
+
       activeChanged: function() {
         if (this.active) {
+          this.$.spinnerContainer.classList.remove('cooldown');
           this.$.spinnerContainer.classList.add('active');
+          this.removeAttribute('aria-hidden');
         } else {
-          this.$.spinnerContainer.classList.add('warmdown');
+          this.$.spinnerContainer.classList.add('cooldown');
+          this.setAttribute('aria-hidden', 'true');
         }
       },
 
+      altChanged: function() {
+        if (this.alt === '') {
+          this.setAttribute('aria-hidden', 'true');
+        } else {
+          this.removeAttribute('aria-hidden');
+        }
+        this.setAttribute('aria-label', this.alt);
+      },
+
       reset: function() {
-        this.$.spinnerContainer.classList.remove('active', 'warmdown');
+        this.$.spinnerContainer.classList.remove('active', 'cooldown');
       }
     });
   </script>
 </polymer-element>