Feature/accessabillity test fixes

CHANGELOG.md

@@ -8,6 +8,8 @@ See [keep a changelog] for information about writing changes to this log.
 
 ## [Unreleased]
 
+* [PR-25](https://github.com/itk-dev/giv-din-stemme/pull/20)
+  Accessibility fixes
 * [PR-20](https://github.com/itk-dev/giv-din-stemme/pull/20)
   Styling recording
 * [PR-22](https://github.com/itk-dev/giv-din-stemme/pull/22)

tailwind.config.js

@@ -16,11 +16,11 @@ module.exports = {
     extend: {
       colors: {
         orange: {
-          600: '#EF4123'
+          600: '#A62811'
         },
       },
       boxShadow: {
-        'mic-button': '0 0 5px 5px #EF4123',
+        'mic-button': '0 0 5px 5px #A62811',
       },
       keyframes: {
         wiggle: {

web/modules/custom/giv_din_stemme/templates/components/button-microphone-toggle.html.twig

@@ -1,4 +1,5 @@
 <button id="btn-microphone-toggle" class="btn-microphone-toggle rounded-full flex place-content-center w-20 h-20 text-center bg-brand hover:bg-orange-700 visualizer-shadow transition">
     <i class="text-white text-3xl fa-solid fa-microphone-slash place-self-center"></i>
     <i class="text-white text-3xl fa-solid fa-microphone place-self-center"></i>
+    <span class="sr-only">{{ "Toggle microphone on / off"|t }}</span>
 </button>

web/modules/custom/giv_din_stemme/templates/permissions-page.html.twig

@@ -14,15 +14,16 @@
         {{ 'To record the sound you must grant us access to use the microphone on your device. Press the microphone icon next to the address bar, and click Allow in the popup that appears in your browser.'|t }}
       </p>
       <p>
-          {{ 'If you encounter a problem see: ' }} <span modal-id="{{ modal_id }}" class="underline cursor-pointer btnOpenModal">{{ 'Help for permissions'|t }}</span>.
+          {{ 'If you encounter a problem see: ' }} <a href="javascript:void" modal-id="{{ modal_id }}" class="underline btnOpenModal">{{ 'Help for permissions'|t }}</a>.
       </p>
     </div>
     <div class="-mx-5 mb-5 pb-5 border-b-2"></div>
-    <div id="microphone-allowed-display" class="hidden">
+    <div id="microphone-allowed-display" class="hidden text-center">
       <div class="flex place-content-center my-5">
         {% include "@giv_din_stemme/components/button-microphone-toggle.html.twig" %}
       </div>
-      <p>{{ 'Access to microphone successfully granted. Continue to test the settings'|t }}</p>
+      <p class="text-lg">{{ 'Access to microphone successfully granted.'|t }}</p>
+      <p>{{ 'Continue to test the settings'|t }}</p>
     </div>
     <div id="microphone-disallowed-display" class="bg-gray-400 my-16 mx-auto rounded-full table w-20 h-20 cursor-pointer text-center">
       <div class="align-middle table-cell">

web/modules/custom/giv_din_stemme/templates/read-page.html.twig

@@ -29,8 +29,8 @@
 {% block gds_footer %}
   <div class="py-5">
     <form action="{{ nextUrl }}" method="post" enctype="multipart/form-data">
-      <input type="file" name="file" id="audio_input" hidden>
-      <input type="number" id="recording_duration" name="duration" hidden>
+      <input type="hidden" name="file" id="audio_input">
+      <input type="hidden" id="recording_duration" name="duration">
       <div class="grid grid-cols-2">
         <div class="sm:col-span-1">
         </div>

web/themes/custom/giv_din_stemme_theme/templates/components/global-navigation.html.twig

@@ -1,10 +1,10 @@
 <div id="globalNavigation" class="hidden">
   <div role="nav" class="bg-primary text-primary absolute top-0 left-0 w-96 drop-shadow-md p-5 h-screen z-20 rounded-r-md border-r border-t border-primary">
-    <header class="flex">
+    {# <header class="flex">
       <button class="ms-auto" id="btnCloseGlobalNavigation">
         <i class="fa-solid fa-xmark"></i>
       </button>
-    </header>
+    </header> #}
     <main class="text-primary">
       {{ page.global_navigation_menu }}
     </main>

web/themes/custom/giv_din_stemme_theme/templates/html.html.twig

@@ -47,8 +47,8 @@
       {{ page }}
       {{ page_bottom }}
     </div>
-    <img class="-z-50 fixed object-cover object-center min-h-80 w-full bottom-0" src="/{{ directory }}/background.svg"/>
-    <img class="-z-45 p-3 md:m-0 md:fixed md:left-5 md:bottom-5" src="/{{ directory }}/doner-din-stemme-logo.svg"/>
+    <img class="-z-50 fixed object-cover object-center min-h-80 w-full bottom-0" src="/{{ directory }}/background.svg" alt="" />
+    <img class="-z-45 p-3 md:m-0 md:fixed md:left-5 md:bottom-5" src="/{{ directory }}/doner-din-stemme-logo.svg" alt="" />
     <js-bottom-placeholder token="{{ placeholder_token }}">
   </body>
 </html>

web/themes/custom/giv_din_stemme_theme/templates/modal.html.twig

@@ -5,7 +5,7 @@
     </div>
     <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
     <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6"
-         role="dialog" aria-modal="true" aria-labelledby="modal-headline">
+         role="dialog" aria-modal="true" aria-labelledby="{{ modal_headline }}">
       <div class="block absolute top-0 right-0 pt-4 pr-4">
         <button modal-id="{{ modal_id }}" type="button" data-behavior="cancel" class="btnCloseModal bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
           <span class="sr-only">Close</span>