ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Merge pull request #3820 from nextcloud/bugfix/3819

Browse Source 
Improve filter popover accessibility
This commit is contained in:
Julius Härtl
2022-05-18 14:46:23 +02:00
committed by GitHub
parent 7328a27524 41ed0cee1d
commit 9db8f9c924
1 changed files with 114 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/Controls.vue
View File

@@ -70,7 +70,12 @@
</form> </form>
</div> </div>
<div v-if="board" class="board-action-buttons"> <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')"> <Actions slot="trigger" :title="t('deck', 'Apply filter')">
<ActionButton v-if="isFilterActive" icon="icon-filter_set" /> <ActionButton v-if="isFilterActive" icon="icon-filter_set" />
<ActionButton v-else icon="icon-filter" /> <ActionButton v-else icon="icon-filter" />
@@ -166,11 +171,12 @@
<label for="noDue">{{ t('deck', 'No due date') }}</label> <label for="noDue">{{ t('deck', 'No due date') }}</label>
</div> </div>
<Button :disabled="!isFilterActive" @click="clearFilter"> <Button :disabled="!isFilterActive" :wide="true" @click="clearFilter">
{{ t('deck', 'Clear filter') }} {{ t('deck', 'Clear filter') }}
</Button> </Button>
</div> </div>
</Popover> </Popover>
</div>
<Actions> <Actions>
<ActionButton icon="icon-archive" <ActionButton icon="icon-archive"
@@ -199,14 +205,14 @@
<script> <script>
import { mapState, mapGetters } from 'vuex' 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 labelStyle from '../mixins/labelStyle'
import CardCreateDialog from '../CardCreateDialog' import CardCreateDialog from '../CardCreateDialog'
export default { export default {
name: 'Controls', name: 'Controls',
components: { components: {
Actions, ActionButton, Popover, Avatar, CardCreateDialog, Actions, ActionButton, Avatar, Button, Popover, CardCreateDialog,
}, },
mixins: [labelStyle], mixins: [labelStyle],
props: { props: {
@@ -399,12 +405,6 @@ export default {
.board-action-buttons { .board-action-buttons {
display: flex; display: flex;
button {
border: 0;
width: 44px;
margin: 0 0 0 -1px;
background-color: transparent;
}
} }
.deck-search { .deck-search {
@@ -432,8 +432,9 @@ export default {
} }
.filter { .filter {
width: 250px; width: 240px;
max-height: 80vh; max-height: calc(100vh - 150px);
position: relative;
overflow: auto; overflow: auto;
padding: 8px; padding: 8px;
} }
@@ -444,6 +445,10 @@ export default {
} }
</style> </style>
<style lang="scss"> <style lang="scss">
.popover:focus {
outline: 2px solid var(--color-main-text);
}
.tooltip-inner.popover-inner { .tooltip-inner.popover-inner {
text-align: left; text-align: left;
} }