update elements and fix some bugs

lib/src/paper-badge/paper-badge.html

Index: lib/src/paper-badge/paper-badge.html
diff --git a/lib/src/paper-badge/paper-badge.html b/lib/src/paper-badge/paper-badge.html
index ae36fe4b11558c391dca28b8b90b9682994e35aa..a620b44d631ccc4dad13b99528884723d332804a 100644
--- a/lib/src/paper-badge/paper-badge.html
+++ b/lib/src/paper-badge/paper-badge.html
@@ -9,8 +9,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 -->
 
 <link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
 <link rel="import" href="../paper-styles/default-theme.html">
 
 <!--
@@ -27,8 +27,8 @@ Example:
     </div>
 
     <div>
-      <paper-button id="btn">Status</button>
-      <paper-badge for="btn" label="♥︎">b/paper-badge>
+      <paper-button id="btn">Status</paper-button>
+      <paper-badge for="btn" label="♥︎"></paper-badge>
     </div>
 
 ### Styling
@@ -52,38 +52,45 @@ Custom property | Description | Default
 -->
 
 <dom-module id="paper-badge">
-  <style>
-    :host {
-      display: block;
-      position: absolute;
-      outline: none;
-    }
-
-    #badge {
-      @apply(--paper-font-common-base);
-      font-weight: 600;
-      font-size: 12px;
-      border-radius: 50%;
-      margin-left: var(--paper-badge-margin-left, 0px);
-      margin-bottom: var(--paper-badge-margin-bottom, 0px);
-      width: var(--paper-badge-width, 22px);
-      height: var(--paper-badge-height, 22px);
-      background-color: var(--paper-badge-background, --accent-color);
-      opacity: var(--paper-badge-opacity, 1.0);
-      color: var(--paper-badge-text-color, white);
-      @apply(--layout);
-      @apply(--layout-center-center);
-
-      @apply(--paper-badge);
-    }
-  </style>
   <template>
+    <style>
+      :host {
+        display: block;
+        position: absolute;
+        outline: none;
+      }
+
+      #badge {
+        @apply(--paper-font-common-base);
+        font-weight: 600;
+        font-size: 12px;
+        border-radius: 50%;
+        margin-left: var(--paper-badge-margin-left, 0px);
+        margin-bottom: var(--paper-badge-margin-bottom, 0px);
+        width: var(--paper-badge-width, 22px);
+        height: var(--paper-badge-height, 22px);
+        background-color: var(--paper-badge-background, --accent-color);
+        opacity: var(--paper-badge-opacity, 1.0);
+        color: var(--paper-badge-text-color, white);
+        @apply(--layout);
+        @apply(--layout-center-center);
+
+        @apply(--paper-badge);
+      }
+    </style>
+
     <div id="badge">{{label}}</div>
   </template>
+
   <script>
     Polymer({
       is: 'paper-badge',
 
+      hostAttributes: {
+        tabindex: '0',
+        role: 'status'
+      },
+
       behaviors: [
         Polymer.IronResizableBehavior
       ],
@@ -107,7 +114,8 @@ Custom property | Description | Default
          * should have very few characters.
          */
         label: {
-          type: String
+          type: String,
+          observer: '_labelChanged'
         }
       },
 
@@ -124,6 +132,10 @@ Custom property | Description | Default
         this._updateTarget();
       },
 
+      _labelChanged: function() {
+        this.setAttribute('aria-label', this.label);
+      },
+
       _updateTarget: function() {
         this._target = this.target;
         this.async(this.notifyResize, 1);