add nav landmark to settings and feed menu

3 files changed, 44 insertions, 25 deletions

diff --git a/internal/template/templates/common/feed_menu.html b/internal/template/templates/common/feed_menu.html
index bbbdcf04..c0b96a42 100644
--- a/internal/template/templates/common/feed_menu.html
+++ b/internal/template/templates/common/feed_menu.html
@@ -1,5 +1,5 @@
 {{ define "feed_menu" }}
-<ul>
+<nav aria-label="{{ t "page.feeds.title" }} {{ t "menu.title" }}"><ul>
     <li>
         <a href="{{ route "feeds" }}">{{ icon "feeds" }}{{ t "menu.feeds" }}</a>
     </li>
@@ -15,5 +15,5 @@
     <li>
         <a href="{{ route "refreshAllFeeds" }}">{{ icon "refresh" }}{{ t "menu.refresh_all_feeds" }}</a>
     </li>
-</ul>
+</ul></nav>
 {{ end }}
diff --git a/internal/template/templates/common/settings_menu.html b/internal/template/templates/common/settings_menu.html
index a664f3f8..1118483a 100644
--- a/internal/template/templates/common/settings_menu.html
+++ b/internal/template/templates/common/settings_menu.html
@@ -1,24 +1,26 @@
 {{ define "settings_menu" }}
-<ul>
-    <li>
-        <a href="{{ route "settings" }}">{{ icon "settings" }}{{ t "menu.settings" }}</a>
-    </li>
-    <li>
-        <a href="{{ route "integrations" }}">{{ icon "third-party-services" }}{{ t "menu.integrations" }}</a>
-    </li>
-    <li>
-        <a href="{{ route "apiKeys" }}">{{ icon "api" }}{{ t "menu.api_keys" }}</a>
-    </li>
-    <li>
-        <a href="{{ route "sessions" }}">{{ icon "sessions" }}{{ t "menu.sessions" }}</a>
-    </li>
-    {{ if .user.IsAdmin }}
+<nav aria-label="{{ t "page.settings.title" }} {{ t "menu.title" }}">
+    <ul>
         <li>
-            <a href="{{ route "users" }}">{{ icon "users" }}{{ t "menu.users" }}</a>
+            <a href="{{ route "settings" }}">{{ icon "settings" }}{{ t "menu.settings" }}</a>
         </li>
-    {{ end }}
-    <li>
-        <a href="{{ route "about" }}">{{ icon "about" }}{{ t "menu.about" }}</a>
-    </li>
-</ul>
-{{ end }}
\ No newline at end of file
+        <li>
+            <a href="{{ route "integrations" }}">{{ icon "third-party-services" }}{{ t "menu.integrations" }}</a>
+        </li>
+        <li>
+            <a href="{{ route "apiKeys" }}">{{ icon "api" }}{{ t "menu.api_keys" }}</a>
+        </li>
+        <li>
+            <a href="{{ route "sessions" }}">{{ icon "sessions" }}{{ t "menu.sessions" }}</a>
+        </li>
+        {{ if .user.IsAdmin }}
+            <li>
+                <a href="{{ route "users" }}">{{ icon "users" }}{{ t "menu.users" }}</a>
+            </li>
+        {{ end }}
+        <li>
+            <a href="{{ route "about" }}">{{ icon "about" }}{{ t "menu.about" }}</a>
+        </li>
+    </ul>
+</nav>
+{{ end }}
diff --git a/internal/ui/static/css/common.css b/internal/ui/static/css/common.css
index 46fdfb0d..e64ab5d5 100644
--- a/internal/ui/static/css/common.css
+++ b/internal/ui/static/css/common.css
@@ -99,12 +99,14 @@ a:hover {
    border: none;
    background-color: transparent;
    display: inline-block;
+   cursor: pointer;
 }
 
 .header nav button[aria-controls="header-menu"] svg {
     padding: 5px;
-    inline-size: 20px;
-    block-size: 20px;
+    inline-size: 24px;
+    block-size: 24px;
+    translate: 0 2px;
 }
 
 .header nav button[aria-controls="header-menu"][aria-expanded="true"] svg {
@@ -223,12 +225,23 @@ a:hover {
     margin-right: 5px;
 }
 
+.search details svg {
+   padding: 5px;
+   inline-size: 24px;
+   block-size: 24px;
+   translate: 0 -1px;
+}
+
 .search details[open] svg {
    rotate: 180deg;
 }
 
 .search details > summary {
   list-style: none;
+  display: flex;
+  justify-content: center;
+  inline-size: fit-content;
+  margin-inline: auto;
 }
 
 .search details > summary::marker, /* Latest Chrome, Edge, Firefox */
@@ -354,6 +367,10 @@ a:hover {
         display: block;
     }
 
+    .search details > summary {
+      margin-inline: auto 0;
+    }
+
     .search-toggle-switch {
         display: block;
     }