Add aria-label to many places and remove wrong tabindex=-1

abelsiqueira · abelsiqueira · commit 3dc463758674 · 2022-10-27T12:37:35.000+02:00
diff --git a/src/components/AuthorCardEditing.vue b/src/components/AuthorCardEditing.vue
@@ -131,6 +131,7 @@
 
         <q-card-actions align="right">
             <q-btn
+                aria-label="Remove author being edited"
                 color="negative"
                 data-cy="btn-remove"
                 dense
diff --git a/src/components/AuthorCardViewing.vue b/src/components/AuthorCardViewing.vue
@@ -16,38 +16,40 @@
             <q-btn
                 class="author-button"
                 color="blue"
+                icon="ion-arrow-up"
+                v-bind:aria-label="`Move author ${index + 1} up`"
                 v-bind:data-cy="'btn-move-up' + index"
                 v-bind:disable="index == 0"
-                icon="ion-arrow-up"
-                tabindex="-1"
                 v-on:click="$emit('moveUp')"
             />
             <q-btn
                 class="author-button"
                 color="blue"
+                icon="ion-arrow-down"
+                v-bind:aria-label="`Move author ${index + 1} down`"
                 v-bind:data-cy="'btn-move-down' + index"
                 v-bind:disable="index >= numAuthors - 1"
-                icon="ion-arrow-down"
-                tabindex="-1"
                 v-on:click="$emit('moveDown')"
             />
             <q-btn
                 class="author-button"
                 color="primary"
-                v-bind:data-cy="'btn-edit' + index"
                 flat
                 hover-color="negative"
                 icon="edit"
                 title="Edit"
+                v-bind:aria-label="`Edit author ${index + 1}`"
+                v-bind:data-cy="'btn-edit' + index"
                 v-on:click="$emit('editPressed')"
             />
             <q-btn
                 class="author-button"
                 color="negative"
-                v-bind:data-cy="'btn-remove' + index"
                 hover-color="negative"
                 icon="delete"
                 title="Remove author"
+                v-bind:aria-label="`Remove author ${index + 1}`"
+                v-bind:data-cy="'btn-remove' + index"
                 v-on:click="$emit('removePressed')"
             />
         </div>
diff --git a/src/components/DownloadButton.vue b/src/components/DownloadButton.vue
@@ -1,13 +1,14 @@
 <template>
     <q-btn
+        aria-label="Download CITATION.cff"
         color="primary"
         data-cy="btn-download"
+        download="CITATION.cff"
         icon="download"
         label="Download"
         size="xl"
         no-caps
         type="a"
-        download="CITATION.cff"
         v-bind:href="downloadUrl"
         v-bind:class="q.platform.is.mobile ? 'full-width' : ''"
     />
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -7,6 +7,7 @@
             <a
                 href="https://esciencecenter.nl"
                 target="_blank"
+                aria-label="Netherlands eScience Center website (opens in a new tab)"
             >
                 <img src="~assets/nlesc-logo.svg">
             </a>
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -12,6 +12,7 @@
             type="a"
         />
         <q-btn
+            aria-label="Documentation of the CFF schema"
             color=""
             flat
             href="https://github.com/citation-file-format/citation-file-format/blob/1.2.0/schema-guide.md"
diff --git a/src/components/IdentifierCardViewing.vue b/src/components/IdentifierCardViewing.vue
@@ -16,7 +16,6 @@
                 class="identifier-button"
                 color="blue"
                 icon="ion-arrow-up"
-                tabindex="-1"
                 v-bind:aria-label="`Move identifier ${index + 1} up`"
                 v-bind:data-cy="'btn-move-up' + index"
                 v-bind:disable="index == 0"
@@ -26,7 +25,6 @@
                 class="identifier-button"
                 color="blue"
                 icon="ion-arrow-down"
-                tabindex="-1"
                 v-bind:aria-label="`Move identifier ${index + 1} down`"
                 v-bind:data-cy="'btn-move-down' + index"
                 v-bind:disable="index >= numIdentifiers - 1"
@@ -39,6 +37,7 @@
                 hover-color="negative"
                 icon="edit"
                 title="Edit"
+                v-bind:aria-label="`Edit identifier ${index + 1}`"
                 v-bind:data-cy="'btn-edit' + index"
                 v-on:click="$emit('editPressed')"
             />
@@ -48,6 +47,7 @@
                 hover-color="negative"
                 icon="delete"
                 title="Remove Identifier"
+                v-bind:aria-label="`Remove identifier ${index + 1}`"
                 v-bind:data-cy="'btn-remove' + index"
                 v-on:click="$emit('removePressed')"
             />
diff --git a/src/components/Keyword.vue b/src/components/Keyword.vue
@@ -20,7 +20,6 @@
             class="keyword-btn"
             color="blue"
             icon="ion-arrow-up"
-            tabindex="-1"
             v-bind:aria-label="`move keyword #${index + 1} up`"
             v-bind:data-cy="'btn-move-up' + index"
             v-bind:disable="index == 0"
@@ -30,7 +29,6 @@
             class="keyword-btn"
             color="blue"
             icon="ion-arrow-down"
-            tabindex="-1"
             v-bind:aria-label="`move keyword #${index + 1} down`"
             v-bind:data-cy="'btn-move-down' + index"
             v-bind:disable="index == numKeywords - 1"
@@ -41,7 +39,6 @@
             color="negative"
             dense
             icon="delete"
-            tabindex="-1"
             title="Remove"
             v-bind:aria-label="`remove keyword #${index + 1}`"
             v-bind:data-cy="'btn-remove' + index"
diff --git a/src/components/LayoutLanding.vue b/src/components/LayoutLanding.vue
@@ -38,6 +38,7 @@
                             Citation File Format</a> file
                     </div>
                     <q-btn
+                        aria-label="Create your CITATION.cff file"
                         class="start-button"
                         data-cy="btn-create"
                         label="Create"
diff --git a/src/components/Preview.vue b/src/components/Preview.vue
@@ -6,6 +6,7 @@
             hover-color="negative"
             flat
             icon="content_copy"
+            aria-label="copy to clipboard"
             v-bind:ripple="false"
             v-on:click="copyToClipboard"
         >
diff --git a/src/components/Stepper.vue b/src/components/Stepper.vue
@@ -15,6 +15,7 @@
         <q-step
             data-cy="step-start"
             name="start"
+            aria-label="Start"
             title="Start"
             v-bind:active-icon="errorStateScreenStart ? 'warning' : 'edit'"
             v-bind:error="errorStateScreenStart"
@@ -25,6 +26,7 @@
         <q-step
             data-cy="step-authors"
             name="authors"
+            aria-label="Authors"
             title="Authors"
             v-bind:active-icon="errorStateScreenAuthors ? 'warning' : 'edit'"
             v-bind:error="errorStateScreenAuthors"
@@ -35,6 +37,7 @@
         <q-step
             data-cy="step-identifiers"
             name="identifiers"
+            aria-label="Identifiers"
             title="Identifiers"
             v-bind:active-icon="errorStateScreenIdentifiers ? 'warning' : 'edit'"
             v-bind:error="errorStateScreenIdentifiers"
@@ -46,6 +49,7 @@
         <q-step
             data-cy="step-related-resources"
             name="related-resources"
+            aria-label="Related resources"
             title="Related resources"
             v-bind:active-icon="errorStateScreenRelatedResources ? 'warning' : 'edit'"
             v-bind:error="errorStateScreenRelatedResources"
@@ -57,6 +61,7 @@
         <q-step
             data-cy="step-abstract"
             name="abstract"
+            aria-label="Abstract"
             title="Abstract"
             v-bind:order="4"
             v-if="showAdvanced"
@@ -66,6 +71,7 @@
         <q-step
             data-cy="step-keywords"
             name="keywords"
+            aria-label="Keywords"
             title="Keywords"
             v-bind:active-icon="errorStateScreenKeywords ? 'warning' : 'edit'"
             v-bind:error="errorStateScreenKeywords"
@@ -77,6 +83,7 @@
         <q-step
             data-cy="step-license"
             name="license"
+            aria-label="License"
             title="License"
             v-bind:order="6"
             v-if="showAdvanced"
@@ -86,6 +93,7 @@
         <q-step
             data-cy="step-version-specific"
             name="version-specific"
+            aria-label="Version specific"
             title="Version specific"
             v-bind:active-icon="errorStateScreenVersionSpecific ? 'warning' : 'edit'"
             v-bind:error="errorStateScreenVersionSpecific"
@@ -98,6 +106,7 @@
             active-icon="navigate_next"
             data-cy="step-finish"
             name="finish"
+            aria-label="Finish"
             title="Finish"
             v-bind:order="showAdvanced ? 8 : 2"
             v-on:click="setStepName('finish')"
diff --git a/src/components/StepperActions.vue b/src/components/StepperActions.vue
@@ -1,5 +1,6 @@
 <template>
     <q-btn
+        aria-label="Previous page"
         data-cy="btn-previous"
         label="Previous"
         no-caps
@@ -16,6 +17,7 @@
         v-bind:class="cannotGoForward ? 'hidden' : ''"
     >
         <q-btn
+            aria-label="Jump to finish"
             color=""
             data-cy="btn-finish"
             flat
@@ -25,6 +27,7 @@
             to="/finish"
         />
         <q-btn
+            aria-label="Next page"
             color="primary"
             data-cy="btn-next"
             label="Next"

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@`
`7`	`7`	`<a`
`8`	`8`	`href="https://esciencecenter.nl"`
`9`	`9`	`target="_blank"`
	`10`	`+ aria-label="Netherlands eScience Center website (opens in a new tab)"`
`10`	`11`	`>`
`11`	`12`	`<img src="~assets/nlesc-logo.svg">`
`12`	`13`	`</a>`
Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@`
`6`	`6`	`hover-color="negative"`
`7`	`7`	`flat`
`8`	`8`	`icon="content_copy"`
	`9`	`+ aria-label="copy to clipboard"`
`9`	`10`	`v-bind:ripple="false"`
`10`	`11`	`v-on:click="copyToClipboard"`
`11`	`12`	`>`