From ac09c3ac5ea8377ff27001fd9917f986a329fcf7 Mon Sep 17 00:00:00 2001
From: Jan-Hendrik Willms <tleilax+studip@gmail.com>
Date: Fri, 21 Nov 2025 16:32:30 +0100
Subject: a11y review pt1

---
 resources/vue/apps/GlobalSearchBar.vue            | 79 +++++++++++++++--------
 resources/vue/components/GlobalSearchBarHints.vue | 17 +++--
 2 files changed, 62 insertions(+), 34 deletions(-)

diff --git a/resources/vue/apps/GlobalSearchBar.vue b/resources/vue/apps/GlobalSearchBar.vue
index 78b8802..20535d1 100644
--- a/resources/vue/apps/GlobalSearchBar.vue
+++ b/resources/vue/apps/GlobalSearchBar.vue
@@ -14,36 +14,42 @@
                :placeholder="$gettext('Was suchen Sie?')"
                role="combobox"
                aria-haspopup="listbox"
-               aria-expanded="false"
+               :aria-expanded="ariaExpanded"
                aria-controls="globalsearch-list"
                :aria-label="$gettext('Suche nach Objekten und Personen in Stud.IP')"
                @keyup.enter.prevent="doSearch()"
         >
-        <studip-icon v-if="needle.length > 0"
-                     shape="decline"
-                     tabindex="0"
-                     name="reset-search"
-                     id="globalsearch-clear"
-                     class="hidden-small-down"
-                     @click="resetSearch()"
-                     :alt="$gettext('Suche zurücksetzen')"
-        ></studip-icon>
-        <studip-icon shape="search"
-                     role="info_alt"
-                     tabindex="0"
-                     name="start-search"
-                     id="globalsearch-icon"
-                     @click.prevent="doSearch()"
-                     :alt="$gettext('Suche starten')"
-        ></studip-icon>
+        <button v-if="needle.length > 0"
+                type="button"
+                id="globalsearch-clear"
+                class="hidden-small-down as-link"
+                :aria-label="$gettext('Suche zurücksetzen')"
+                @click="resetSearch()"
+        >
+            <studip-icon v-if="needle.length > 0"
+                         shape="decline"
+                         aria-hidden="true"
+            ></studip-icon>
+        </button>
+        <button type="button"
+                id="globalsearch-icon"
+                class="as-link"
+                :aria-label="$gettext('Suche starten')"
+                @click="doSearch()"
+        >
+            <studip-icon shape="search"
+                         role="info_alt"
+            ></studip-icon>
+        </button>
+
 
         <div id="globalsearch-list"
              role="listbox">
             <button class="as-link"
+                    type="button"
                     id="globalsearch-togglehints"
-                    tabindex="0"
                     :class="{open: showHints}"
-                    @click.prevent="showHints = !showHints"
+                    @click="showHints = !showHints"
             >
                 {{ showHints ? $gettext('Tipps ausblenden') : $gettext('Tipps einblenden') }}
             </button>
@@ -68,18 +74,21 @@
                     <article v-for="(value, category) in displayedResults"
                              :key="category"
                              :id="`globalsearch-${category}`"
+                             :aria-expanded="selectedCategory === null || selectedCategory === category"
                     >
                         <header class="globalsearch-category" :data-category="category">
-                            <a href="#" @click.prevent="toggleCategory(category)">
+                            <button type="button"
+                                    class="as-link"
+                                    @click="toggleCategory(category)"
+                            >
                                 {{ value.name }}
-                            </a>
-                            <div v-if="value.more && value.fullsearch !== ''"
-                                 class="globalsearch-more-results"
+                            </button>
+                            <a v-if="value.more && value.fullsearch !== ''"
+                               :href="value.fullsearch"
+                               class="globalsearch-more-results"
                             >
-                                <a :href="value.fullsearch">
-                                    {{ $gettext('alle anzeigen') }}
-                                </a>
-                            </div>
+                                {{ $gettext('alle anzeigen') }}
+                            </a>
                         </header>
                         <a v-for="(result, index) in value.content"
                            :key="`result-${category}-${index}`"
@@ -157,6 +166,13 @@ export default {
         }
     },
     computed: {
+        ariaExpanded() {
+            return this.isVisible && (
+                this.showHints
+                || this.isSearching
+                || this.result !== null
+            );
+        },
         displayedResults() {
             let results = {};
             Object.keys(this.results).forEach((key) => {
@@ -326,3 +342,10 @@ export default {
     }
 }
 </script>
+<style lang="scss" scoped>
+#globalsearch-searchbar {
+    > button.as-link .studip-icon {
+        vertical-align: top;
+    }
+}
+</style>
diff --git a/resources/vue/components/GlobalSearchBarHints.vue b/resources/vue/components/GlobalSearchBarHints.vue
index 5c9c542..fda1571 100644
--- a/resources/vue/components/GlobalSearchBarHints.vue
+++ b/resources/vue/components/GlobalSearchBarHints.vue
@@ -1,14 +1,19 @@
 <template>
-    <article id="globalsearch-hints" aria-live="polite">
+    <article id="globalsearch-hints">
+        <header>
+            <h2>{{ $gettext('Tipps zur Globalen Suche') }}</h2>
+        </header>
         <section>
-            <header>{{ $gettext('Hinweis:') }}</header>
+            <header>
+                <h3>{{ $gettext('Hinweis zur Suche') }}</h3>
+            </header>
             <p>
                  {{ $gettext('Die Schnellsuche findet nur Ergebnisse im aktuellen Semester.') }}
             </p>
         </section>
         <section>
             <header>
-                {{ $gettext('[STRG] + [Leertaste]') }}
+                <h3>{{ $gettext('[STRG] + [Leertaste]') }}</h3>
             </header>
             <p>
                 {{ $gettext('Tastenkombination zum Öffnen und Schließen') }}
@@ -16,7 +21,7 @@
         </section>
         <section>
             <header>
-                {{ $gettext('Platzhalter') }}
+                <h3>{{ $gettext('Platzhalter') }}</h3>
             </header>
             <p>
                 {{ $gettext('"_" ist Platzhalter für ein beliebiges Zeichen.') }}
@@ -30,7 +35,7 @@
         </section>
         <section>
             <header>
-                {{ $gettext('Klick auf Überschrift') }}
+                <h3>{{ $gettext('Klick auf Überschrift') }}</h3>
             </header>
             <p>
                 {{ $gettext('Erweitert die ausgewählte Suchkategorie, um mehr Suchergebnisse aus dieser Kategorie anzuzeigen. ' +
@@ -39,7 +44,7 @@
         </section>
         <section>
             <header>
-                {{ $gettext('Dateisuche') }}
+                <h3>{{ $gettext('Dateisuche') }}</h3>
             </header>
             <p>
                 {{ $gettext('Die Dateisuche kann über einen Schrägstrich (/) verfeinert werden. ' +
-- 
cgit v1.0