From edc9562ceaf9116fe4d8ce7c055bb1253207d495 Mon Sep 17 00:00:00 2001
From: Dobromir Hristov <dhristov@apple.com>
Date: Wed, 15 Jun 2022 11:19:52 +0300
Subject: [PATCH] feat: allow tabbing through tutorial steps

---
 src/components/Tutorial/SectionSteps.vue |  1 +
 src/components/Tutorial/Step.vue         | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/Tutorial/SectionSteps.vue b/src/components/Tutorial/SectionSteps.vue
index 6d657d050..b31643c92 100644
--- a/src/components/Tutorial/SectionSteps.vue
+++ b/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 -->
diff --git a/src/components/Tutorial/Step.vue b/src/components/Tutorial/Step.vue
index 7b86a082e..f7f74c2fc 100644
--- a/src/components/Tutorial/Step.vue
+++ b/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>