fixing title header for home page and accessibility tooltip for scree…

…n readers.
DEFRA · Mar 12, 2024 · 1430011 · 1430011
1 parent 3b59430
commit 1430011
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 4 deletions.
diff --git a/src/client/assets/stylesheets/sass/components/_toggletips.scss b/src/client/assets/stylesheets/sass/components/_toggletips.scss
@@ -47,6 +47,14 @@ button {
 			visibility: visible;
 	    }
 	}
+
+	&tooltip:focus ~ span{
+		&defra-toggletip__info {
+			opacity: 1;
+			text-decoration: none;
+			visibility: visible;
+	    }
+	}
 
 	&tooltip span b {
 		width: 15px;

diff --git a/src/server/check-local-air-quality/controller.js b/src/server/check-local-air-quality/controller.js
@@ -3,7 +3,7 @@ const checkLocalAirController = {
     return h.view('check-local-air-quality/index', {
       pageTitle: 'Check local air quality - GOV.UK',
       heading: 'Check local air quality',
-      page: 'check local air quality'
+      page: 'Check local air quality'
     })
   }
 }

diff --git a/src/server/common/components/toggletip/template.njk b/src/server/common/components/toggletip/template.njk
@@ -1,14 +1,14 @@
 <div class="defra-toggletip defra-toggletip--open defra-toggletip--up" data-toggletip="" data-toggletip-label={{label}} data-toggletip-content={{content}}>
       {{text}}
       <span class="defra-toggletip__container" data-toggletip-container="">
-      <button class="tooltip defra-toggletip__button defra-toggletip-target" aria-label={{label}} tabindex="-1">
+      <button class="tooltip defra-toggletip__button defra-toggletip-target" aria-describedby={{text}} aria-label={{label}} aria-hidden="false">
       <span class="defra-toggletip__button-icon">
       <svg focusable="false" aria-hidden="true" width="18" height="18" viewBox="0 0 18 18"><circle cx="9" cy="9" r="7.5" fill="none" stroke="currentColor"></circle><path d="M9.841 11.409h1.47c.314 0 .538.057.67.171s.198.303.198.567c0 .269-.067.463-.201.581s-.357.178-.667.178H6.69c-.31 0-.532-.059-.667-.178s-.201-.312-.201-.581c0-.264.065-.453.195-.567s.354-.171.673-.171h1.47V8.087h-.773c-.305 0-.524-.058-.656-.175s-.198-.308-.198-.577.064-.461.191-.575.349-.17.663-.17h2.058c.127 0 .225.026.294.078s.102.124.102.216v4.525zM8.857 3.5c.333 0 .554.064.663.191s.164.433.164.916c0 .465-.049.753-.147.865s-.329.167-.694.167c-.355 0-.584-.052-.687-.157s-.154-.314-.154-.629c0-.583.053-.954.158-1.114s.337-.239.697-.239z" fill-rule="nonzero" fill="currentColor"></path></svg>
       <span class="defra-toggletip__button-text">i</span>
       </span>
       </button>
       <span class="defra-toggletip__info" role="status" style="">
-        <span class="defra-toggletip__text">{{tooltiptext}}</span>
+        <span class="defra-toggletip__text" id={{text}} aria-hidden="true" role="tooltip" aria-live="polite">{{tooltiptext}}</span>
         <span class="defra-toggletip__arrow" id="x2" style=""></span>
       </span>
       </span>

diff --git a/src/server/common/templates/layouts/page.njk b/src/server/common/templates/layouts/page.njk
@@ -33,6 +33,7 @@
 {% endblock %}
 
 {% block header %}
+{%if page == "Check local air quality"%}{% set serviceName = ""%}{%endif%}
 {%if page != "home"%}
   {{ govukHeader({
     homepageUrl: "https://www.gov.uk/",
@@ -42,7 +43,7 @@
     serviceUrl: appPathPrefix,
     useTudorCrown: true
   }) }}
-{% endif%}
+  {%endif%}
 {% endblock %}
 
 {% block pageTitle %}