Merge pull request #3820 from nextcloud/bugfix/3819

Improve filter popover accessibility

src/components/Controls.vue

@@ -70,7 +70,12 @@
 				</form>
 			</div>
 			<div v-if="board" class="board-action-buttons">
-				<Popover @show="filterVisible=true" @hide="filterVisible=false">
+				<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" />
@@ -166,11 +171,12 @@
 								<label for="noDue">{{ t('deck', 'No due date') }}</label>
 							</div>
 
-						<Button :disabled="!isFilterActive" @click="clearFilter">
+							<Button :disabled="!isFilterActive" :wide="true" @click="clearFilter">
 								{{ t('deck', 'Clear filter') }}
 							</Button>
 						</div>
 					</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;
 	}