Issue1585 errors reported by axe accessibility tests must be fixed

composer.json

@@ -29,5 +29,10 @@
   },
   "autoload": {
     "classmap": ["src/controller/", "src/model/", "src/model/sparql/"]
+  },
+  "config": {
+    "allow-plugins": {
+      "robloach/component-installer": true
+    }
   }
 }

resource/css/skosmos.css

@@ -822,6 +822,15 @@ body {
     color: var(--feedback-form-text);
   }
 
+ /* About page
+   *****************************************/
+  #aboutid-korjaa a {
+    font-size: 0,8ems;
+    color: var(--vocab-link);
+    text-decoration: underline var(--secondary-medium-color) solid;
+    font-weight: 400;
+  }
+
   /* Error page
    *****************************************/
   .alert {

resource/js/vocab-search.js

@@ -53,7 +53,7 @@ const vocabSearch = Vue.createApp({
         <button id="clear-button" class="btn btn-danger" type="clear" v-if="searchTerm" @click="searchTerm = ''">
           <i class="fa-solid fa-xmark"></i>
         </button>
-        <button id="search-button" class="btn btn-outline-secondary" @click="gotoSearchPage()">
+        <button id="search-button" class="btn btn-outline-secondary" @click="gotoSearchPage()" aria-label="go to the search page">
           <i class="fa-solid fa-magnifying-glass"></i>
         </button>
       </div>

src/view/about-info.inc

@@ -1,16 +1,18 @@
 {# This is the template for the about page. You can enter any html here and show different language versions by using the lang value in a twig conditional as demonstrated below. #}
 {% block content %}
-  {% if request.lang == 'fi' %}
-    <h4>Tietoja sanastoselaimesta</h4>
-    <p>Skosmos on web-pohjainen sanasto ja ontologiaselain.</p>
-    <a href="http://github.com/NatLibFi/Skosmos">Skosmos GitHub-repositorio</a>
-  {% elseif request.lang == 'sv' %}
-    <h4>Information</h4>
-    <p>Skosmos är en ontologibrowser.</p>
-    <a href="http://github.com/NatLibFi/Skosmos">Skosmos på GitHub</a>
-  {% elseif request.lang == 'en' %}
-    <h4>About</h4>
-    <p>Skosmos is a web based open source ontology browser.</p>
-    <a href="http://github.com/NatLibFi/Skosmos">Skosmos GitHub repository</a>
-  {% endif %}
-{% endblock %}
+<div id="aboutid-korjaa">
+	{% if request.lang == 'fi' %}
+        <h2>Tietoja sanastoselaimesta</h2>
+        <p>Skosmos on web-pohjainen sanasto ja ontologiaselain.</p>
+        <a href="http://github.com/NatLibFi/Skosmos">Skosmos GitHub-repositorio</a>
+    {% elseif request.lang == 'sv' %}
+        <h4>Information</h4>
+        <p>Skosmos är en ontologibrowser.</p>
+        <a href="http://github.com/NatLibFi/Skosmos">Skosmos på GitHub</a>
+    {% elseif request.lang == 'en' %}
+        <h4>About</h4>
+        <p>Skosmos is a web based open source ontology browser.</p>
+        <a href="http://github.com/NatLibFi/Skosmos">Skosmos GitHub repository</a>
+	{% endif %}
+  </div>
+{% endblock %}

src/view/about.twig

@@ -10,7 +10,6 @@
       {% include 'about-info.inc' %}
       </p>
     </div>
-
     <div id="version">
       {% set version = request.version %}
       <p>{% trans %}Skosmos version %version%{% endtrans %}</p>

src/view/base-template.twig

@@ -18,14 +18,9 @@
 <link href="{{ ServiceCustomCss }}" media="screen, print" rel="stylesheet" type="text/css">
 {% endif %}
 {% for plugin, files in request.plugins.pluginsCSS %}{% for file in files %}<link href="{{ file }}" media="screen, print" rel="stylesheet" type="text/css">{% endfor %}{% endfor %}
-
 <title>{{ ServiceName }}{% block title %}{% endblock %}</title>
 </head>
 <body{% if request.vocabid == '' and request.page != 'feedback' and request.page != 'about' and request.page != 'search' %} class="bg-light frontpage-logo"{% else %} class="bg-medium vocab-{{ request.vocabid }}"{% endif %}>
-  <noscript>
-    <strong>We're sorry but Skosmos doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-  </noscript>
-  <a class="visually-hidden" id="skiptocontent" href="{{ request.langurl }}#maincontent">Skip to main</a>
   <header>
     <div class="container-fluid bg-dark d-flex my-auto py-3 px-4 text-bg-dark">
       {% if request.vocabid == '' and request.page != 'about' and request.page != 'feedback' %}
@@ -35,32 +30,35 @@
           <h2 class="visually-hidden">Skosmos</h2>
         </a>
       {% endif %}
-      <ul class="nav nav-pills ms-auto my-auto text-light gx-3 py-3" id="topbar-nav">
-        <li class="nav-item">
-          <a href="{{ request.lang }}/{% if request.contentLang and request.contentLang != request.lang %}?clang={{ request.contentLang }}{% endif %}{% if request.queryParam('anylang') == 'on' %}{% if request.contentLang == request.lang %}?{% else %}&{% endif %}anylang=on{% endif %}" id="navi1" class="fs-6 text-light topbar-nav-link ms-3 text-decoration-none" >
-                   {{ "Vocabularies" | trans }}
-          </a>
-        </li>
-        <li class="nav-item">
-          <a href="{{ request.lang }}/about{% if request.contentLang and request.contentLang != request.lang %}?clang={{ request.contentLang }}{% endif %}{% if request.queryParam('anylang') == 'on' %}{% if request.contentLang == request.lang %}?{% else %}&{% endif %}anylang=on{% endif %}" id="navi2" class="fs-6 text-light topbar-nav-link ms-3 text-decoration-none">
-                   {{ "About" | trans }}
-          </a>
-        </li>
-        <li class="nav-item">
-          <a href="{% if request.vocabid and vocab.title%}{{ request.vocabid }}/{% endif %}{{ request.lang }}/feedback{% if request.contentLang and request.contentLang != request.lang %}?clang={{ request.contentLang }}{% endif %}{% if request.queryParam('anylang') == 'on' %}{% if request.contentLang == request.lang %}?{% else %}&{% endif %}anylang=on{% endif %}" id="navi3" class="fs-6 text-light topbar-nav-link ms-3 text-decoration-none">
-                   {{ "Feedback" | trans }}
-          </a>
-        </li>
-        {% if languages|length > 1 %}
-        {% for langcode, langdata in languages %}
-        {% if request.lang != langcode %}
-        <li class="nav-item" id="language">
-          <a class="fs-6 text-light ms-3 text-decoration-none" id="language-{{ langcode}}" href="{{ request.langurl(langcode) }}"> {{ langdata.name }}</a>
-        </li>
-        {% endif %}
-        {% endfor %}
-        {% endif %}
-      </ul>
+      <nav>
+        <a class="visually-hidden" id="skiptocontent" href="{{ request.langurl }}#maincontent">Skip to main</a>
+        <ul class="nav nav-pills ms-auto my-auto text-light gx-3 py-3" id="topbar-nav">
+          <li class="nav-item">
+            <a href="{{ request.lang }}/{% if request.contentLang and request.contentLang != request.lang %}?clang={{ request.contentLang }}{% endif %}{% if request.queryParam('anylang') == 'on' %}{% if request.contentLang == request.lang %}?{% else %}&{% endif %}anylang=on{% endif %}" id="navi1" class="fs-6 text-light topbar-nav-link ms-3 text-decoration-none" >
+                     {{ "Vocabularies" | trans }}
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="{{ request.lang }}/about{% if request.contentLang and request.contentLang != request.lang %}?clang={{ request.contentLang }}{% endif %}{% if request.queryParam('anylang') == 'on' %}{% if request.contentLang == request.lang %}?{% else %}&{% endif %}anylang=on{% endif %}" id="navi2" class="fs-6 text-light topbar-nav-link ms-3 text-decoration-none">
+                     {{ "About" | trans }}
+            </a>
+          </li>
+          <li class="nav-item">
+            <a href="{% if request.vocabid and vocab.title%}{{ request.vocabid }}/{% endif %}{{ request.lang }}/feedback{% if request.contentLang and request.contentLang != request.lang %}?clang={{ request.contentLang }}{% endif %}{% if request.queryParam('anylang') == 'on' %}{% if request.contentLang == request.lang %}?{% else %}&{% endif %}anylang=on{% endif %}" id="navi3" class="fs-6 text-light topbar-nav-link ms-3 text-decoration-none">
+                     {{ "Feedback" | trans }}
+            </a>
+          </li>
+          {% if languages|length > 1 %}
+          {% for langcode, langdata in languages %}
+          {% if request.lang != langcode %}
+          <li class="nav-item" id="language">
+            <a class="fs-6 text-light ms-3 text-decoration-none" id="language-{{ langcode}}" href="{{ request.langurl(langcode) }}"> {{ langdata.name }}</a>
+          </li>
+          {% endif %}
+          {% endfor %}
+          {% endif %}
+        </ul>
+      </nav>
     </div>
 
     <div class="container-fluid d-flex justify-content-between bg-light py-4 px-4" id="headerbar">
@@ -75,8 +73,11 @@
     </div>
   </header>
   <main id="main-container" class="{% if request.vocabid == '' or global_search %} frontpage{% elseif concept_uri != '' %} termpage{% elseif request.vocab != '' %} vocabpage{% if list_style %} {{ list_style }}{% endif %}{% endif %}">
+    <noscript>
+      <strong>We're sorry but Skosmos doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
     <div class="container">
-      <div class="row" tabindex="-1">
+      <div class="row">
       {% block content %}
       {% endblock %}
       </div>

src/view/concept-card.inc

@@ -8,7 +8,7 @@
         <div class="col-sm-8" id="concept-label">
           <h1 class="mb-0">{{ concept.label }}</h1>
           <button class="btn btn-default copy-clipboard" type="button"
-                  data-bs-toggle="tooltip" data-bs-placement="button" title="{{ 'Copy to clipboard' | trans }}">
+                  data-bs-toggle="tooltip" data-bs-placement="button" title="{{ 'Copy to clipboard' | trans }}" aria-label="Copy to clipboard">
           <i class="fa-regular fa-copy"></i>
           </button>
         </div>

src/view/feedback.twig

@@ -15,7 +15,8 @@
       <div class="mb-4">
         <label class="form-label" for="vocab-select">{{ 'Vocabulary' | trans }}</label>
         <div class="select-wrapper">
-          <select class="form-select" id="vocab-select" name="vocab">
+          <label for="vocab-select">Select a language</label>
+          <select class="form-select" id="vocab-select" name="vocab" aria-label="Select a language">
             <option value="" {% if not request.vocab %}selected{% endif %}>{{ 'Not to a specific vocabulary' | trans }}</option>
             {% for option in vocabList %}
               <option value="{{ option.id }}" {% if request.vocab.id == option.id %}selected{% endif %}>{{ option.title }}</option>
@@ -43,7 +44,7 @@
       <div>
         <span>* {{ 'Value is required and can not be empty' | trans }}</span>
         {{ honeypot.generate('item-description', 'user-captcha')|raw }}
-        <button type="submit" class="btn btn-primary" id="submit-feedback">{{ 'Send feedback' | trans }}</button>
+        <button type="submit" class="btn btn-primary" id="submit-feedback" aria-label="Send feedback">{{ 'Send feedback' | trans }}</button>
       </div>
     </form>
   {% endif -%}

src/view/sidebar.inc

@@ -10,7 +10,7 @@
           {% elseif view == 'hierarchy' %} {% set view_trans_text = ['Hier-nav', 'List vocabulary concepts hierarchically'] %}
           {% elseif view == 'groups' %} {% set view_trans_text = ['Group-nav', 'List vocabulary concepts and groupings hierarchically'] %}
           {% else %} {% set view_trans_text = vocab.config.showDeprecatedChanges ? ['Changes-and-deprecations-nav', 'List vocabulary concepts by newest additions including removed'] : ['Changes-nav', 'List vocabulary concepts by newest additions'] %}{% endif %}
-          <h3 class="visually-hidden">{{ view_trans_text[1] | trans }}</h3>
+          <span class="visually-hidden">{{ view_trans_text[1] | trans }}</span>
           {# active_class is used to set initial active tab and disabled_class is used to disable hierarchy tab #}
           {# On vocab page active tab is set to defaultSidebarView, on concept page active tab is set to defaultConceptSidebarView #}
           {% set active_class = (request.page == 'vocab' and view == vocab.config.defaultSidebarView) or (request.page == 'page' and view == vocab.config.defaultConceptSidebarView) %}

tests/cypress/accessibility/axe-about.cy.js

@@ -4,7 +4,7 @@ import 'cypress-axe';
 /* If you want the test to be skipped, add a skip command after the describe part:
     - test enabled: describe('Check accessibility of ...
     - test to be skipped: describe.skip('Check accessibility of ... */
-describe.skip('Check accessibility of the about page', () => {
+describe('Check accessibility of the about page', () => {
   before(() => {
     cy.visit('/fi/about')
     cy.injectAxe()

tests/cypress/accessibility/axe-concept.cy.js

@@ -1,13 +1,15 @@
 // When you start creating tests, remove the following comment(s).
-// import { accessibilityTestRunner } from '../support/accessibility.js'
-// import 'cypress-axe';
+import { accessibilityTestRunner } from '../support/accessibility.js'
+import 'cypress-axe';
 
 /* If you want the test to be skipped, add a skip command after the describe part:
     - test enabled: describe('Check accessibility of ...
     - test to be skipped: describe.skip('Check accessibility of ... */
-describe.skip('Check accessibility of the concept page', () => {
-  it('no-op test', () => {})
+describe('Check accessibility of the concept page', () => {
+  before(() => {
+    cy.visit('/yso/en/page/p3973')
+    cy.injectAxe()
+  })
 
-  // When you start creating tests, remove the following comment(s).
-  // accessibilityTestRunner()
+  accessibilityTestRunner()
 })

tests/cypress/accessibility/axe-feedback.cy.js

@@ -4,9 +4,9 @@ import 'cypress-axe';
 /* If you want the test to be skipped, add a skip command after the describe part:
     - test enabled: describe('Check accessibility of ...
     - test to be skipped: describe.skip('Check accessibility of ... */
-describe.skip('Check accessibility of the feedback page', () => {
+describe('Check accessibility of the feedback page', () => {
   before(() => {
-    cy.visit('/fi/feedback')
+    cy.visit('/en/feedback')
     cy.injectAxe()
   })
 

tests/cypress/accessibility/axe-global-search.cy.js

@@ -4,7 +4,7 @@
 /* If you want the test to be skipped, add a skip command after the describe part:
     - test enabled: describe('Check accessibility of ...
     - test to be skipped: describe.skip('Check accessibility of ... */
-describe.skip('Check accessibility of the global search page', () => {
+describe('Check accessibility of the global search page', () => {
   it('no-op test', () => {})
 
   // When you start creating tests, remove the following comment(s).

tests/cypress/accessibility/axe-landing.cy.js

@@ -4,7 +4,7 @@ import 'cypress-axe';
 /* If you want the test to be skipped, add a skip command after the describe part:
     - test enabled: describe('Check accessibility of ...
     - test to be skipped: describe.skip('Check accessibility of ... */
-describe.skip('Check accessibility of the landing page', () => {
+describe('Check accessibility of the landing page', () => {
   before(() => {
     cy.visit('/')
     cy.injectAxe()

tests/cypress/accessibility/axe-vocab-home.cy.js

@@ -4,9 +4,9 @@ import 'cypress-axe';
 /* If you want the test to be skipped, add a skip command after the describe part:
     - test enabled: describe('Check accessibility of ...
     - test to be skipped: describe.skip('Check accessibility of ... */
-describe.skip('Check accessibility of the vocab-home page', () => {
+describe('Check accessibility of the vocab-home page', () => {
   before(() => {
-    cy.visit('/agrovoc/fi/')
+    cy.visit('/yso/en/')
     cy.injectAxe()
   })
 

tests/cypress/accessibility/axe-vocab-search.cy.js

@@ -1,13 +1,14 @@
-// When you start creating tests, remove the following comment(s).
-// import { accessibilityTestRunner } from '../support/accessibility.js'
-// import 'cypress-axe';
+import { accessibilityTestRunner } from '../support/accessibility.js'
+import 'cypress-axe';
 
 /* If you want the test to be skipped, add a skip command after the describe part:
     - test enabled: describe('Check accessibility of ...
     - test to be skipped: describe.skip('Check accessibility of ... */
-describe.skip('Check accessibility of the vocabulary search page', () => {
-  it('no-op test', () => {})
+describe('Check accessibility of the vocabulary search page', () => {
+  before(() => {
+    cy.visit('/yso/en/')
+    cy.injectAxe()
+  })
 
-  // When you start creating tests, remove the following comment(s).
-  // accessibilityTestRunner()
-})
+  accessibilityTestRunner()
+})

tests/cypress/accessibility/axe-vocab.cy.js

@@ -4,9 +4,9 @@ import 'cypress-axe';
 /* If you want the test to be skipped, add a skip command after the describe part:
     - test enabled: describe('Check accessibility of ...
     - test to be skipped: describe.skip('Check accessibility of ... */
-describe.skip('Check accessibility of the vocab page', () => {
+describe('Check accessibility of the vocab page', () => {
   before(() => {
-    cy.visit('/juho/fi')
+    cy.visit('/yso/en/')
     cy.injectAxe()
   })
 

tests/cypress/e2e/fp-lang-yso-search-result-vocab.sy.js

@@ -0,0 +1,21 @@
+describe('Front page - lang - list - yso - search - result - vocab', () => {
+    it('should navigate through Finto application', () => {
+      cy.visit('/en/');
+
+      cy.contains('Change language').click();
+      cy.contains('Suomeksi').click();
+
+      // Select "YSO - Yleinen suomalainen ontologia" from the vocabulary list
+      cy.get('#tähän_sopiva_id').select('YSO - Yleinen suomalainen ontologia');
+
+      cy.visit('/yso/fi/search?query=kissaeläimet');
+
+      // Select the concept 'kissaeläimet' from the list and go to the concept page
+      cy.contains('joku sopiva käsite').click();
+
+      // After transitioning from the search results page to the concept page, you should enter
+      // on the following page:
+      cy.url().should('eq', 'https://test.dev.finto.fi/yso/fi/page/p864');
+    });
+  });
+