Merge pull request #13 from PolymerEl/accessibility

Accessibility

Author: urdeveloper

bower.json

@@ -1,13 +1,13 @@
 {
   "name": "ud-stepper",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Material Design Stepper",
   "main": "ud-stepper.html",
   "dependencies": {
     "polymer": "Polymer/polymer#^2.0.0",
     "paper-styles": "^2.0.0",
     "neon-animation": "^2.2.0",
-    "iron-selector": "^2.0.1",
+    "iron-menu-behavior": "^2.0.1",
     "paper-button": "^2.0.0",
     "iron-iconset-svg": "^2.1.0",
     "iron-icon": "^2.0.1"

demo/index.html

@@ -66,9 +66,10 @@ <h3>Linear Stepper</h3>
     </div>
     <demo-snippet>
       <template>
-        <ud-stepper linear sizing="contain" animate>
+        <ud-stepper id="steps" linear sizing="contain" animate>
           <ud-step title="Step 1">
             <div> Step 1 Content</div>
+            <paper-button raised>Content button</paper-button>
           </ud-step>
           <ud-step title="Step 2 with veeeeeery long title">
             <div>Step 2 Content</div>
@@ -224,6 +225,7 @@ <h3>Custom action implementation </h3>
   window.addEventListener('WebComponentsReady', function() {
     console.info('ready');
     app = document.querySelector('#app');
+    steps = document.querySelector('#steps');
 
     app.next = e => {
       e.target.dispatchEvent(new CustomEvent('step-action', { detail: 'next', bubbles: true, composed: true }));

ud-step.html

@@ -15,6 +15,10 @@
       @apply --ud-step-content-style;
       margin: 24px 24px 16px 24px;
     }
+    
+    #content:focus {
+      outline: none;
+    }
 
     #actions {
       padding: 0px 24px 8px 24px;
@@ -41,7 +45,6 @@
 
     paper-button,
     #actions ::slotted(paper-button) {
-      @apply --paper-font-button;
       color: rgba(0, 0, 0, 0.83);
     }
 
@@ -55,6 +58,12 @@
       color: rgba(0, 0, 0, 0.50);
       background-color: transparent;
     }
+
+    paper-button:focus, 
+    #actions ::slotted(paper-button:focus) {
+      background-color: var(--google-grey-300);
+
+    }
     </style>
     <div id="content">
       <slot></slot>
@@ -135,7 +144,7 @@
           },
 
           /* 
-           * `alwaysSelectable` true to allow the step to always be selectable, even if linead and completed
+           * `alwaysSelectable` true to allow the step to always be selectable, even if linear and completed
            */
            alwaysSelectable: {
              type:  Boolean,
@@ -243,10 +252,6 @@
         return ['_updateActionsButtons(_actionButtons.*,_linearActionButtons.*,actions.*)'];
       }
 
-      ready() {
-        super.ready();
-      }
-
       connectedCallback() {
         super.connectedCallback();
         if (this.hideActions) return;
@@ -305,7 +310,7 @@
       _errorChanged(invalid) {
         this.dispatchEvent(new CustomEvent('step-error', {
           detail: {
-            stpe: this
+            step: this
           },
           bubbles: true
         }));
@@ -314,6 +319,12 @@
       _reset() {
         this.completed = false;
       }
+
+      setFocus() {
+        const content = this.$.content;
+        content.setAttribute('tabindex', '0');
+        content.focus();
+      }
     }
 
     window.customElements.define(UdStepElement.is, UdStepElement);