diff --git a/bower.json b/bower.json
index 565a23e..4e4622e 100644
--- a/bower.json
+++ b/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"
diff --git a/demo/index.html b/demo/index.html
index 293eb70..612767d 100644
--- a/demo/index.html
+++ b/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 }));
diff --git a/ud-step.html b/ud-step.html
index 75c71a5..009f072 100644
--- a/ud-step.html
+++ b/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);
diff --git a/ud-stepper.html b/ud-stepper.html
index 1a67244..7890123 100644
--- a/ud-stepper.html
+++ b/ud-stepper.html
@@ -6,11 +6,38 @@
 <link rel="import" href="../paper-styles/element-styles/paper-material-styles.html">
 <link rel="import" href="../paper-styles/color.html">
 <link rel="import" href="../paper-styles/typography.html">
-<link rel="import" href="../iron-selector/iron-selector.html">
+<link rel="import" href="../iron-menu-behavior/iron-menubar-behavior.html">
 <link rel="import" href="../iron-icon/iron-icon.html">
 <link rel="import" href="../polymer/lib/mixins/mutable-data.html">
 <link rel="import" href="ud-step.html">
 <link rel="import" href="ud-iconset.html">
+<dom-module id="ud-stepper-button">
+  <!--  <template>
+    <style>
+      host: {
+        display: block
+      }
+    </style>
+    <slot></slot>
+  </template> -->
+  <script>
+  (function() {
+    /**
+     * `ud-stepper-button`
+     *  private element to make sure we capture 'spacebar' downkey event when the 
+     *  element has focus. This is similar to how paper-tab work. 
+     */
+    class UdStepperButton extends
+    Polymer.mixinBehaviors(Polymer.IronButtonState, Polymer.Element) {
+      static get is() {
+        return 'ud-stepper-button';
+      }
+    }
+    customElements.define(UdStepperButton.is, UdStepperButton);
+  })();
+
+  </script>
+</dom-module>
 <dom-module id="ud-stepper">
   <template>
     <style include="paper-material-styles">
@@ -21,7 +48,7 @@
       --ud-stepper-circle-size: 30px;
       --ud-stepper-icon-size: 18px;
     }
-  
+
     #pageContainer {
       min-height: var(--ud-stepper-container-min-height);
     }
@@ -45,7 +72,7 @@
       flex: 1;
     }
 
-    :host(:not([vertical])) .header[selected] {
+    :host(:not([vertical])) .header[aria-selected] {
       background: var(--ud-stepper-selected-header-background, var(--google-grey-300));
       @apply --ud-stepper-selected-header;
     }
@@ -58,7 +85,7 @@
       flex: 1;
       top: 36px;
       height: 1px;
-      background-color: rgba(0, 0, 0, 0.1);
+      background-color: rgba(0, 0, 0, 0.3);
     }
 
     :host(:not([vertical])) .header:not(:first-of-type)::before {
@@ -68,7 +95,7 @@
       flex: 1;
       top: 36px;
       height: 1px;
-      background-color: rgba(0, 0, 0, 0.1);
+      background-color: rgba(0, 0, 0, 0.3);
     }
 
     .header .label {
@@ -80,8 +107,18 @@
       padding: 24px 24px 24px 24px;
     }
 
-    .header:hover {
+    .header:hover,
+    .header:focus {
       background-color: var(--google-grey-100);
+      font-weight: 500;
+      outline: none;
+    }
+    .header:focus {
+      box-shadow: 0 1px 0 var(--ud-stepper-icon-selected-color, var(--google-blue-500));
+    }
+
+    .header:focus-visible {
+      box-shadow: 0 2px 0 var(--ud-stepper-icon-selected-color, var(--google-blue-500));
     }
 
     .label-circle {
@@ -97,13 +134,13 @@
     }
 
     iron-icon {
-      --iron-icon-width:  var(--ud-stepper-icon-size);
-      --iron-icon-height:  var(--ud-stepper-icon-size);
+      --iron-icon-width: var(--ud-stepper-icon-size);
+      --iron-icon-height: var(--ud-stepper-icon-size);
       margin-bottom: 4px;
     }
 
     .label-text {
-      @apply --paper-font-body1;
+      /*@apply --paper-font-body1;*/
       padding-left: 8px;
       color: rgba(0, 0, 0, 0.54);
     }
@@ -119,42 +156,42 @@
     }
 
 
-    :host(:not([vertical])) .header:hover,  
-    :host(:not([vertical])) .header[selected] {
+    :host(:not([vertical])) .header:hover,
+    :host(:not([vertical])) .header[aria-selected] {
       overflow: visible;
     }
 
     :host(:not([vertical])) .header:hover .label-text .main,
-    :host(:not([vertical])) .header[selected] .label-text .main 
-    {
+    :host(:not([vertical])) .header[aria-selected] .label-text .main {
       max-width: fit-content;
     }
 
-    .header[completed] .label-circle {
+    .header[aria-checked] .label-circle {
       background-color: var(--ud-stepper-icon-completed-color, var(--google-blue-500));
     }
-    .header.selected .label-circle   {
+
+    .header[aria-selected] .label-circle {
       background-color: var(--ud-stepper-icon-selected-color, var(--google-blue-500));
     }
 
-    .header.selected .label-text,
-    .header[completed] .label-text {
+    .header[aria-selected] .label-text,
+    .header[aria-checked] .label-text {
       color: rgba(0, 0, 0, 0.87);
     }
-    
-    .header.selected .label-text {
+
+    .header[aria-selected] .label-text {
       @apply --paper-font-body2;
     }
 
-    .header[error] .label-circle {
+    .header[aria-invalid] .label-circle {
       background-color: var(--ud-stepper-icon-error-color, var(--paper-deep-orange-a700));
     }
-    .header[error] .label-text {
+
+    .header[aria-invalid] .label-text {
       color: var(--ud-stepper-icon-error-color, var(--paper-deep-orange-a700));
     }
 
-    .step-number {
-    }
+    .step-number {}
 
     .header.selected .step-number {
       background-color: var(--ud-stepper-icon-selected-color, var(--google-blue-500));
@@ -208,7 +245,7 @@
       left: 6px;
       margin-top: -10px;
       margin-bottom: -16px;
-      background-color: rgba(0, 0, 0, 0.1);
+      background-color: rgba(0, 0, 0, 0.3);
     }
 
     :host([vertical]) .header .label {
@@ -246,61 +283,46 @@
     vertical-step ::slotted(ud-step:not([selected])) {
       display: none;
     }
+
     </style>
-    <iron-selector id="selector" class="header-container" selectable=".header.selectable" selected-class="selected" selected="{{selected}}" on-iron-activate="_handleStepActivate" selected-attribute="selected">
-      <dom-repeat items="[[_steps]]" mutable-data>
-        <template>
-          <div class="header selectable" completed$="[[item.completed]]" error$="[[item.error]]">
-            <div class="label">
-              <div class="label-circle">
-                <dom-if if="[[item._currentIcon]]">
-                  <template>
-                    <iron-icon icon="[[item._currentIcon]]"></iron-icon>
-                  </template>
-                </dom-if>
-                <dom-if if="[[!item._currentIcon]]">
-                  <template>
-                    <div class="step-number">[[_getStepNumber(index)]]</div>
-                  </template>
-                </dom-if>
-              </div>
-              <div class="label-text">
-                <div class="main">[[item.title]]</div>
-                <div class="summary">[[item.summary]]</div>
-                <dom-if if="[[item.optional]]">
-                  <template>
-                    <div class="optional">[[item.optionalText]]</div>
-                  </template>
-                </dom-if>
-              </div>
+    <div class="header-container" role="tablist">
+      <template is="dom-repeat" items="[[_steps]]" mutable-data>
+        <ud-stepper-button class="header selectable" role="tab" aria-checked$="[[item.completed]]" aria-disabled$="[[item.disabled]]" aria-invalid$="[[item.error]]">
+          <div class="label">
+            <div class="label-circle">
+              <template is="dom-if" if="[[item._currentIcon]]">
+                <iron-icon icon="[[item._currentIcon]]"></iron-icon>
+              </template>
+              <template is="dom-if" if="[[!item._currentIcon]]">
+                <div class="step-number">[[_getStepNumber(index)]]</div>
+              </template>
             </div>
-            <dom-if if="[[vertical]]" restamp>
-              <template>
-                <div class="vertical-step step-container" visible$="[[item.selected]]">
-                  <slot name="slot[[index]]"></slot>
-                </div>
+            <div class="label-text">
+              <div class="main">[[item.title]]</div>
+              <div class="summary">[[item.summary]]</div>
+              <template is="dom-if" if="[[item.optional]]">
+                <div class="optional">[[item.optionalText]]</div>
               </template>
-            </dom-if>
+            </div>
           </div>
-        </template>
-      </dom-repeat>
-    </iron-selector>
-    <dom-if if="[[!vertical]]" restamp>
-      <template>
-        <dom-if if="[[animate]]" restamp>
-          <template>
-            <neon-animated-pages id="pageContainer" selected="[[selected]]" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
-              <slot name="horizontal"></slot>
-            </neon-animated-pages>
-          </template>
-        </dom-if>
-        <dom-if if="[[!animate]]" restamp>
-          <template>
-            <slot name="horizontal"></slot>
+          <template is="dom-if" if="[[vertical]]" restamp>
+            <div class="vertical-step step-container" visible$="[[item.selected]]">
+              <slot name$="slot[[index]]"></slot>
+            </div>
           </template>
-        </dom-if>
+        </ud-stepper-button>
       </template>
-    </dom-if>
+    </div>
+    <template is="dom-if" if="[[!vertical]]" restamp>
+      <template is="dom-if" if="[[animate]]" restamp>
+        <neon-animated-pages id="pageContainer" selected="[[selected]]" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
+          <slot name="horizontal"></slot>
+        </neon-animated-pages>
+      </template>
+      <template is="dom-if" if="[[!animate]]" restamp>
+        <slot name="horizontal"></slot>
+      </template>
+    </template>
   </template>
   <script>
   {
@@ -324,12 +346,24 @@
      * `--ud-stepper-selected-header-background` | The color of a selected header label  | `--google-grey-300`
      * `--ud-stepper-selected-header` | Style mixin for selected header | `{}`
      *
+     * ### Accesibility
+     *
+     * As the stepper inherits from IronMenubarBehavior, it can be navigated through keyboard. 
+     * Role of header is `tablist`, each stepper button has a `tab` role.
+     * When a step is completed, `aria-checked` of its corresponding button is set to true. 
+     * Steps not accesible have `aria-disabled` set to true. 
+     * `aria-invalid` is set to true when a step has an error.
+     *
      * @customElement
      * @polymer
      * @memberof UrDeveloper
      * @demo demo/index.html
      */
-    class UdStepperElement extends Polymer.MutableData(Polymer.Element) {
+    class UdStepperElement extends
+    Polymer.mixinBehaviors(Polymer.IronMenubarBehavior,
+      Polymer.MutableData(
+        Polymer.Element)) {
+
       static get is() {
         return 'ud-stepper';
       }
@@ -402,18 +436,32 @@
           containerHeight: {
             type: Number
           },
+
+          selectable: {
+            type: String,
+            value: '.header.selectable'
+          },
+
+          selectedAttribute: {
+            type: String,
+            value: 'active'
+          }
         };
       }
 
       static get observers() {
         return [
-          '_setSlotNames(_steps,vertical)',
+          '_setSlotNames(_steps, vertical)',
           '_setHeight(sizing, containerHeight, vertical, animate)'
         ];
       }
 
-      constructor() {
-        super();
+      connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('step-action', evt => this._handleStepAction(evt));
+        this.addEventListener('step-error', evt => this.notifyPath('_steps'));
+        // this.addEventListener('iron-activate', evt => this._handleStepActivate(evt));
+
         this._templateObserver = new Polymer.FlattenedNodesObserver(this, info => {
           if (info.addedNodes.filter(this._isStep).length > 0 ||
             info.removedNodes.filter(this._isStep).length > 0) {
@@ -421,23 +469,26 @@
             this._prepareSteps(this._steps);
             Polymer.RenderStatus.afterNextRender(this, () => {
               this._setHeight(this.sizing, this._maxHeight, this.vertical, this.animate);
+              const items = this.shadowRoot.querySelectorAll(this.selectable)
+              this._setItems([...items]);
+              if (!this.selected) {
+                this.selected = 0;
+              }
+              // Note(cg): without call to _selectionChanges,  selected step is not marked as selected.
+              this._selectionChanged(this.selected);
             });
 
-            if (!this.selected) {
-              this.selected = 0;
-            }
-            // Note(cg): without call to _selectionChanges,  selected step is not marked as selected.
-            this._selectionChanged(this.selected);
           }
         });
       }
 
-      ready() {
-        super.ready();
-        this.addEventListener('step-action', evt => this._handleStepAction(evt));
-        this.addEventListener('step-error', evt => {
-          this.notifyPath('_steps');
-        });
+      disconnectedCallback() {
+        super.disconnectedCallback();
+        this._templateObserver.disconnect();
+      }
+
+      // @override menubarbehavior. we do not want to activate menu search 
+      _focusWithKeyboardEvent() {
       }
 
       _findSteps() {
@@ -449,6 +500,7 @@
         steps.forEach((step, i) => {
           //don't overwrite the step's actions, if they're already set
           if (step.actions) return;
+          step.disabled = i !== 0;
 
           //By default all steps have continue and cancel action
           const actions = [{
@@ -471,12 +523,13 @@
           }
           step.actions = actions;
 
+
           const stepHeight = parseInt(getComputedStyle(step).height);
           if (stepHeight > maxHeight) {
             maxHeight = stepHeight;
           }
         });
-        if(this.sizing === 'contain') {
+        if (this.sizing === 'contain') {
           this.containerHeight = maxHeight;
         }
       }
@@ -543,6 +596,11 @@
       continue (step) {
         if (this.linear && step.error) return;
         step.completed = true;
+        // Note(cg): reset disabled to true if not editable or alwaysSelectable
+        // step was marked as displabled = false on _selectionChanged.
+        if (!(step.alwaysSelectable || step.editable)) {
+          step.disabled = true;
+        }
         this.notifyPath('_steps');
         this.selected = this._findNextStep(this.selected);
       }
@@ -587,7 +645,8 @@
         this.animate = !this.animate;
       }
 
-      _handleStepActivate(evt) {
+      // @overide iron-menutab-behavior
+      _activateHandler(e) {
         /*
          * the logic here:
          * User is allowed to select any step if stepper is not linear
@@ -596,16 +655,21 @@
          *  - allow user to revist an optional step as long as is not completed
          *  - bypass this logic for `always-selectable`
          */
-        if (this.linear) {
-          const step = this._steps[evt.detail.selected];
-          if (!step) return;
-          if ((step.completed && step.editable) || (!step.completed && step.optional) || step.alwaysSelectable) {
+        const tap = e.composedPath().find(el => el.role === 'tab');
+        const index = this.items.indexOf(tap);
+        const step = this._steps[index];
+        if (step && index > -1) {
+          e.stopPropagation();
+          // e.preventDefault();
+          console.info('handle', step, step.disabled);
+          if (this.linear) {
+            // if ((step.completed && step.editable) || (!step.completed && step.optional) || step.alwaysSelectable) {
+            if (!step.disabled) {
+              this._itemActivate(index, step);
+            }
             return;
           }
-          // Only call preventDefault() if the event comes from our own iron-selector
-          if (evt.target.id === "selector" && evt.target.selectable === ".header.selectable") {
-            evt.preventDefault();
-          }
+          this._itemActivate(index, step);
         }
       }
 
@@ -620,6 +684,10 @@
         if (!this._steps) return;
         this._steps.forEach((step, i) => {
           step.selected = i == selected;
+          if (i === selected) {
+            step.disabled = false;
+            setTimeout(() => {step.setFocus()}, this.animate ? 500 : 0);
+          }
         });
       }
 
@@ -638,5 +706,6 @@
     window.UrDeveloper = window.UrDeveloper || {};
     UrDeveloper.UdStepperElement = UdStepperElement;
   }
+
   </script>
 </dom-module>