add search landmark and disclosure pattern to menu

internal/locale/translations/de_DE.json

@@ -19,6 +19,7 @@
     "tooltip.keyboard_shortcuts": "Tastenkürzel: %s",
     "tooltip.logged_user": "Angemeldet als %s",
     "menu.title": "Menu",
+    "menu.home_page": "Home page",
     "menu.unread": "Ungelesen",
     "menu.starred": "Lesezeichen",
     "menu.history": "Verlauf",
@@ -51,6 +52,7 @@
     "menu.shared_entries": "Geteilte Artikel",
     "search.label": "Suche",
     "search.placeholder": "Suche...",
+    "search.submit": "Submit",
     "pagination.next": "Nächste",
     "pagination.previous": "Vorherige",
     "entry.status.unread": "Ungelesen",

internal/locale/translations/el_EL.json

@@ -19,6 +19,7 @@
     "tooltip.keyboard_shortcuts": "Συντόμευση πληκτρολογίου: % s",
     "tooltip.logged_user": "Συνδεδεμένος/η ως %s",
     "menu.title": "Menu",
+    "menu.home_page": "Home page",
     "menu.unread": "Μη αναγνωσμένα",
     "menu.starred": "Αγαπημένα",
     "menu.history": "Ιστορικό",
@@ -51,6 +52,7 @@
     "menu.shared_entries": "Κοινόχρηστες καταχωρήσεις",
     "search.label": "Αναζήτηση",
     "search.placeholder": "Αναζήτηση...",
+    "search.submit": "Submit",
     "pagination.next": "Επόμενη",
     "pagination.previous": "Προηγούμενη",
     "entry.status.unread": "Μη αναγνωσμένο",

internal/locale/translations/en_US.json

@@ -19,6 +19,7 @@
     "tooltip.keyboard_shortcuts": "Keyboard Shortcut: %s",
     "tooltip.logged_user": "Logged in as %s",
     "menu.title": "Menu",
+    "menu.home_page": "Home page",
     "menu.unread": "Unread",
     "menu.starred": "Starred",
     "menu.history": "History",
@@ -51,6 +52,7 @@
     "menu.shared_entries": "Shared entries",
     "search.label": "Search",
     "search.placeholder": "Search…",
+    "search.submit": "Submit",
     "pagination.next": "Next",
     "pagination.previous": "Previous",
     "entry.status.unread": "Unread",

internal/locale/translations/es_ES.json

@@ -19,6 +19,7 @@
     "tooltip.keyboard_shortcuts": "Atajo de teclado: %s",
     "tooltip.logged_user": "Registrado como %s",
     "menu.title": "Menu",
+    "menu.home_page": "Home page",
     "menu.unread": "No leídos",
     "menu.starred": "Marcadores",
     "menu.history": "Historial",
@@ -51,6 +52,7 @@
     "menu.shared_entries": "Artículos compartidos",
     "search.label": "Buscar",
     "search.placeholder": "Búsqueda...",
+    "search.submit": "Submit",
     "pagination.next": "Siguiente",
     "pagination.previous": "Anterior",
     "entry.status.unread": "No leído",

internal/locale/translations/fi_FI.json

@@ -19,6 +19,7 @@
     "tooltip.keyboard_shortcuts": "Pikanäppäin: %s",
     "tooltip.logged_user": "Kirjautunut %s-käyttäjänä",
     "menu.title": "Menu",
+    "menu.home_page": "Home page",
     "menu.unread": "Lukemattomat",
     "menu.starred": "Suosikit",
     "menu.history": "Historia",
@@ -51,6 +52,7 @@
     "menu.shared_entries": "Jaetut artikkelit",
     "search.label": "Haku",
     "search.placeholder": "Hae...",
+    "search.submit": "Submit",
     "pagination.next": "Seuraava",
     "pagination.previous": "Edellinen",
     "entry.status.unread": "Lukematon",

internal/locale/translations/fr_FR.json

@@ -19,6 +19,7 @@
     "tooltip.keyboard_shortcuts": "Raccourci clavier : %s",
     "tooltip.logged_user": "Connecté en tant que %s",
     "menu.title": "Menu",
+    "menu.home_page": "Home page",
     "menu.unread": "Non lus",
     "menu.starred": "Favoris",
     "menu.history": "Historique",
@@ -51,6 +52,7 @@
     "menu.shared_entries": "Articles partagés",
     "search.label": "Recherche",
     "search.placeholder": "Recherche...",
+    "search.submit": "Submit",
     "pagination.next": "Suivant",
     "pagination.previous": "Précédent",
     "entry.status.unread": "Non lu",

internal/locale/translations/hi_IN.json

@@ -19,6 +19,7 @@
     "tooltip.keyboard_shortcuts": "कुंजीपटल संक्षिप्त रीति: %s",
     "tooltip.logged_user": "%s के रूप में लॉग इन किया",
     "menu.title": "Menu",
+    "menu.home_page": "Home page",
     "menu.unread": "अपठित",
     "menu.starred": "तारांकित",
     "menu.history": "इतिहास",
@@ -51,6 +52,7 @@
     "menu.shared_entries": "साझा प्रविष्टियां",
     "search.label": "खोजे",
     "search.placeholder": "खोजे...",
+    "search.submit": "Submit",
     "pagination.next": "अगला",
     "pagination.previous": "पिछला",
     "entry.status.unread": "अपठित",

internal/locale/translations/id_ID.json

@@ -19,6 +19,7 @@
     "tooltip.keyboard_shortcuts": "Pintasan Papan Tik: %s",
     "tooltip.logged_user": "Masuk sebagai %s",
     "menu.title": "Menu",
+    "menu.home_page": "Home page",
     "menu.unread": "Belum Dibaca",
     "menu.starred": "Markah",
     "menu.history": "Riwayat",
@@ -51,6 +52,7 @@
     "menu.shared_entries": "Entri yang Dibagikan",
     "search.label": "Cari",
     "search.placeholder": "Cari...",
+    "search.submit": "Submit",
     "pagination.next": "Berikutnya",
     "pagination.previous": "Sebelumnya",
     "entry.status.unread": "Belum dibaca",

internal/locale/translations/it_IT.json

@@ -19,6 +19,7 @@
     "tooltip.keyboard_shortcuts": "Scorciatoia da tastiera: %s",
     "tooltip.logged_user": "Autenticato come %s",
     "menu.title": "Menu",
+    "menu.home_page": "Home page",
     "menu.unread": "Da leggere",
     "menu.starred": "Preferiti",
     "menu.history": "Cronologia",
@@ -51,6 +52,7 @@
     "menu.shared_entries": "Voci condivise",
     "search.label": "Cerca",
     "search.placeholder": "Cerca...",
+    "search.submit": "Submit",
     "pagination.next": "Successivo",
     "pagination.previous": "Precedente",
     "entry.status.unread": "Da leggere",

internal/locale/translations/ja_JP.json

@@ -19,6 +19,7 @@
     "tooltip.keyboard_shortcuts": "キーボードショートカット: %s",
     "tooltip.logged_user": "%s としてログイン中",
     "menu.title": "Menu",
+    "menu.home_page": "Home page",
     "menu.unread": "未読",
     "menu.starred": "星付き",
     "menu.history": "履歴",
@@ -51,6 +52,7 @@
     "menu.shared_entries": "共有エントリ",
     "search.label": "検索",
     "search.placeholder": "…を検索",
+    "search.submit": "Submit",
     "pagination.next": "次",
     "pagination.previous": "前",
     "entry.status.unread": "未読にする",

internal/locale/translations/nl_NL.json

@@ -19,6 +19,7 @@
     "tooltip.keyboard_shortcuts": "Sneltoets: %s",
     "tooltip.logged_user": "Ingelogd als %s",
     "menu.title": "Menu",
+    "menu.home_page": "Home page",
     "menu.unread": "Ongelezen",
     "menu.starred": "Favorieten",
     "menu.history": "Geschiedenis",
@@ -51,6 +52,7 @@
     "menu.shared_entries": "Gedeelde vermeldingen",
     "search.label": "Zoeken",
     "search.placeholder": "Zoeken...",
+    "search.submit": "Submit",
     "pagination.next": "Volgende",
     "pagination.previous": "Vorige",
     "entry.status.unread": "Ongelezen",

internal/locale/translations/pl_PL.json

@@ -19,6 +19,7 @@
     "tooltip.keyboard_shortcuts": "Skróty klawiszowe: %s",
     "tooltip.logged_user": "Zalogowany jako %s",
     "menu.title": "Menu",
+    "menu.home_page": "Home page",
     "menu.unread": "Nieprzeczytane",
     "menu.starred": "Ulubione",
     "menu.history": "Historia",
@@ -51,6 +52,7 @@
     "menu.shared_entries": "Udostępnione wpisy",
     "search.label": "Szukaj",
     "search.placeholder": "Szukaj...",
+    "search.submit": "Submit",
     "pagination.next": "Następny",
     "pagination.previous": "Poprzedni",
     "entry.status.unread": "Nieprzeczytane",

internal/locale/translations/pt_BR.json

@@ -19,6 +19,7 @@
     "tooltip.keyboard_shortcuts": "Atalho do teclado: %s",
     "tooltip.logged_user": "Autenticado como %s",
     "menu.title": "Menu",
+    "menu.home_page": "Home page",
     "menu.unread": "Não lido",
     "menu.starred": "Favoritos",
     "menu.history": "Histórico",
@@ -51,6 +52,7 @@
     "menu.shared_entries": "Itens compartilhados",
     "search.label": "Buscar",
     "search.placeholder": "Buscar por...",
+    "search.submit": "Submit",
     "pagination.next": "Próximo",
     "pagination.previous": "Anterior",
     "entry.status.unread": "Não lido",

internal/locale/translations/ru_RU.json

@@ -19,6 +19,7 @@
     "tooltip.keyboard_shortcuts": "Сочетания клавиш: %s",
     "tooltip.logged_user": "Авторизован как %s",
     "menu.title": "Menu",
+    "menu.home_page": "Home page",
     "menu.unread": "Непрочитанное",
     "menu.starred": "Избранное",
     "menu.history": "История",
@@ -51,6 +52,7 @@
     "menu.shared_entries": "Общие записи",
     "search.label": "Поиск",
     "search.placeholder": "Поиск…",
+    "search.submit": "Submit",
     "pagination.next": "Следующая",
     "pagination.previous": "Предыдущая",
     "entry.status.unread": "Не прочитано",

internal/locale/translations/tr_TR.json

@@ -19,6 +19,7 @@
     "tooltip.keyboard_shortcuts": "Klavye Kısayolu: %s",
     "tooltip.logged_user": "%s olarak giriş yapıldı",
     "menu.title": "Menu",
+    "menu.home_page": "Home page",
     "menu.unread": "Okunmadı",
     "menu.starred": "Yıldız",
     "menu.history": "Geçmiş",
@@ -51,6 +52,7 @@
     "menu.shared_entries": "Paylaşılan iletiler",
     "search.label": "Ara",
     "search.placeholder": "Ara...",
+    "search.submit": "Submit",
     "pagination.next": "Sonraki",
     "pagination.previous": "Önceki",
     "entry.status.unread": "Okunmadı",

internal/locale/translations/uk_UA.json

@@ -19,6 +19,7 @@
     "tooltip.keyboard_shortcuts": "Комбінація клавіш: %s",
     "tooltip.logged_user": "Здійснено вхід як %s",
     "menu.title": "Menu",
+    "menu.home_page": "Home page",
     "menu.unread": "Непрочитане",
     "menu.starred": "З зірочкою",
     "menu.history": "Історія",
@@ -51,6 +52,7 @@
     "menu.shared_entries": "Спільні записи",
     "search.label": "Пошук",
     "search.placeholder": "Шукати...",
+    "search.submit": "Submit",
     "pagination.next": "Вперед",
     "pagination.previous": "Назад",
     "entry.status.unread": "Непрочитане",

internal/locale/translations/zh_CN.json

@@ -19,6 +19,7 @@
     "tooltip.keyboard_shortcuts": "快捷键: %s",
     "tooltip.logged_user": "当前登录 %s",
     "menu.title": "Menu",
+    "menu.home_page": "Home page",
     "menu.unread": "未读",
     "menu.starred": "收藏",
     "menu.history": "历史",
@@ -51,6 +52,7 @@
     "menu.shared_entries": "已分享的文章",
     "search.label": "搜索",
     "search.placeholder": "搜索…",
+    "search.submit": "Submit",
     "pagination.next": "下一页",
     "pagination.previous": "上一页",
     "entry.status.unread": "标为未读",

internal/locale/translations/zh_TW.json

@@ -51,6 +51,7 @@
     "menu.shared_entries": "已分享的文章",
     "search.label": "搜尋",
     "search.placeholder": "搜尋…",
+    "search.submit": "送出",
     "pagination.next": "下一頁",
     "pagination.previous": "上一頁",
     "entry.status.unread": "標為未讀",
@@ -289,7 +290,7 @@
     "error.invalid_entry_direction": "無效的輸入方向。",
     "error.invalid_display_mode": "無效的網頁應用顯示模式。",
     "error.invalid_gesture_nav": "手勢導航無效.",
-    "error.invalid_default_home_page": "默認主頁無效！",
+    "error.invalid_default_home_page": "預設主頁無效！",
     "form.feed.label.title": "標題",
     "form.feed.label.site_url": "網站 URL",
     "form.feed.label.feed_url": "訂閱 Feed URL",
@@ -348,7 +349,7 @@
     "form.prefs.label.show_reading_time": "顯示文章的預計閱讀時間",
     "form.prefs.label.custom_css": "自定義 CSS",
     "form.prefs.label.entry_order": "文章排序依據",
-    "form.prefs.label.default_home_page": "默認主頁",
+    "form.prefs.label.default_home_page": "預設主頁",
     "form.prefs.label.categories_sorting_order": "分類排序",
     "form.prefs.label.mark_read_on_view": "查看時自動將條目標記為已讀",
     "form.prefs.fieldset.application_settings": "應用程式設定",

internal/template/templates/common/layout.html

@@ -66,54 +66,64 @@
     </a>
     <header class="header">
         <nav>
-            <div class="logo">
+            <details>
-                <a href="{{ route .user.DefaultHomePage }}">Mini<span>flux</span></a>
+                <summary  aria-label="{{ t "menu.title" }}">
-            </div>
+                    <div class="logo"><a aria-label="{{ t "menu.home_page" }}" href="{{ route .user.DefaultHomePage }}">Mini<span>flux</span></a></div>
-            <ul>
+                    <svg aria-label="{{ t "menu.title" }}" xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
-                <li {{ if eq .menu "unread" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g u" }}">
+                        <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/>
-                    <a href="{{ route "unread" }}" data-page="unread">{{ t "menu.unread" }}
+                    </svg>
-                      {{ if gt .countUnread 0 }}
+                </summary>
-                          <span class="unread-counter-wrapper">(<span class="unread-counter">{{ .countUnread }}</span>)</span>
+                <ul id="header-menu">
-                      {{ end }}
+                    <li {{ if eq .menu "unread" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g u" }}">
-                    </a>
+                        <a href="{{ route "unread" }}" data-page="unread">{{ t "menu.unread" }}
-                </li>
+                          {{ if gt .countUnread 0 }}
-                <li {{ if eq .menu "starred" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g b" }}">
+                              <span class="unread-counter-wrapper">(<span class="unread-counter">{{ .countUnread }}</span>)</span>
-                    <a href="{{ route "starred" }}" data-page="starred">{{ t "menu.starred" }}</a>
+                          {{ end }}
-                </li>
+                        </a>
-                <li {{ if eq .menu "history" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g h" }}">
-                    <a href="{{ route "history" }}" data-page="history">{{ t "menu.history" }}</a>
-                </li>
-                <li {{ if eq .menu "feeds" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g f" }}">
-                    <a href="{{ route "feeds" }}" data-page="feeds">{{ t "menu.feeds" }}
-                      {{ if gt .countErrorFeeds 0 }}
-                          <span class="error-feeds-counter-wrapper">(<span class="error-feeds-counter">{{ .countErrorFeeds }}</span>)</span>
-                      {{ end }}
-                    </a>
-                    <a href="{{ route "addSubscription" }}" title="{{ t "tooltip.keyboard_shortcuts" "+" }}">
-                        (+)
-                    </a>
-                </li>
-                <li {{ if eq .menu "categories" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g c" }}">
-                    <a href="{{ route "categories" }}" data-page="categories">{{ t "menu.categories" }}</a>
-                </li>
-                <li {{ if eq .menu "settings" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g s" }}">
-                    <a href="{{ route "settings" }}" data-page="settings">{{ t "menu.settings" }}</a>
-                </li>
-                {{ if not hasAuthProxy }}
-                    <li>
-                        <a href="{{ route "logout" }}" title="{{ t "tooltip.logged_user" .user.Username }}">{{ t "menu.logout" }}</a>
                     </li>
-                {{ end }}
+                    <li {{ if eq .menu "starred" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g b" }}">
-            </ul>
+                        <a href="{{ route "starred" }}" data-page="starred">{{ t "menu.starred" }}</a>
-            <div class="search">
+                    </li>
-                <div class="search-toggle-switch {{ if $.searchQuery }}has-search-query{{ end }}">
+                    <li {{ if eq .menu "history" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g h" }}">
-                    <a href="#" data-action="search">&laquo;&nbsp;{{ t "search.label" }}</a>
+                        <a href="{{ route "history" }}" data-page="history">{{ t "menu.history" }}</a>
-                </div>
+                    </li>
-                <form action="{{ route "searchEntries" }}" class="search-form {{ if $.searchQuery }}has-search-query{{ end }}">
+                    <li {{ if eq .menu "feeds" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g f" }}">
-                    <input type="search" name="q" id="search-input" placeholder="{{ t "search.placeholder" }}" {{ if $.searchQuery }}value="{{ .searchQuery }}"{{ end }} required>
+                        <a href="{{ route "feeds" }}" data-page="feeds">{{ t "menu.feeds" }}
-                </form>
+                          {{ if gt .countErrorFeeds 0 }}
-            </div>
+                              <span class="error-feeds-counter-wrapper">(<span class="error-feeds-counter">{{ .countErrorFeeds }}</span>)</span>
+                          {{ end }}
+                        </a>
+                        <a href="{{ route "addSubscription" }}" title="{{ t "tooltip.keyboard_shortcuts" "+" }}">
+                            (+)
+                        </a>
+                    </li>
+                    <li {{ if eq .menu "categories" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g c" }}">
+                        <a href="{{ route "categories" }}" data-page="categories">{{ t "menu.categories" }}</a>
+                    </li>
+                    <li {{ if eq .menu "settings" }}class="active"{{ end }} title="{{ t "tooltip.keyboard_shortcuts" "g s" }}">
+                        <a href="{{ route "settings" }}" data-page="settings">{{ t "menu.settings" }}</a>
+                    </li>
+                    {{ if not hasAuthProxy }}
+                        <li>
+                            <a href="{{ route "logout" }}" title="{{ t "tooltip.logged_user" .user.Username }}">{{ t "menu.logout" }}</a>
+                        </li>
+                    {{ end }}
+                </ul>
+            </details>
         </nav>
+        <search role="search" class="search">
+            <details {{ if $.searchQuery }}open{{ end }}>
+                <summary>{{ t "search.label" }}</summary>
+                <form action="{{ route "searchEntries" }}" aria-labelledby="search-input-label">
+                    <label class="sr-only" for="search-input" id="search-input-label">{{ t "search.label" }}</label>
+                    <input type="search" name="q" id="search-input" {{ if $.searchQuery }}value="{{ .searchQuery }}"{{ end }} required>
+                    <button type="submit">{{ t "search.submit" }}</button>
+                </form>
+            </details>
+            <!-- <div class="search-toggle-switch {{ if $.searchQuery }}has-search-query{{ end }}"> -->
+            <!--     <a href="#" data-action="search">&laquo;&nbsp;{{ t "search.label" }}</a> -->
+            <!-- </div> -->
+        </search>
     </header>
     {{ end }}
     {{ if .flashMessage }}

internal/ui/static/css/common.css

@@ -89,7 +89,27 @@ a:hover {
     margin-bottom: 20px;
 }
 
-.header nav ul {
+.header nav {
+    display: flex;
+    align-items: center;
+}
+
+.header nav details {
+    flex: 1;
+}
+
+.header nav details[open] svg {
+    rotate: 180deg;
+}
+
+.header nav summary {
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+}
+.header nav summary::-webkit-details-marker {
     display: none;
 }
 
@@ -188,7 +208,8 @@ a:hover {
 /* Search form */
 .search {
     text-align: center;
-    display: none;
+    margin-top: 10px;
+    margin-right: 5px;
 }
 
 .search-toggle-switch {
@@ -266,10 +287,6 @@ a:hover {
         margin-left: 5px;
     }
 
-    .header nav ul {
-        display: block;
-    }
-
     .header li {
         display: inline;
         padding: 0;
@@ -289,8 +306,6 @@ a:hover {
     .search {
         text-align: right;
         display: block;
-        margin-top: 10px;
-        margin-right: 5px;
     }
 
     .search-toggle-switch {

internal/ui/static/js/app.js

@@ -28,17 +28,13 @@ function onAuxClick(selector, callback, noPreventDefault) {
 // Show and hide the main menu on mobile devices.
 function toggleMainMenu() {
     let menu = document.querySelector(".header nav ul");
+    let menuToggleButton = document.querySelector(".header .logo a");
     if (DomHelper.isVisible(menu)) {
         menu.style.display = "none";
+        menuToggleButton.setAttribute("aria-expanded", false)
     } else {
         menu.style.display = "block";
-    }
+        menuToggleButton.setAttribute("aria-expanded", true)
-
-    let searchElement = document.querySelector(".header .search");
-    if (DomHelper.isVisible(searchElement)) {
-        searchElement.style.display = "none";
-    } else {
-        searchElement.style.display = "block";
     }
 }
 

internal/ui/static/js/bootstrap.js

@@ -113,7 +113,6 @@ document.addEventListener("DOMContentLoaded", () => {
     }, true);
 
     if (document.documentElement.clientWidth < 600) {
-        onClick(".logo", () => toggleMainMenu());
         onClick(".header nav li", (event) => onClickMainMenuListItem(event));
     }