Pressing the stepper actions, skipToMain, or the stepper will focus the form title

abelsiqueira · abelsiqueira · commit e1c85a1face8 · 2022-11-21T14:39:39.000+01:00
diff --git a/src/components/LayoutStepper.vue b/src/components/LayoutStepper.vue
@@ -39,14 +39,13 @@
                         <aside
                             class="col-auto gt-xs"
                             id="stepper"
-                            tabindex="0"
+                            tabindex="-1"
                         >
                             <Stepper />
                         </aside>
                         <form
                             class="col column"
                             id="form"
-                            tabindex="0"
                         >
                             <div id="form-content">
                                 <router-view />
@@ -159,7 +158,7 @@ export default defineComponent({
             isPreviewDrawer: computed(() => q.screen.sm || q.screen.md),
             isMainConnected: computed(() => q.screen.xs || q.screen.sm),
             skipLinks: [
-                { id: 'form', where: 'main content' },
+                { id: 'form-title', where: 'main content' },
                 { id: 'stepper', where: 'stepper navigation' }
             ],
             skipToMainFocused: ref(false),
diff --git a/src/components/ScreenAbstract.vue b/src/components/ScreenAbstract.vue
@@ -1,5 +1,8 @@
 <template>
-    <h1 id="form-title">
+    <h1
+        id="form-title"
+        tabindex="-1"
+    >
         Abstract
     </h1>
 
diff --git a/src/components/ScreenAuthors.vue b/src/components/ScreenAuthors.vue
@@ -1,5 +1,8 @@
 <template>
-    <h1 id="form-title">
+    <h1
+        id="form-title"
+        tabindex="-1"
+    >
         Authors
     </h1>
 
diff --git a/src/components/ScreenFinish.vue b/src/components/ScreenFinish.vue
@@ -2,12 +2,14 @@
     <h1
         id="form-title"
         v-if="isValidCFF"
+        tabindex="-1"
     >
         Congratulations
     </h1>
     <h1
         id="form-title"
         v-else
+        tabindex="-1"
     >
         Uh-oh!
     </h1>
diff --git a/src/components/ScreenIdentifiers.vue b/src/components/ScreenIdentifiers.vue
@@ -1,5 +1,8 @@
 <template>
-    <h1 id="form-title">
+    <h1
+        id="form-title"
+        tabindex="-1"
+    >
         Identifiers
     </h1>
 
diff --git a/src/components/ScreenKeywords.vue b/src/components/ScreenKeywords.vue
@@ -1,5 +1,8 @@
 <template>
-    <h1 id="form-title">
+    <h1
+        id="form-title"
+        tabindex="-1"
+    >
         Keywords
     </h1>
 
diff --git a/src/components/ScreenLicense.vue b/src/components/ScreenLicense.vue
@@ -1,5 +1,8 @@
 <template>
-    <h1 id="form-title">
+    <h1
+        id="form-title"
+        tabindex="-1"
+    >
         License
     </h1>
 
diff --git a/src/components/ScreenRelatedResources.vue b/src/components/ScreenRelatedResources.vue
@@ -1,5 +1,8 @@
 <template>
-    <h1 id="form-title">
+    <h1
+        id="form-title"
+        tabindex="-1"
+    >
         Related resources
     </h1>
 
diff --git a/src/components/ScreenStart.vue b/src/components/ScreenStart.vue
@@ -1,5 +1,8 @@
 <template>
-    <h1 id="form-title">
+    <h1
+        id="form-title"
+        tabindex="-1"
+    >
         Start
     </h1>
 
@@ -40,7 +43,7 @@
         </template>
     </q-input>
     <q-input
-        aria-label="`Title of the ${ type }. Press tab to reach help button.`"
+        aria-label="Personalized message. Leave blank to use default. Press tab to reach help button."
         data-cy="input-message"
         label="Personalized message. Leave blank to use default"
         outlined
diff --git a/src/components/ScreenVersionSpecific.vue b/src/components/ScreenVersionSpecific.vue
@@ -1,5 +1,8 @@
 <template>
-    <h1 id="form-title">
+    <h1
+        id="form-title"
+        tabindex="-1"
+    >
         Version specific
     </h1>
 
diff --git a/src/components/StepperActions.vue b/src/components/StepperActions.vue
@@ -22,6 +22,7 @@
             no-caps
             to="/finish"
             v-bind:class="!showAdvanced || cannotGoForward ? 'hidden' : ''"
+            v-on:click="setStepName('finish')"
         />
         <q-btn
             aria-label="Next page"
@@ -45,14 +46,15 @@ export default defineComponent({
     name: 'StepperActions',
 
     setup () {
-        const { showAdvanced, cannotGoBack, cannotGoForward, navigateNext, navigatePrevious } = useApp()
+        const { cannotGoBack, cannotGoForward, navigateNext, navigatePrevious, setStepName, showAdvanced } = useApp()
 
         return {
             cannotGoBack,
             cannotGoForward,
-            showAdvanced,
             navigateNext,
-            navigatePrevious
+            navigatePrevious,
+            setStepName,
+            showAdvanced
         }
     }
 
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -36,9 +36,6 @@ export default route((/* { store, ssrContext } */) => {
     Router.beforeEach((to) => {
         const { navigateDirect } = useApp()
         const newStepName = to.path.replace('/', '') as StepNameType
-        document.body.setAttribute('tabindex', '-1')
-        document.body.focus()
-        document.body.removeAttribute('tabindex')
         navigateDirect(newStepName)
     })
     return Router
diff --git a/src/store/app.ts b/src/store/app.ts
@@ -38,6 +38,11 @@ const stepName = computed(() => stepNames.value[state.value.stepIndex])
 
 export const useApp = () => {
     const router = useRouter()
+    const focusFormTitle = () => {
+        const element = window.document.getElementById('form-title')
+        if (!element) return
+        element.focus()
+    }
     return {
         cannotGoBack: computed(() => state.value.stepIndex === firstStepIndex),
         cannotGoForward: computed(() => state.value.stepIndex === lastStepIndex.value),
@@ -58,17 +63,20 @@ export const useApp = () => {
         setStepName: async (newStepName: StepNameType) => {
             state.value.stepIndex = stepNames.value.indexOf(newStepName)
             await router.push({ path: `/${stepName.value}` })
+            focusFormTitle()
         },
         navigateNext: async () => {
             if (state.value.stepIndex < lastStepIndex.value) {
                 state.value.stepIndex++
                 await router.push({ path: `/${stepName.value}` })
+                focusFormTitle()
             }
         },
         navigatePrevious: async () => {
             if (state.value.stepIndex > firstStepIndex) {
                 state.value.stepIndex--
                 await router.push({ path: `/${stepName.value}` })
+                focusFormTitle()
             }
         },
         setShowAdvanced: (newShowAdvanced: boolean) => { state.value.showAdvanced = newShowAdvanced }
