change link to button for better accessibility

DFE-Digital · Apr 18, 2024 · be6c763 · be6c763
1 parent d3921fc
commit be6c763
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 14 deletions.
diff --git a/app/components/header/navigation_component.rb b/app/components/header/navigation_component.rb
@@ -71,18 +71,17 @@ def category_list_id(resource, mode)
 
     def category_link(subcategory, resource, mode)
       title = subcategory
-      path = "#{resource.path}##{subcategory.parameterize}"
       li_id = "#{resource.path.parameterize}-#{subcategory.parameterize}-#{mode}"
       li_sync_id = "#{resource.path.parameterize}-#{subcategory.parameterize}-#{sync_mode(mode)}"
       child_menu_id = page_list_id(resource, subcategory, mode)
       child_menu_sync_id = page_list_id(resource, subcategory, sync_mode(mode))
       child_menu_ids = [child_menu_id, child_menu_sync_id].join(" ")
       li_css = ("active" if subcategory == front_matter["subcategory"]).to_s
-      link_css = "link--black link--no-underline"
+      link_css = "link link--black link--no-underline btn-as-link"
       aria_attributes = { expanded: false, controls: child_menu_ids }
       tag.li id: li_id, class: li_css, data: { "sync-id": li_sync_id, "child-menu-id": child_menu_id, "child-menu-sync-id": child_menu_sync_id, "direct-link": false } do
         safe_join([
-          link_to(title, path, class: link_css, aria: aria_attributes),
+          tag.button(title, type: "button", class: link_css, aria: aria_attributes),
           contracted_icon,
           row_break,
           if mode == :mobile

diff --git a/app/webpacker/controllers/navigation_controller.js b/app/webpacker/controllers/navigation_controller.js
@@ -70,7 +70,7 @@ export default class extends Controller {
         if (icon.classList.contains('nav-icon__contracted')) {
           icon.classList.remove('nav-icon__contracted');
           icon.classList.add('nav-icon__expanded');
-          item.querySelector('a,btn').ariaExpanded = true;
+          item.querySelector('a,button').ariaExpanded = true;
           return true;
         }
         return false;
@@ -85,7 +85,7 @@ export default class extends Controller {
         if (icon.classList.contains('nav-icon__expanded')) {
           icon.classList.remove('nav-icon__expanded');
           icon.classList.add('nav-icon__contracted');
-          item.querySelector('a,btn').ariaExpanded = false;
+          item.querySelector('a,button').ariaExpanded = false;
           return true;
         }
         return false;

diff --git a/app/webpacker/styles/header/navigation.scss b/app/webpacker/styles/header/navigation.scss
@@ -3,7 +3,7 @@
 
   padding: .5em;
 
-  a {
+  a, button.btn-as-link {
     display: inline-block;
   }
 }
@@ -24,7 +24,7 @@
     list-style: none;
     flex-direction: column;
     margin: 0;
-    padding: 0;
+    padding: 0.8em 0 0;
     background: #F0F0F0;
 
     > li {
@@ -93,7 +93,7 @@ body > header nav {
     }
   }
 
-  li > a {
+  li > a, li > button.btn-as-link {
     cursor: pointer;
   }
 
@@ -132,25 +132,26 @@ body > header nav {
       }
 
       > li {
-        > a {
+        > a, button.btn-as-link {
           font-weight: bold;
         }
       }
 
-      a {
+      a, button.btn-as-link {
         // NB: this is for all <a> elements
         padding: 0.875em 1.25em;
       }
     }
 
     ol.category-links-list {
+      padding-top: 6px;
       padding-left: 1em;
       flex-basis: 100%;
 
       >  li.active {
         background: #F162A3;
 
-        > a {
+        > a, button.btn-as-link {
           font-weight: bold;
         }
       }
@@ -179,7 +180,7 @@ body > header nav {
       }
 
       >  li.active {
-        > a {
+        > a, button.btn-as-link {
           font-weight: bold;
         }
       }
@@ -203,7 +204,7 @@ body > header nav {
         position: relative;
         flex-direction: row;
         border-bottom: 5px solid $white;
-        padding: 1.25em;
+        padding: 1.25em 0.75em;
 
         &.active {
           border-bottom: 5px solid $pink;
@@ -214,14 +215,15 @@ body > header nav {
           border-bottom: 5px solid $grey;
         }
 
-        a {
+        a, button.btn-as-link {
           &:hover,
           &:focus {
             border-bottom: 4px solid $black;
           }
         }
 
         a,
+        button.btn-as-link,
         div {
           line-height: 1.5;
           display: inline-block;
@@ -284,3 +286,12 @@ body > header nav {
     }
   }
 }
+
+
+button.btn-as-link {
+  background-color: rgba(0, 0, 0, 0);
+  border-style: none;
+  font: inherit;
+  text-align: start;
+  -moz-appearance: none;
+}