From c7629bf3bb8b4883f0755bce22290adc1ea1dd4f Mon Sep 17 00:00:00 2001
From: christophe-g <christophe.geiser@gmail.com>
Date: Fri, 11 Jan 2019 10:03:27 +0100
Subject: [PATCH 1/9] improve label contrast

---
 ud-stepper.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ud-stepper.html b/ud-stepper.html
index 1a67244..599e7ba 100644
--- a/ud-stepper.html
+++ b/ud-stepper.html
@@ -58,7 +58,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 +68,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 {
@@ -208,7 +208,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 {

From 763a2dc29468366ae1ed44f557988c6995e0d5cb Mon Sep 17 00:00:00 2001
From: christophe-g <christophe.geiser@gmail.com>
Date: Fri, 11 Jan 2019 10:09:23 +0100
Subject: [PATCH 2/9] typo

---
 ud-step.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ud-step.html b/ud-step.html
index 75c71a5..95594e6 100644
--- a/ud-step.html
+++ b/ud-step.html
@@ -135,7 +135,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,

From 0baf15f33c36cbcf84b1763a990a3d9e563d59dd Mon Sep 17 00:00:00 2001
From: christophe-g <christophe.geiser@gmail.com>
Date: Tue, 26 May 2020 16:46:08 +0200
Subject: [PATCH 3/9] added background color on focus button

---
 ud-step.html | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/ud-step.html b/ud-step.html
index 95594e6..9c97dcc 100644
--- a/ud-step.html
+++ b/ud-step.html
@@ -55,6 +55,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>

From 7d5bda73b118ae688104274de3f049cad7548278 Mon Sep 17 00:00:00 2001
From: christophe-g <christophe.geiser@gmail.com>
Date: Wed, 27 May 2020 17:11:39 +0200
Subject: [PATCH 4/9] Make stepper accessible

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 accessible have `aria-disabled` set to true.

`aria-invalid` is set to true when a step has an error.
---
 bower.json      |   4 +-
 demo/index.html |   4 +-
 ud-step.html    |  13 +++--
 ud-stepper.html | 150 +++++++++++++++++++++++++++++++++++-------------
 4 files changed, 122 insertions(+), 49 deletions(-)

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 9c97dcc..c769cc5 100644
--- a/ud-step.html
+++ b/ud-step.html
@@ -41,7 +41,6 @@
 
     paper-button,
     #actions ::slotted(paper-button) {
-      @apply --paper-font-button;
       color: rgba(0, 0, 0, 0.83);
     }
 
@@ -249,10 +248,6 @@
         return ['_updateActionsButtons(_actionButtons.*,_linearActionButtons.*,actions.*)'];
       }
 
-      ready() {
-        super.ready();
-      }
-
       connectedCallback() {
         super.connectedCallback();
         if (this.hideActions) return;
@@ -311,7 +306,7 @@
       _errorChanged(invalid) {
         this.dispatchEvent(new CustomEvent('step-error', {
           detail: {
-            stpe: this
+            step: this
           },
           bubbles: true
         }));
@@ -320,6 +315,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 599e7ba..92bb2f6 100644
--- a/ud-stepper.html
+++ b/ud-stepper.html
@@ -6,11 +6,40 @@
 <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">
@@ -45,7 +74,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;
     }
@@ -120,36 +149,36 @@
 
 
     :host(:not([vertical])) .header:hover,  
-    :host(:not([vertical])) .header[selected] {
+    :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));
     }
 
@@ -247,10 +276,10 @@
       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">
+    <div class="header-container" role="tablist">
       <dom-repeat items="[[_steps]]" mutable-data>
         <template>
-          <div class="header selectable" completed$="[[item.completed]]" error$="[[item.error]]">
+          <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">
                 <dom-if if="[[item._currentIcon]]">
@@ -281,10 +310,10 @@
                 </div>
               </template>
             </dom-if>
-          </div>
+          </ud-stepper-button>
         </template>
       </dom-repeat>
-    </iron-selector>
+    </div>
     <dom-if if="[[!vertical]]" restamp>
       <template>
         <dom-if if="[[animate]]" restamp>
@@ -324,12 +353,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,6 +443,16 @@
           containerHeight: {
             type: Number
           },
+
+          selectable: {
+            type: String, 
+            value: '.header.selectable'
+          },
+
+          selectedAttribute: {
+            type: String, 
+            value: 'active'
+          }
         };
       }
 
@@ -412,8 +463,12 @@
         ];
       }
 
-      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 +476,22 @@
             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();
       }
 
       _findSteps() {
@@ -449,6 +503,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,6 +526,7 @@
           }
           step.actions = actions;
 
+
           const stepHeight = parseInt(getComputedStyle(step).height);
           if (stepHeight > maxHeight) {
             maxHeight = stepHeight;
@@ -543,6 +599,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 +648,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,19 +658,23 @@
          *  - 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();
+          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);
         }
       }
-
+      
       _setSlotNames(steps, vertical) {
         if (!this._steps) return;
         steps.forEach((step, i) => {
@@ -620,6 +686,10 @@
         if (!this._steps) return;
         this._steps.forEach((step, i) => {
           step.selected = i == selected;
+          if (i === selected) {
+            step.disabled = false;
+            step.setFocus();
+          }
         });
       }
 

From 58883bde94d603fc85f7c2857a156facc11ebafb Mon Sep 17 00:00:00 2001
From: christophe-g <christophe.geiser@gmail.com>
Date: Wed, 27 May 2020 19:24:42 +0200
Subject: [PATCH 5/9] simplify template

---
 ud-stepper.html | 148 ++++++++++++++++++++++--------------------------
 1 file changed, 68 insertions(+), 80 deletions(-)

diff --git a/ud-stepper.html b/ud-stepper.html
index 92bb2f6..028f166 100644
--- a/ud-stepper.html
+++ b/ud-stepper.html
@@ -11,16 +11,15 @@
 <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>
+  <!--  <template>
     <style>
       host: {
         display: block
       }
     </style>
     <slot></slot>
-  </template>
+  </template> -->
   <script>
   (function() {
     /**
@@ -28,18 +27,17 @@
      *  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) {
+    class UdStepperButton extends
+    Polymer.mixinBehaviors(Polymer.IronButtonState, Polymer.Element) {
       static get is() {
         return 'ud-stepper-button';
       }
     }
-     customElements.define(UdStepperButton.is, UdStepperButton);
+    customElements.define(UdStepperButton.is, UdStepperButton);
   })();
-    
+
   </script>
 </dom-module>
-
 <dom-module id="ud-stepper">
   <template>
     <style include="paper-material-styles">
@@ -50,7 +48,7 @@
       --ud-stepper-circle-size: 30px;
       --ud-stepper-icon-size: 18px;
     }
-  
+
     #pageContainer {
       min-height: var(--ud-stepper-container-min-height);
     }
@@ -109,8 +107,11 @@
       padding: 24px 24px 24px 24px;
     }
 
-    .header:hover {
+    .header:hover,
+    .header:focus {
       background-color: var(--google-grey-100);
+      font-weight: 500;
+      /*outline: none;*/
     }
 
     .label-circle {
@@ -126,13 +127,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);
     }
@@ -148,21 +149,21 @@
     }
 
 
-    :host(:not([vertical])) .header:hover,  
+    :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[aria-selected] .label-text .main 
-    {
+    :host(:not([vertical])) .header[aria-selected] .label-text .main {
       max-width: fit-content;
     }
 
     .header[aria-checked] .label-circle {
       background-color: var(--ud-stepper-icon-completed-color, var(--google-blue-500));
     }
-    .header[aria-selected] .label-circle   {
+
+    .header[aria-selected] .label-circle {
       background-color: var(--ud-stepper-icon-selected-color, var(--google-blue-500));
     }
 
@@ -170,7 +171,7 @@
     .header[aria-checked] .label-text {
       color: rgba(0, 0, 0, 0.87);
     }
-    
+
     .header[aria-selected] .label-text {
       @apply --paper-font-body2;
     }
@@ -178,12 +179,12 @@
     .header[aria-invalid] .label-circle {
       background-color: var(--ud-stepper-icon-error-color, var(--paper-deep-orange-a700));
     }
+
     .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));
@@ -275,61 +276,46 @@
     vertical-step ::slotted(ud-step:not([selected])) {
       display: none;
     }
+
     </style>
     <div class="header-container" role="tablist">
-      <dom-repeat items="[[_steps]]" mutable-data>
-        <template>
-          <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">
-                <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>
+      <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>
-          </ud-stepper-button>
-        </template>
-      </dom-repeat>
-    </div>
-    <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>
+            </div>
+          </div>
+          <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>
   {
@@ -366,10 +352,10 @@
      * @memberof UrDeveloper
      * @demo demo/index.html
      */
-    class UdStepperElement extends 
+    class UdStepperElement extends
     Polymer.mixinBehaviors(Polymer.IronMenubarBehavior,
       Polymer.MutableData(
-          Polymer.Element)) {
+        Polymer.Element)) {
 
       static get is() {
         return 'ud-stepper';
@@ -445,12 +431,12 @@
           },
 
           selectable: {
-            type: String, 
+            type: String,
             value: '.header.selectable'
           },
 
           selectedAttribute: {
-            type: String, 
+            type: String,
             value: 'active'
           }
         };
@@ -458,7 +444,7 @@
 
       static get observers() {
         return [
-          '_setSlotNames(_steps,vertical)',
+          '_setSlotNames(_steps, vertical)',
           '_setHeight(sizing, containerHeight, vertical, animate)'
         ];
       }
@@ -468,7 +454,7 @@
         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) {
@@ -487,7 +473,7 @@
 
           }
         });
-      } 
+      }
 
       disconnectedCallback() {
         super.disconnectedCallback();
@@ -532,7 +518,7 @@
             maxHeight = stepHeight;
           }
         });
-        if(this.sizing === 'contain') {
+        if (this.sizing === 'contain') {
           this.containerHeight = maxHeight;
         }
       }
@@ -603,7 +589,7 @@
         // 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);
       }
@@ -663,8 +649,9 @@
         const step = this._steps[index];
         if (step && index > -1) {
           e.stopPropagation();
+          // e.preventDefault();
           console.info('handle', step, step.disabled);
-          if(this.linear) {
+          if (this.linear) {
             // if ((step.completed && step.editable) || (!step.completed && step.optional) || step.alwaysSelectable) {
             if (!step.disabled) {
               this._itemActivate(index, step);
@@ -674,7 +661,7 @@
           this._itemActivate(index, step);
         }
       }
-      
+
       _setSlotNames(steps, vertical) {
         if (!this._steps) return;
         steps.forEach((step, i) => {
@@ -708,5 +695,6 @@
     window.UrDeveloper = window.UrDeveloper || {};
     UrDeveloper.UdStepperElement = UdStepperElement;
   }
+
   </script>
 </dom-module>

From aebc1f3a133abc6c7d7c1bfbfe2dba64c3e410fe Mon Sep 17 00:00:00 2001
From: christophe-g <christophe.geiser@gmail.com>
Date: Wed, 27 May 2020 20:03:50 +0200
Subject: [PATCH 6/9] Set focus after animation

---
 ud-stepper.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/ud-stepper.html b/ud-stepper.html
index 028f166..c71a6e5 100644
--- a/ud-stepper.html
+++ b/ud-stepper.html
@@ -307,14 +307,14 @@
       </template>
     </div>
     <template is="dom-if" if="[[!vertical]]" restamp>
-      <!-- <template is="dom-if" if="[[animate]]" 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>
+      </template>
+      <template is="dom-if" if="[[!animate]]" restamp>
         <slot name="horizontal"></slot>
-      </template> -->
+      </template>
     </template>
   </template>
   <script>
@@ -675,7 +675,7 @@
           step.selected = i == selected;
           if (i === selected) {
             step.disabled = false;
-            step.setFocus();
+            setTimeout(() => {step.setFocus()}, this.animate ? 500 : 0);
           }
         });
       }

From ceaea3f6cb435d17c84b70d677a5c76a9a19adb2 Mon Sep 17 00:00:00 2001
From: christophe-g <christophe.geiser@gmail.com>
Date: Tue, 2 Jun 2020 11:12:52 +0200
Subject: [PATCH 7/9] improved visual appearance of focus

---
 ud-step.html    | 4 ++++
 ud-stepper.html | 9 ++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/ud-step.html b/ud-step.html
index c769cc5..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;
diff --git a/ud-stepper.html b/ud-stepper.html
index c71a6e5..56c9a2b 100644
--- a/ud-stepper.html
+++ b/ud-stepper.html
@@ -111,7 +111,14 @@
     .header:focus {
       background-color: var(--google-grey-100);
       font-weight: 500;
-      /*outline: none;*/
+      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 {

From 7ac0a335808b22ca117f784b0a9900088db8907b Mon Sep 17 00:00:00 2001
From: christophe-g <christophe.geiser@gmail.com>
Date: Tue, 2 Jun 2020 11:15:02 +0200
Subject: [PATCH 8/9] disabled search menu item by keyboard as blurs stepper
 behavior.

---
 ud-stepper.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/ud-stepper.html b/ud-stepper.html
index 56c9a2b..6776436 100644
--- a/ud-stepper.html
+++ b/ud-stepper.html
@@ -487,6 +487,10 @@
         this._templateObserver.disconnect();
       }
 
+      // @override menubarbehavior. we do not want to activate menu search 
+      _focusWithKeyboardEvent() {
+      }
+
       _findSteps() {
         return Array.from(this.querySelectorAll('ud-step'));
       }

From 56062278e445cb105cb59e94ae7b4084801e98b3 Mon Sep 17 00:00:00 2001
From: christophe-g <christophe.geiser@gmail.com>
Date: Thu, 9 Jul 2020 14:28:25 +0200
Subject: [PATCH 9/9] Makes sure we avoid aria-attribute to appear as
 aria-checked="false"

---
 ud-stepper.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ud-stepper.html b/ud-stepper.html
index 6776436..7890123 100644
--- a/ud-stepper.html
+++ b/ud-stepper.html
@@ -287,7 +287,7 @@
     </style>
     <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]]">
+        <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]]">