mirror of https://github.com/nextcloud/server
Accessibility improvements to unified search
Signed-off-by: Christopher Ng <chrng8@gmail.com>
This commit is contained in:
Christopher Ng
parent
f167fe0ceb
commit
a7016170cf
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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="">
|
||||
<!-- 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>
|
||||
<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>
|
||||
<!-- 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue