Tab-alpha's Aria tag translations (#1741)

Add translations for the Aria tags in the tab-alpha page template.

Thanks for the review @osma

resource/js/tab-alpha.js

@@ -19,6 +19,9 @@ function startAlphaApp () {
     computed: {
       loadingMessage () {
         return $t('Loading more items')
+      },
+      toConceptPageAriaMessage () {
+        return $t('Go to the concept page')
       }
     },
     provide () {
@@ -145,6 +148,7 @@ function startAlphaApp () {
           :loading-more-concepts="loadingMoreConcepts"
           :loading-message="loadingMessage"
           :list-style="listStyle"
+          :to-concept-page-aria-message="toConceptPageAriaMessage"
           @load-concepts="loadConcepts($event)"
           @select-concept="selectedConcept = $event"
           ref="tabAlpha"
@@ -180,7 +184,7 @@ function startAlphaApp () {
   })
 
   tabAlphaApp.component('tab-alpha', {
-    props: ['indexLetters', 'indexConcepts', 'selectedConcept', 'loadingLetters', 'loadingConcepts', 'loadingMoreConcepts', 'loadingMessage', 'listStyle'],
+    props: ['indexLetters', 'indexConcepts', 'selectedConcept', 'loadingLetters', 'loadingConcepts', 'loadingMoreConcepts', 'loadingMessage', 'listStyle', 'toConceptPageAriaMessage'],
     emits: ['loadConcepts', 'selectConcept'],
     inject: ['partialPageLoad', 'getConceptURL', 'showNotation'],
     methods: {
@@ -222,7 +226,7 @@ function startAlphaApp () {
               </template>
               <a :class="{ 'selected': selectedConcept === concept.uri }"
                 :href="getConceptURL(concept.uri)" @click="loadConcept($event, concept.uri)"
-                aria-label="Go to the concept page"
+                :aria-label="toConceptPageAriaMessage"
               >
                 {{ concept.prefLabel }}{{ showNotation && concept.qualifier ? ' (' + concept.qualifier + ')' : '' }}
               </a>

resource/translations/messages.en.json

@@ -218,5 +218,9 @@
     "Information": "Information",
     "Breadcrumbs": "Breadcrumbs",
     "Copy to clipboard": "Copy to clipboard",
-    "Error": "Error"
+    "Error": "Error",
+    "Go to the concept page": "Go to the concept page",
+    "Download this concept": "Download this concept",
+    "Concept %term% in vocabulary %vocab%": "Concept %term% in vocabulary %vocab%",
+    "More information about this term": "More information about this term"
 }

resource/translations/messages.fi.json

@@ -42,6 +42,7 @@
     "Error: Term \"%term%\" not found in vocabulary!": "Virhe: Termi\u00e4 \"%term%\" ei l\u00f6ydy sanastosta!",
     "Feedback": "Palaute",
     "Feedback has been sent!": "Palaute on l\u00e4hetetty!",
+    "Go to the concept page": "Mene käsitesivulle",
     "Group index": "Ryhm\u00e4hakemisto",
     "Group-nav": "Ryhm\u00e4t",
     "Help": "Ohje",

resource/translations/messages.sv.json

@@ -42,6 +42,7 @@
     "Error: Term \"%term%\" not found in vocabulary!": "Fel: Termen \"%term\" finns inte i vokabul\u00e4ren!",
     "Feedback": "Respons",
     "Feedback has been sent!": "Respons har skickats!",
+    "Go to the concept page": "Gå till begreppsidan",
     "Group index": "Gruppindex",
     "Group-nav": "Gruppindex",
     "Help": "Hj\u00e4lp",

tests/cypress/template/sidebar-alpha.cy.js

@@ -119,4 +119,13 @@ describe('Alphabetical index', () => {
     // check that the second mapping property has the right number of entries
     cy.get('.prop-mapping').eq(0).find('.prop-mapping-label').should('have.length', 3)
   })
+  // Check the correctness of Aria-labels (Sami language will be implemented later)"
+  it('Aria tags are correct for each language', () => {
+    cy.visit('/yso/en/')
+    cy.get('#tab-alphabetical .list-group-item > a').should('have.attr', 'aria-label', 'Go to the concept page')
+    cy.visit('/yso/sv/')
+    cy.get('#tab-alphabetical .list-group-item > a').should('have.attr', 'aria-label', 'Gå till begreppsidan')
+    cy.visit('/yso/fi/')
+    cy.get('#tab-alphabetical .list-group-item > a').should('have.attr', 'aria-label', 'Mene käsitesivulle')
+  })
 })