fix: screen reader styles, label, text updates

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "19.5.6",
+  "version": "19.5.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "19.5.6",
+      "version": "19.5.7",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "19.5.6",
+  "version": "19.5.7",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {

src/_includes/partials/nav/menu.liquid

@@ -5,6 +5,7 @@
 <div class="flex-centered">
   <input id="menu-toggle" type="checkbox" aria-hidden="true" />
   <label class="menu-button-container" for="menu-toggle" aria-controls="primary-navigation" aria-expanded="false" tabindex="0">
+    <span id="menu-label-text" class="screen-readers-only">Toggle mobile menu</span>
     <div class="menu-closed" aria-hidden="true">{% tablericon "menu" "Menu closed" %}</div>
     <div class="menu-open" aria-hidden="true">{% tablericon "x" "Menu open" %}</div>
   </label>

src/assets/scripts/menu.js

@@ -1,5 +1,6 @@
 window.addEventListener('load', () => {
   const menuInput = document.getElementById('menu-toggle')
+  const menuLabelText = document.getElementById('menu-label-text')
   const menuButtonContainer = document.querySelector('.menu-button-container')
   const menuItems = document.querySelectorAll('.menu-primary li[role="menu-item"]')
   const isMobile = () => window.innerWidth <= 768
@@ -12,6 +13,14 @@ window.addEventListener('load', () => {
       const link = item.querySelector('a')
       if (link) link.setAttribute('tabindex', isMobile() && !isExpanded ? '-1' : '0')
     })
+    if(isExpanded) {
+      menuLabelText.textContent = 'Close mobile menu'
+    }
+
+    if (!isExpanded) {
+      menuLabelText.textContent = 'Open mobile menu'
+      menuButtonContainer.focus()
+    }
   }
 
   updateTabIndex()

src/assets/styles/base/index.css

@@ -554,6 +554,16 @@ li {
   display: none !important;
 }
 
+.screen-readers-only:not(:focus):not(:active) {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 .text-centered {
   text-align: center !important;
 }