Skip to content

Commit

Permalink
Merge pull request #33826 from nextcloud/enh/a11y-unified-search
Browse files Browse the repository at this point in the history
Accessibility and design improvements to unified search
  • Loading branch information
PVince81 authored Sep 2, 2022
2 parents 30be6ad + a701617 commit b1be434
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 57 deletions.
4 changes: 2 additions & 2 deletions core/src/components/HeaderMenu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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 {
Expand Down
10 changes: 5 additions & 5 deletions core/src/components/UnifiedSearch/SearchResult.vue
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,7 @@
}"
:style="{
backgroundImage: isIconUrl ? `url(${icon})` : '',
}"
role="img">
}">

<img v-if="hasValidThumbnail"
v-show="loaded"
Expand All @@ -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>
Expand Down Expand Up @@ -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 {
Expand Down
116 changes: 69 additions & 47 deletions core/src/views/UnifiedSearch.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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;
Expand All @@ -705,7 +730,7 @@ $input-padding: 6px;
&__form {
position: relative;
width: 100%;
margin: $margin;
margin: $margin 0;
// Loading spinner
&::after {
Expand Down Expand Up @@ -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;
}
}
Expand Down
4 changes: 2 additions & 2 deletions dist/core-unified-search.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/core-unified-search.js.map

Large diffs are not rendered by default.

0 comments on commit b1be434

Please sign in to comment.