From 41ed0cee1da14fe1936a285340def6ca4cc59a37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Fri, 13 May 2022 12:40:05 +0200
Subject: [PATCH] Improve filter popover accessibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/Controls.vue | 223 ++++++++++++++++++------------------
 1 file changed, 114 insertions(+), 109 deletions(-)

diff --git a/src/components/Controls.vue b/src/components/Controls.vue
index d5ecb88c0..4f451737e 100644
--- a/src/components/Controls.vue
+++ b/src/components/Controls.vue
@@ -70,107 +70,113 @@
 				</form>
 			</div>
 			<div v-if="board" class="board-action-buttons">
-				<Popover @show="filterVisible=true" @hide="filterVisible=false">
-					<Actions slot="trigger" :title="t('deck', 'Apply filter')">
-						<ActionButton v-if="isFilterActive" icon="icon-filter_set" />
-						<ActionButton v-else icon="icon-filter" />
-					</Actions>
+				<div class="board-action-buttons__filter">
+					<Popover container=".board-action-buttons__filter"
+						:placement="'bottom-end'"
+						:aria-label="t('deck', 'Active filters')"
+						@show="filterVisible=true"
+						@hide="filterVisible=false">
+						<Actions slot="trigger" :title="t('deck', 'Apply filter')">
+							<ActionButton v-if="isFilterActive" icon="icon-filter_set" />
+							<ActionButton v-else icon="icon-filter" />
+						</Actions>
 
-					<div v-if="filterVisible" class="filter">
-						<h3>{{ t('deck', 'Filter by tag') }}</h3>
-						<div v-for="label in labelsSorted" :key="label.id" class="filter--item">
-							<input :id="label.id"
-								v-model="filter.tags"
-								type="checkbox"
-								class="checkbox"
-								:value="label.id"
-								@change="setFilter">
-							<label :for="label.id"><span class="label" :style="labelStyle(label)">{{ label.title }}</span></label>
+						<div v-if="filterVisible" class="filter">
+							<h3>{{ t('deck', 'Filter by tag') }}</h3>
+							<div v-for="label in labelsSorted" :key="label.id" class="filter--item">
+								<input :id="label.id"
+									v-model="filter.tags"
+									type="checkbox"
+									class="checkbox"
+									:value="label.id"
+									@change="setFilter">
+								<label :for="label.id"><span class="label" :style="labelStyle(label)">{{ label.title }}</span></label>
+							</div>
+
+							<h3>{{ t('deck', 'Filter by assigned user') }}</h3>
+							<div class="filter--item">
+								<input id="unassigned"
+									v-model="filter.unassigned"
+									type="checkbox"
+									class="checkbox"
+									value="unassigned"
+									@change="setFilter"
+									@click="beforeSetFilter">
+								<label for="unassigned">{{ t('deck', 'Unassigned') }}</label>
+							</div>
+							<div v-for="user in board.users" :key="user.uid" class="filter--item">
+								<input :id="user.uid"
+									v-model="filter.users"
+									type="checkbox"
+									class="checkbox"
+									:value="user.uid"
+									@change="setFilter">
+								<label :for="user.uid"><Avatar :user="user.uid" :size="24" :disable-menu="true" /> {{ user.displayname }}</label>
+							</div>
+
+							<h3>{{ t('deck', 'Filter by due date') }}</h3>
+
+							<div class="filter--item">
+								<input id="overdue"
+									v-model="filter.due"
+									type="radio"
+									class="radio"
+									value="overdue"
+									@change="setFilter"
+									@click="beforeSetFilter">
+								<label for="overdue">{{ t('deck', 'Overdue') }}</label>
+							</div>
+
+							<div class="filter--item">
+								<input id="dueToday"
+									v-model="filter.due"
+									type="radio"
+									class="radio"
+									value="dueToday"
+									@change="setFilter"
+									@click="beforeSetFilter">
+								<label for="dueToday">{{ t('deck', 'Next 24 hours') }}</label>
+							</div>
+
+							<div class="filter--item">
+								<input id="dueWeek"
+									v-model="filter.due"
+									type="radio"
+									class="radio"
+									value="dueWeek"
+									@change="setFilter"
+									@click="beforeSetFilter">
+								<label for="dueWeek">{{ t('deck', 'Next 7 days') }}</label>
+							</div>
+
+							<div class="filter--item">
+								<input id="dueMonth"
+									v-model="filter.due"
+									type="radio"
+									class="radio"
+									value="dueMonth"
+									@change="setFilter"
+									@click="beforeSetFilter">
+								<label for="dueMonth">{{ t('deck', 'Next 30 days') }}</label>
+							</div>
+
+							<div class="filter--item">
+								<input id="noDue"
+									v-model="filter.due"
+									type="radio"
+									class="radio"
+									value="noDue"
+									@change="setFilter"
+									@click="beforeSetFilter">
+								<label for="noDue">{{ t('deck', 'No due date') }}</label>
+							</div>
+
+							<Button :disabled="!isFilterActive" :wide="true" @click="clearFilter">
+								{{ t('deck', 'Clear filter') }}
+							</Button>
 						</div>
-
-						<h3>{{ t('deck', 'Filter by assigned user') }}</h3>
-						<div class="filter--item">
-							<input id="unassigned"
-								v-model="filter.unassigned"
-								type="checkbox"
-								class="checkbox"
-								value="unassigned"
-								@change="setFilter"
-								@click="beforeSetFilter">
-							<label for="unassigned">{{ t('deck', 'Unassigned') }}</label>
-						</div>
-						<div v-for="user in board.users" :key="user.uid" class="filter--item">
-							<input :id="user.uid"
-								v-model="filter.users"
-								type="checkbox"
-								class="checkbox"
-								:value="user.uid"
-								@change="setFilter">
-							<label :for="user.uid"><Avatar :user="user.uid" :size="24" :disable-menu="true" /> {{ user.displayname }}</label>
-						</div>
-
-						<h3>{{ t('deck', 'Filter by due date') }}</h3>
-
-						<div class="filter--item">
-							<input id="overdue"
-								v-model="filter.due"
-								type="radio"
-								class="radio"
-								value="overdue"
-								@change="setFilter"
-								@click="beforeSetFilter">
-							<label for="overdue">{{ t('deck', 'Overdue') }}</label>
-						</div>
-
-						<div class="filter--item">
-							<input id="dueToday"
-								v-model="filter.due"
-								type="radio"
-								class="radio"
-								value="dueToday"
-								@change="setFilter"
-								@click="beforeSetFilter">
-							<label for="dueToday">{{ t('deck', 'Next 24 hours') }}</label>
-						</div>
-
-						<div class="filter--item">
-							<input id="dueWeek"
-								v-model="filter.due"
-								type="radio"
-								class="radio"
-								value="dueWeek"
-								@change="setFilter"
-								@click="beforeSetFilter">
-							<label for="dueWeek">{{ t('deck', 'Next 7 days') }}</label>
-						</div>
-
-						<div class="filter--item">
-							<input id="dueMonth"
-								v-model="filter.due"
-								type="radio"
-								class="radio"
-								value="dueMonth"
-								@change="setFilter"
-								@click="beforeSetFilter">
-							<label for="dueMonth">{{ t('deck', 'Next 30 days') }}</label>
-						</div>
-
-						<div class="filter--item">
-							<input id="noDue"
-								v-model="filter.due"
-								type="radio"
-								class="radio"
-								value="noDue"
-								@change="setFilter"
-								@click="beforeSetFilter">
-							<label for="noDue">{{ t('deck', 'No due date') }}</label>
-						</div>
-
-						<Button :disabled="!isFilterActive" @click="clearFilter">
-							{{ t('deck', 'Clear filter') }}
-						</Button>
-					</div>
-				</Popover>
+					</Popover>
+				</div>
 
 				<Actions>
 					<ActionButton icon="icon-archive"
@@ -199,14 +205,14 @@
 
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { Actions, ActionButton, Popover, Avatar } from '@nextcloud/vue'
+import { Actions, ActionButton, Avatar, Button, Popover } from '@nextcloud/vue'
 import labelStyle from '../mixins/labelStyle'
 import CardCreateDialog from '../CardCreateDialog'
 
 export default {
 	name: 'Controls',
 	components: {
-		Actions, ActionButton, Popover, Avatar, CardCreateDialog,
+		Actions, ActionButton, Avatar, Button, Popover, CardCreateDialog,
 	},
 	mixins: [labelStyle],
 	props: {
@@ -399,12 +405,6 @@ export default {
 
 	.board-action-buttons {
 		display: flex;
-		button {
-			border: 0;
-			width: 44px;
-			margin: 0 0 0 -1px;
-			background-color: transparent;
-		}
 	}
 
 	.deck-search {
@@ -432,8 +432,9 @@ export default {
 	}
 
 	.filter {
-		width: 250px;
-		max-height: 80vh;
+		width: 240px;
+		max-height: calc(100vh - 150px);
+		position: relative;
 		overflow: auto;
 		padding: 8px;
 	}
@@ -444,6 +445,10 @@ export default {
 	}
 </style>
 <style lang="scss">
+	.popover:focus {
+		outline: 2px solid var(--color-main-text);
+	}
+
 	.tooltip-inner.popover-inner {
 		text-align: left;
 	}