Allow tabbing through tutorial steps

src/components/Tutorial/SectionSteps.vue

@@ -19,6 +19,7 @@
         :key="index"
         :currentIndex="activeStep"
         ref="contentNodes"
+        @focus="onFocus"
       />
     </div>
     <!-- the asset-container is only for medium and large breakpoints -->

src/components/Tutorial/Step.vue

@@ -9,7 +9,7 @@
 -->
 
 <template>
-  <div :class="['step-container', `step-${stepNumber}`]">
+  <div :class="['step-container', `step-${stepNumber}`]" tabindex="0" @focus="onFocus">
     <div
       ref="step"
       class="step"
@@ -117,6 +117,21 @@ export default {
     },
     isActive: ({ index, currentIndex }) => index === currentIndex,
   },
+  methods: {
+    onFocus() {
+      if (this.isClientMobile) return;
+      const bodyRect = document.body.getBoundingClientRect().top;
+      const elementRect = this.$el.getBoundingClientRect().top;
+      const elementPosition = elementRect - bodyRect;
+      // make sure the element is at the top 25% of the screen
+      const offsetPosition = elementPosition - (window.innerHeight * 0.25);
+
+      // scroll to the element
+      window.scrollTo({ top: offsetPosition, behavior: 'smooth' });
+      // notify the parent it must be in focus, if for some reason it is not.
+      this.$emit('focus', this.index);
+    },
+  },
 };
 </script>