Merge pull request #33826 from nextcloud/enh/a11y-unified-search

Accessibility and design improvements to unified search
nextcloud · Sep 2, 2022 · b1be434 · b1be434
2 parents 30be6ad + a701617
commit b1be434
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 57 deletions.
diff --git 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
@@ -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
@@ -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;
 		}
 	}
 

diff --git a/dist/core-unified-search.js b/dist/core-unified-search.js
diff --git a/dist/core-unified-search.js.map b/dist/core-unified-search.js.map