From a77eb1b52042c761dccee067ac2903beaf2c3151 Mon Sep 17 00:00:00 2001
From: James Davidson <james@jamesdavidson.xyz>
Date: Fri, 25 Oct 2024 21:42:13 +0100
Subject: [PATCH 1/2] fix(header): add aria-role for theme-toggle

https://github.com/GoogleChrome/lighthouse/issues/12030#issuecomment-1715320515
---
 layouts/partials/header.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 98995b7..f5437ae 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -25,7 +25,7 @@
             <span class="nav-icons-divider"></span>
             <div class="nav-link dark-theme-toggle">
                 <span class="sr-only dark-theme-toggle-screen-reader-target"></span>
-                <a>
+                <a role="button">
                     <span class="theme-toggle-icon" data-feather="moon"></span>
                 </a>
             </div>

From e3d229db6d1fc2394f43fc829c65d10de0fc1831 Mon Sep 17 00:00:00 2001
From: James Davidson <james@jamesdavidson.xyz>
Date: Fri, 25 Oct 2024 21:50:23 +0100
Subject: [PATCH 2/2] refactor: expand switch role to sr-only elements

switch is more meaningful than button

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#technical_summary
---
 layouts/partials/header.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index f5437ae..ad5cbac 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -25,14 +25,14 @@
             <span class="nav-icons-divider"></span>
             <div class="nav-link dark-theme-toggle">
                 <span class="sr-only dark-theme-toggle-screen-reader-target"></span>
-                <a role="button">
+                <a role="switch">
                     <span class="theme-toggle-icon" data-feather="moon"></span>
                 </a>
             </div>
 
             <div class="nav-link" id="hamburger-menu-toggle">
                 <span class="sr-only hamburger-menu-toggle-screen-reader-target">menu</span>
-                <a>
+                <a role="switch">
                     <span data-feather="menu"></span>
                 </a>
             </div>
@@ -48,7 +48,7 @@
                 {{ end }}
                 <li class="nav-item dark-theme-toggle">
                     <span class="sr-only dark-theme-toggle-screen-reader-target">theme</span>
-                    <a>
+                    <a role="switch">
                         <span class="theme-toggle-icon" data-feather="moon"></span>
                     </a>
                 </li>