Enable Axe accessibility tests for about page (#1593)

* Beginning, a draft of the first e2e test

* Fixed accessibility issues on the About page, as well as the placement of the noscript block and the Skip to Main link

* Unnecessary file removed

* CSS errors fixed

* Changed tabulation to white space characters

resource/css/skosmos.css

@@ -860,6 +860,15 @@ body {
     border-radius: 0;
   }
 
+ /* About page
+   *****************************************/
+  #about-content a {
+    font-size: 1.0em;
+    color: var(--vocab-link);
+    text-decoration: underline var(--secondary-medium-color) solid;
+    font-weight: 700;
+  }
+
   /* Footer
    *****************************************/
   #footer p {

src/view/about-info.inc

@@ -1,7 +1,8 @@
 {# 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 %}
+<div id="about-content">
   {% if request.lang == 'fi' %}
-    <h4>Tietoja sanastoselaimesta</h4>
+    <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' %}
@@ -13,4 +14,5 @@
     <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/base-template.twig

@@ -18,15 +18,11 @@
 <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>
+    <a class="visually-hidden" id="skiptocontent" href="{{ request.langurl }}#maincontent">Skip to main</a>
     <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' %}
         <span class="fs-6 py-3 text-light">Yhteishaku sanastoista v</span>
@@ -62,7 +58,6 @@
         {% endif %}
       </ul>
     </div>
-
     <div class="container-fluid bg-light py-4 px-4" id="headerbar">
       {% if request.vocabid == '' %}
         <div id="skosmos-logo">
@@ -82,6 +77,9 @@
   </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 %}">
     <div class="container">
+      <noscript>
+        <strong>We're sorry but Skosmos doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      </noscript>
       <div class="row" tabindex="-1">
       {% block content %}
       {% endblock %}

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()