diff options
author | Vincent Petry <vincent@nextcloud.com> | 2022-09-02 13:22:46 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-09-02 13:22:46 +0300 |
commit | b1be4346cdf583864188e47055c3b1f336ad5587 (patch) | |
tree | c5aec591e314fa47d73f7b7595126850e87ce14d /core | |
parent | 30be6ad605f3e451c17de3df74ec3832e1758afe (diff) | |
parent | a7016170cfbb9bc842d4a5efc2539b9bd9add13f (diff) |
Merge pull request #33826 from nextcloud/enh/a11y-unified-search
Accessibility and design improvements to unified search
Diffstat (limited to 'core')
-rw-r--r-- | core/src/components/HeaderMenu.vue | 4 | ||||
-rw-r--r-- | core/src/components/UnifiedSearch/SearchResult.vue | 10 | ||||
-rw-r--r-- | core/src/views/UnifiedSearch.vue | 116 |
3 files changed, 76 insertions, 54 deletions
diff --git a/core/src/components/HeaderMenu.vue b/core/src/components/HeaderMenu.vue index fc8936ba07c..9a78b769dc3 100644 --- a/core/src/components/HeaderMenu.vue +++ b/core/src/components/HeaderMenu.vue @@ -29,7 +29,6 @@ :aria-label="ariaLabel" :aria-controls="`header-menu-${id}`" :aria-expanded="opened.toString()" - aria-haspopup="menu" @click.prevent="toggleMenu"> <slot name="trigger" /> </a> @@ -195,8 +194,9 @@ export default { margin: 0; border-radius: 0 0 var(--border-radius) var(--border-radius); background-color: var(--color-main-background); - filter: drop-shadow(0 1px 5px var(--color-box-shadow)); + padding: 20px; + border-radius: var(--border-radius-large); } &__carret { diff --git a/core/src/components/UnifiedSearch/SearchResult.vue b/core/src/components/UnifiedSearch/SearchResult.vue index dfd20868480..9c787de111c 100644 --- a/core/src/components/UnifiedSearch/SearchResult.vue +++ b/core/src/components/UnifiedSearch/SearchResult.vue @@ -38,8 +38,7 @@ }" :style="{ backgroundImage: isIconUrl ? `url(${icon})` : '', - }" - role="img"> + }"> <img v-if="hasValidThumbnail" v-show="loaded" @@ -51,10 +50,10 @@ <!-- Title and sub-title --> <span class="unified-search__result-content"> - <h3 class="unified-search__result-line-one" :title="title"> + <span class="unified-search__result-line-one" :title="title"> <NcHighlight :text="title" :search="query" /> - </h3> - <h4 v-if="subline" class="unified-search__result-line-two" :title="subline">{{ subline }}</h4> + </span> + <span v-if="subline" class="unified-search__result-line-two" :title="subline">{{ subline }}</span> </span> </a> </template> @@ -173,6 +172,7 @@ $margin: 10px; height: $clickable-area; padding: $margin; border-bottom: 1px solid var(--color-border); + border-radius: var(--border-radius-large) !important; // Load more entry, &:last-child { diff --git a/core/src/views/UnifiedSearch.vue b/core/src/views/UnifiedSearch.vue index 32e3073b3aa..e7d3f9d5809 100644 --- a/core/src/views/UnifiedSearch.vue +++ b/core/src/views/UnifiedSearch.vue @@ -36,45 +36,53 @@ <!-- Search form & filters wrapper --> <div class="unified-search__input-wrapper"> - <form class="unified-search__form" - role="search" - :class="{'icon-loading-small': isLoading}" - @submit.prevent.stop="onInputEnter" - @reset.prevent.stop="onReset"> - <!-- Search input --> - <input ref="input" - v-model="query" - class="unified-search__form-input" - type="search" - :class="{'unified-search__form-input--with-reset': !!query}" - :placeholder="t('core', 'Search {types} …', { types: typesNames.join(', ') })" - @input="onInputDebounced" - @keypress.enter.prevent.stop="onInputEnter"> - - <!-- Reset search button --> - <input v-if="!!query && !isLoading" - type="reset" - class="unified-search__form-reset icon-close" - :aria-label="t('core','Reset search')" - value=""> - - <input v-if="!!query && !isLoading && !enableLiveSearch" - type="submit" - class="unified-search__form-submit icon-confirm" - :aria-label="t('core','Start search')" - value=""> - </form> - - <!-- Search filters --> - <NcActions v-if="availableFilters.length > 1" class="unified-search__filters" placement="bottom"> - <NcActionButton v-for="type in availableFilters" - :key="type" - icon="icon-filter" - :title="t('core', 'Search for {name} only', { name: typesMap[type] })" - @click="onClickFilter(`in:${type}`)"> - {{ `in:${type}` }} - </NcActionButton> - </NcActions> + <label for="unified-search__input">{{ ariaLabel }}</label> + <div class="unified-search__input-row"> + <form class="unified-search__form" + role="search" + :class="{'icon-loading-small': isLoading}" + @submit.prevent.stop="onInputEnter" + @reset.prevent.stop="onReset"> + <!-- Search input --> + <input ref="input" + id="unified-search__input" + v-model="query" + class="unified-search__form-input" + type="search" + :class="{'unified-search__form-input--with-reset': !!query}" + :placeholder="t('core', 'Search {types} …', { types: typesNames.join(', ') })" + aria-describedby="unified-search-desc" + @input="onInputDebounced" + @keypress.enter.prevent.stop="onInputEnter"> + <p id="unified-search-desc" class="hidden-visually"> + {{ t('core', 'Search starts once you start typing') }} + </p> + + <!-- Reset search button --> + <input v-if="!!query && !isLoading" + type="reset" + class="unified-search__form-reset icon-close" + :aria-label="t('core','Reset search')" + value=""> + + <input v-if="!!query && !isLoading && !enableLiveSearch" + type="submit" + class="unified-search__form-submit icon-confirm" + :aria-label="t('core','Start search')" + value=""> + </form> + + <!-- Search filters --> + <NcActions v-if="availableFilters.length > 1" class="unified-search__filters" placement="bottom"> + <NcActionButton v-for="type in availableFilters" + :key="type" + icon="icon-filter" + :title="t('core', 'Search for {name} only', { name: typesMap[type] })" + @click="onClickFilter(`in:${type}`)"> + {{ `in:${type}` }} + </NcActionButton> + </NcActions> + </div> </div> <template v-if="!hasResults"> @@ -113,6 +121,10 @@ class="unified-search__results" :class="`unified-search__results-${type}`" :aria-label="typesMap[type]"> + <h2 class="unified-search__results-header"> + {{ typesMap[type] }} + </h2> + <!-- Search results --> <li v-for="(result, index) in limitIfAny(list, type)" :key="result.resourceUrl"> <SearchResult v-bind="result" @@ -689,13 +701,26 @@ $input-padding: 6px; z-index: 2; top: 0; display: inline-flex; + flex-direction: column; align-items: center; width: 100%; background-color: var(--color-main-background); + + label[for="unified-search__input"] { + align-self: flex-start; + font-weight: bold; + font-size: 18px; + } + } + + &__input-row { + display: flex; + width: 100%; + align-items: center; } &__filters { - margin: math.div($margin, 2) $margin; + margin: $margin 0 $margin math.div($margin, 2); ul { display: inline-flex; justify-content: space-between; @@ -705,7 +730,7 @@ $input-padding: 6px; &__form { position: relative; width: 100%; - margin: $margin; + margin: $margin 0; // Loading spinner &::after { @@ -770,17 +795,14 @@ $input-padding: 6px; } } - &__filters { - margin-right: math.div($margin, 2); - } - &__results { - &::before { + &-header { display: block; margin: $margin; margin-left: $margin + $input-padding; - content: attr(aria-label); color: var(--color-primary-element); + font-weight: normal; + font-size: 18px; } } |