Merge pull request #783 from citation-file-format/670-tab

Author: abelsiqueira

.github/workflows/test.yml

@@ -28,6 +28,12 @@ jobs:
       with:
         start: npm run dev
         wait-on: 'http://localhost:8080/cff-initializer-javascript/#'
+    - name: Upload Screenshot of Cypress when errors occur
+      if: failure()
+      uses: actions/upload-artifact@v3
+      with:
+        name: cypress-screenshots
+        path: cypress/screenshots
     - name: Code coverage
       uses: codecov/codecov-action@v3
       with:

src/components/IdentifierCardEditing.vue

@@ -6,11 +6,12 @@
     >
         <q-card-section class="q-gutter-md">
             <fieldset
+                id="radiogroup"
                 role="radiogroup"
+                tabindex="0"
             >
                 <legend>
                     What type of identifier?
-                    <!-- <InfoDialog name="type" /> -->
                 </legend>
                 <label
                     v-for="typeOption in typeOptions"
@@ -27,7 +28,6 @@
             </fieldset>
 
             <q-input
-                autofocus
                 data-cy="input-value"
                 dense
                 outlined

src/components/LayoutStepper.vue

@@ -5,16 +5,21 @@
             id="header"
             class="text-black"
         >
-            <a
-                class="skip-to-main-content-link"
-                href="#main"
+            <div
                 id="skipToMain"
-                v-on:blur="skipToMainFocused = false"
-                v-on:click.prevent="focusMain"
-                v-on:focus="skipToMainFocused = true"
             >
-                Skip to main content
-            </a>
+                <a
+                    v-for="skipLink in skipLinks"
+                    class="skip-to-main-content-link"
+                    v-bind:key="skipLink.id"
+                    v-bind:href="`#${skipLink.id}`"
+                    v-on:blur="skipToMainFocused = false"
+                    v-on:click.prevent="focusElement(skipLink.id)"
+                    v-on:focus="skipToMainFocused = true"
+                >
+                    Skip to {{ skipLink.where }}
+                </a>
+            </div>
             <Header
                 v-bind:show-open-preview-button="isPreviewDrawer"
             />
@@ -24,20 +29,24 @@
             <q-page
                 id="main"
                 role="main"
-                tabindex="0"
                 v-bind:class="isMainConnected ? '' : 'q-pa-md'"
             >
                 <div v-bind:class="['row', 'justify-center', isMainConnected ? '' : 'q-pa-md q-ml-auto']">
                     <div
                         id="main-block"
                         v-bind:class="['row', 'col', 'bg-white', 'q-pa-md', isMainConnected ? '' : 'elevated rounded-borders q-mx-lg']"
                     >
-                        <aside class="col-auto gt-xs">
+                        <aside
+                            class="col-auto gt-xs"
+                            id="stepper"
+                            tabindex="0"
+                        >
                             <Stepper />
                         </aside>
-                        <div
-                            id="form"
+                        <form
                             class="col column"
+                            id="form"
+                            tabindex="0"
                         >
                             <div id="form-content">
                                 <router-view />
@@ -60,7 +69,7 @@
                                 no-caps
                                 v-on:click="togglePreview"
                             />
-                        </div>
+                        </form>
                     </div>
                     <component
                         v-if="!isOnlyForm"
@@ -136,8 +145,8 @@ export default defineComponent({
             isPreviewDrawerOpen.value = false
         }
         return {
-            focusMain: () => {
-                const element = window.document.getElementById('main')
+            focusElement: (id: string) => {
+                const element = window.document.getElementById(id)
                 if (!element) return
                 element.focus()
             },
@@ -149,6 +158,10 @@ export default defineComponent({
             isPreviewDrawerOpen,
             isPreviewDrawer: computed(() => q.screen.sm || q.screen.md),
             isMainConnected: computed(() => q.screen.xs || q.screen.sm),
+            skipLinks: [
+                { id: 'form', where: 'main content' },
+                { id: 'stepper', where: 'stepper navigation' }
+            ],
             skipToMainFocused: ref(false),
             onResize,
             togglePreview: () => {

src/components/ScreenIdentifiers.vue

@@ -94,6 +94,10 @@ export default defineComponent({
             editingId.value = newIdentifiers.length - 1
             // await the DOM update that resulted from updating the identifiers list
             await nextTick()
+            const radio = document.getElementById('radiogroup')
+            if (radio) {
+                radio.focus()
+            }
             scrollToBottom()
         }
         const removeIdentifier = (index: number) => {