Improve aria labels for navigation

Author: robdekort

dev/resources/lang/en/strings.php

@@ -34,6 +34,10 @@
     // Navigation
     'close'                             => 'Close',
     'menu'                              => 'Menu',
+    'nav_close'                         => 'Close navigation',
+    'nav_open'                          => 'Open navigation',
+    'subnav_close'                      => 'Close sub navigation',
+    'subnav_open'                       => 'Open sub navigation',
     'skip_to_content'                   => 'Skip to content',
 
     // Other

dev/resources/views/navigation/_main_desktop.antlers.html

@@ -17,6 +17,11 @@
                     "
                     {{ if children }}
                         href="#"
+                        :aria-label="
+                            subnavOpen
+                                ? '{{ trans:strings.subnav_close }}'
+                                : '{{ trans:strings.subnav_open }}'
+                        "
                         @click.prevent="subnavOpen = !subnavOpen"
                     {{ else }}
                         href="{{ url }}"

dev/resources/views/navigation/_main_mobile.antlers.html

@@ -9,7 +9,11 @@
     <button
         @click.prevent="mobileNavOpen = !mobileNavOpen"
         class="fixed bottom-0 right-0 z-20 flex items-center justify-center w-16 h-16 mr-8 text-xs font-bold text-white mb-safe bg-primary"
-        aria-label="Toggle menu"
+        :aria-label="
+        mobileNavOpen
+            ? '{{ trans:strings.nav_close }}'
+            : '{{ trans:strings.nav_open }}'
+        "
         x-text="mobileNavOpen ? '{{ trans:strings.close }}' : '{{ trans:strings.menu }}'"
     ></button>
 
@@ -32,6 +36,11 @@
                             href="#"
                             @click.prevent="mobileNavSubnavOpen = !mobileNavSubnavOpen"
                             @click.outside="mobileNavSubnavOpen = false"
+                            :aria-label="
+                            mobileNavSubnavOpen
+                                ? '{{ trans:strings.subnav_close }}'
+                                : '{{ trans:strings.subnav_open }}'
+                        "
                         {{ else }}
                             href="{{ url }}"
                         {{ /if }}