diff options
Diffstat (limited to 'resources')
| -rw-r--r-- | resources/vue/apps/GlobalSearchBar.vue | 79 | ||||
| -rw-r--r-- | 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. ' + |