tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

LOTS of modal acessibility improvements due to release of Buefy 0.8.5 with focus-trap. Finally doing something else for #3.

This commit is contained in:
Mateus Machado Luna 2019-10-04 12:20:36 -03:00
parent 773a78775c
commit 6101feed9b
43 changed files with 373 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -1951,9 +1951,9 @@
}
},
"buefy": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/buefy/-/buefy-0.8.3.tgz",
"integrity": "sha512-01aHoCy4LAD08MmUahXC8mVqtGK/kzJ45ysXskwLWILAhyLMqkZ5fvdMKD9Ky6iDsMttPHdwUe2csmdnIx9caw==",
"version": "0.8.5",
"resolved": "https://registry.npmjs.org/buefy/-/buefy-0.8.5.tgz",
"integrity": "sha512-yGQUhIsZWTodCx1rpfDTA32v5OjILpDIDAP+X6KoE6du3F3EZwJ/k5aT8D6Ba6AxNzVdDa2M7f0hzMddLbm38A==",
"requires": {
"bulma": "0.7.5"
}

2
package.json
View File

@ -8,7 +8,7 @@
},
"dependencies": {
"axios": "^0.19.0",
"buefy": "^0.8.3",
"buefy": "^0.8.5",
"bulma": "^0.7.5",
"mdi": "^2.2.43",
"moment": "^2.22.2",

13
src/admin/components/bulk-edition/bulk-edition-modal.vue
View File

@ -1,5 +1,12 @@
<template>
<div class="tainacan-modal-content this-tainacan-modal-content">
<div
aria-labelledby="alert-dialog-title"
autofocus
role="alertdialog"
tabindex="-1"
aria-modal
class="tainacan-modal-content this-tainacan-modal-content"
ref="bulkEditionModal">
<header class="tainacan-modal-title">
<h2>{{ modalTitle }}
<small class="tainacan-total-objects-info">
@ -353,6 +360,10 @@
this.groupID = this.getGroupID();
});
},
mounted() {
if (this.$refs.bulkEditionModal)
this.$refs.bulkEditionModal.focus();
},
computed: {
metadata() {
return this.getMetadata();

3
src/admin/components/edition/collection-edition-form.vue
View File

@ -204,7 +204,8 @@
ref="enabledViewModesDropdown"
:mobile-modal="true"
:disabled="Object.keys(registeredViewModes).length < 0"
aria-role="list">
aria-role="list"
trap-focus>
<button
class="button is-white"
slot="trigger"

107
src/admin/components/edition/importer-mapping-form.vue
View File

@ -92,60 +92,67 @@
<p v-if="(!importerSourceInfo.source_special_fields || importerSourceInfo.source_special_fields.length <= 0)">{{ $i18n.get('info_no_special_fields_available') }}<br></p>
<b-modal
@close="onMetadatumEditionCanceled()"
:active.sync="isNewMetadatumModalActive">
<b-loading
:is-full-page="isFullPage"
:active.sync="isLoadingMetadatumTypes"/>
:active.sync="isNewMetadatumModalActive"
trap-focus>
<div
v-if="selectedMetadatumType == undefined && !isEditingMetadatum"
class="tainacan-modal-content">
<div class="tainacan-modal-title">
<h2>{{ $i18n.get('instruction_select_metadatum_type') }}</h2>
<hr>
</div>
<section class="tainacan-form">
<div class="metadata-types-container">
<div
class="metadata-type"
v-for="(metadatumType, index) of metadatumTypes"
:key="index"
@click="onSelectMetadatumType(metadatumType)">
<h4>{{ metadatumType.name }}</h4>
</div>
autofocus="true"
tabindex="-1"
role="dialog"
aria-modal>
<b-loading
:is-full-page="isFullPage"
:active.sync="isLoadingMetadatumTypes"/>
<div
v-if="selectedMetadatumType == undefined && !isEditingMetadatum"
class="tainacan-modal-content">
<div class="tainacan-modal-title">
<h2>{{ $i18n.get('instruction_select_metadatum_type') }}</h2>
<hr>
</div>
<div class="field is-grouped form-submit">
<div class="control">
<button
id="button-cancel-importer-edition"
class="button is-outlined"
type="button"
@click="onMetadatumEditionCanceled(); isNewMetadatumModalActive = false">
{{ $i18n.get('cancel') }}</button>
<section class="tainacan-form">
<div class="metadata-types-container">
<div
class="metadata-type"
v-for="(metadatumType, index) of metadatumTypes"
:key="index"
@click="onSelectMetadatumType(metadatumType)">
<h4>{{ metadatumType.name }}</h4>
</div>
</div>
</div>
</section>
</div>
<div
v-if="isEditingMetadatum"
class="tainacan-modal-content">
<div class="tainacan-modal-title">
<h2>{{ $i18n.get('instruction_configure_new_metadatum') }}</h2>
<a
class="back-link"
@click="isEditingMetadatum = false">
{{ $i18n.get('back') }}
</a>
<hr>
<div class="field is-grouped form-submit">
<div class="control">
<button
id="button-cancel-importer-edition"
class="button is-outlined"
type="button"
@click="onMetadatumEditionCanceled(); isNewMetadatumModalActive = false">
{{ $i18n.get('cancel') }}</button>
</div>
</div>
</section>
</div>
<div
v-if="isEditingMetadatum"
class="tainacan-modal-content">
<div class="tainacan-modal-title">
<h2>{{ $i18n.get('instruction_configure_new_metadatum') }}</h2>
<a
class="back-link"
@click="isEditingMetadatum = false">
{{ $i18n.get('back') }}
</a>
<hr>
</div>
<metadatum-edition-form
:collection-id="collectionId"
:is-repository-level="false"
@onEditionFinished="onMetadatumEditionFinished()"
@onEditionCanceled="onMetadatumEditionCanceled()"
:index="0"
:original-metadatum="metadatum"
:edited-metadatum="editedMetadatum"
:is-on-modal="true"/>
</div>
<metadatum-edition-form
:collection-id="collectionId"
:is-repository-level="false"
@onEditionFinished="onMetadatumEditionFinished()"
@onEditionCanceled="onMetadatumEditionCanceled()"
:index="0"
:original-metadatum="metadatum"
:edited-metadatum="editedMetadatum"
:is-on-modal="true"/>
</div>
</b-modal>
<a

3
src/admin/components/edition/item-bulk-edition-form.vue
View File

@ -337,7 +337,8 @@ export default {
this.amountFinished --;
});
}
}
},
trapFocus: true
});
},
},

19
src/admin/components/edition/item-edition-form.vue
View File

@ -212,7 +212,8 @@
:can-cancel="false"
:active.sync="isTextModalActive"
:width="640"
scroll="keep">
scroll="keep"
trap-focus>
<div class="tainacan-modal-content">
<div class="tainacan-modal-title">
<h2>{{ $i18n.get('instruction_write_text') }}</h2>
@ -248,7 +249,12 @@
:can-cancel="false"
:active.sync="isURLModalActive"
:width="640"
scroll="keep">
scroll="keep"
trap-focus
autofocus
role="dialog"
tabindex="-1"
aria-modal>
<div class="tainacan-modal-content">
<div class="tainacan-modal-title">
<h2>{{ $i18n.get('instruction_insert_url') }}</h2>
@ -1095,7 +1101,8 @@ export default {
this.$console.error(error);
});
}
}
},
trapFocus: true
});
},
@ -1191,7 +1198,8 @@ export default {
this.deleteItem({ itemId: this.itemId, isPermanently: true });
this.$router.push(this.$routerHelper.getCollectionPath(this.form.collectionId))
}
}
},
trapFocus: true
});
},
loadExistingItem() {
@ -1372,7 +1380,8 @@ export default {
onConfirm: () => {
next();
},
}
},
trapFocus: true
});
} else {
next()

6
src/admin/components/edition/item-metadata-bulk-edition-form.vue
View File

@ -308,7 +308,8 @@ export default {
onConfirm: () => {
this.$router.push(this.$routerHelper.getCollectionItemsPath(this.collectionId));
}
}
},
trapFocus: true
});
} else if (status == 'trash') {
@ -336,7 +337,8 @@ export default {
this.isTrashingItems = false;
});
}
}
},
trapFocus: true
});
}
},

6
src/admin/components/edition/taxonomy-edition-form.vue
View File

@ -274,7 +274,8 @@
onConfirm: () => {
next();
}
}
},
trapFocus: true
});
} else if (this.isEditingTerm) {
this.$buefy.modal.open({
@ -287,7 +288,8 @@
onConfirm: () => {
next();
}
}
},
trapFocus: true
});
} else {
next();

3
src/admin/components/lists/activities-list.vue
View File

@ -177,7 +177,8 @@
events: {
approveActivity: (activityId) => this.approveActivity(activityId),
notApproveActivity: (activityId) => this.notApproveActivity(activityId)
}
},
trapFocus: true
});
},
},

8
src/admin/components/lists/basic-term-item.vue
View File

@ -91,7 +91,8 @@ export default {
title: this.$i18n.get('label_warning'),
message: this.$i18n.get('info_warning_terms_not_saved'),
onConfirm: () => { this.removeTerm(); },
}
},
trapFocus: true
});
} else {
this.removeTerm();
@ -110,8 +111,9 @@ export default {
onConfirm: () => {
// If all checks passed, term can be deleted
this.$termsListBus.onDeleteBasicTermItem(this.term);
},
}
}
},
trapFocus: true
});
},
eventOnEditTerm() {

15
src/admin/components/lists/collections-list.vue
View File

@ -16,7 +16,8 @@
v-if="$userCaps.hasCapability('delete_tainacan-collections')"
:disabled="!isSelectingCollections"
id="bulk-actions-dropdown"
aria-role="list">
aria-role="list"
trap-focus>
<button
class="button is-white"
slot="trigger">
@ -54,7 +55,8 @@
<b-dropdown
inline
:style="{ top: cursorPosY + 'px', left: cursorPosX + 'px' }">
:style="{ top: cursorPosY + 'px', left: cursorPosX + 'px' }"
trap-focus>
<b-dropdown-item
@click="openCollection()"
v-if="!isOnTrash">
@ -387,8 +389,8 @@ export default {
// })
});
}
}
},
trapFocus: true
});
this.clearContextMenu();
},
@ -426,8 +428,9 @@ export default {
}
}
this.allCollectionsOnPageSelected = false;
},
}
}
},
trapFocus: true
});
},
openCollection() {

10
src/admin/components/lists/filters-list.vue
View File

@ -234,8 +234,13 @@
<b-modal
ref="filterTypeModal"
:width="680"
:active.sync="isSelectingFilterType">
:active.sync="isSelectingFilterType"
trap-focus>
<div
autofocus
role="dialog"
tabindex="-1"
aria-modal
class="tainacan-modal-content"
style="width: auto">
<header class="tainacan-modal-title">
@ -383,7 +388,8 @@ export default {
this.onEditionCanceled();
next();
},
}
},
trapFocus: true
});
} else {
next()

22
src/admin/components/lists/items-list.vue
View File

@ -31,7 +31,8 @@
v-if="items.length > 0 && items[0].current_user_can_edit"
:disabled="selectedItems.length <= 1"
id="bulk-actions-dropdown"
aria-role="list">
aria-role="list"
trap-focus>
<button
class="button is-white"
slot="trigger">
@ -85,7 +86,8 @@
<b-dropdown
inline
:style="{ top: cursorPosY + 'px', left: cursorPosX + 'px' }">
:style="{ top: cursorPosY + 'px', left: cursorPosX + 'px' }"
trap-focus>
<b-dropdown-item
@click="openItem()"
v-if="!isOnTrash && !$route.query.iframemode">
@ -1030,6 +1032,7 @@ export default {
collectionID: this.$route.params.collectionId,
},
width: 'calc(100% - 8.333333333%)',
trapFocus: true
});
},
sequenceEditSelectedItems() {
@ -1068,7 +1071,8 @@ export default {
this.$eventBusSearch.loadItems();
}
}
}
},
trapFocus: true
});
this.clearContextMenu();
@ -1099,7 +1103,8 @@ export default {
});
});
}
}
},
trapFocus: true
});
},
deleteOneItem(itemId) {
@ -1121,7 +1126,8 @@ export default {
this.$eventBusSearch.loadItems();
});
}
}
},
trapFocus: true
});
this.clearContextMenu();
},
@ -1151,7 +1157,8 @@ export default {
});
});
}
}
},
trapFocus: true
});
},
deleteSelectedItems() {
@ -1189,7 +1196,8 @@ export default {
}
});
}
}
},
trapFocus: true
});
},
openItem() {

15
src/admin/components/lists/metadata-list.vue
View File

@ -372,8 +372,13 @@
</section>
<b-modal
@close="onCancelNewMetadataMapperMetadata"
:active.sync="isMapperMetadataCreating">
:active.sync="isMapperMetadataCreating"
trap-focus>
<div
autofocus
role="dialog"
tabindex="-1"
aria-modal
class="tainacan-modal-content">
<div class="tainacan-modal-title">
<h2>{{ $i18n.get('instruction_insert_mapper_metadatum_info') }}</h2>
@ -527,7 +532,8 @@ export default {
this.onEditionCanceled();
next();
},
}
},
trapFocus: true
});
} else {
next()
@ -633,8 +639,9 @@ export default {
.catch(() => {
this.$console.log("Error deleting metadatum.")
});
},
}
}
},
trapFocus: true
});
},
toggleMetadatumEdition(metadatumId) {

12
src/admin/components/lists/processes-list.vue
View File

@ -15,7 +15,8 @@
<b-dropdown
position="is-bottom-left"
:disabled="!isSelecting"
id="bulk-actions-dropdown">
id="bulk-actions-dropdown"
trap-focus>
<button
class="button is-white"
slot="trigger">
@ -389,7 +390,8 @@
// });
});
}
}
},
trapFocus: true
});
},
deleteSelected() {
@ -427,7 +429,8 @@
}
this.allOnPageSelected = false;
}
}
},
trapFocus: true
});
},
getDate(rawDate) {
@ -451,7 +454,8 @@
onConfirm: () => {
this.updateProcess({ id: this.processes[index].ID, status: 'closed' });
},
}
},
trapFocus: true
});
}
},

8
src/admin/components/lists/recursive-term-item.vue
View File

@ -218,7 +218,8 @@ export default {
title: this.$i18n.get('label_warning'),
message: this.$i18n.get('info_warning_terms_not_saved'),
onConfirm: () => { this.removeTerm(); },
}
},
trapFocus: true
});
} else {
this.removeTerm();
@ -258,8 +259,9 @@ export default {
});
}
}
},
}
}
},
trapFocus: true
});
},
eventOnChildTermDeleted(parentTermId) {

9
src/admin/components/lists/taxonomies-list.vue
View File

@ -17,7 +17,8 @@
v-if="$userCaps.hasCapability('delete_tainacan-taxonomies')"
:disabled="!isSelecting"
id="bulk-actions-dropdown"
aria-role="list">
aria-role="list"
trap-focus>
<button
class="button is-white"
slot="trigger">
@ -267,7 +268,8 @@
// });
});
}
}
},
trapFocus: true
});
},
deleteSelected() {
@ -305,7 +307,8 @@
}
this.allOnPageSelected = false;
}
}
},
trapFocus: true
});
},
onClickTaxonomy($event, taxonomyId, index) {

3
src/admin/components/lists/terms-list.vue
View File

@ -16,7 +16,8 @@
:mobile-modal="true"
:disabled="localTerms.length <= 0 || isLoadingTerms || isEditingTerm"
@input="onChangeOrder(order == 'asc' ? 'desc' : 'asc')"
aria-role="list">
aria-role="list"
trap-focus>
<button
:aria-label="$i18n.get('label_sorting_direction')"
class="button is-white"

3
src/admin/components/navigation/tainacan-header.vue
View File

@ -61,7 +61,8 @@
ref="advancedSearchShortcut"
class="advanced-search-header-dropdown"
position="is-bottom-left"
aria-role="list">
aria-role="list"
trap-focus>
<a
class="advanced-search-text"
slot="trigger">

3
src/admin/components/navigation/tainacan-repository-subheader.vue
View File

@ -130,7 +130,8 @@ export default {
props: {
sourceCollection: this.collectionId,
hideWhenManualCollection: true
}
},
trapFocus: true
});
}
}

12
src/admin/components/other/activity-details-modal.vue
View File

@ -1,5 +1,11 @@
<template>
<div class="tainacan-modal-content">
<div
autofocus
role="dialog"
class="tainacan-modal-content"
tabindex="-1"
aria-modal
ref="activityDetailsModal">
<header
v-if="!isLoadingActivity"
class="tainacan-modal-title">
@ -667,6 +673,10 @@
created() {
this.loadActivity();
},
mounted() {
if (this.$refs.activityDetailsModal)
this.$refs.activityDetailsModal.focus()
},
methods: {
...mapActions('activity', [
'fetchActivity'

12
src/admin/components/other/available-exporters-modal.vue
View File

@ -1,5 +1,12 @@
<template>
<form action="">
<form
action=""
autofocus
role="dialog"
class="tainacan-modal-content"
tabindex="-1"
aria-modal
ref="availableExportersModal">
<div
class="tainacan-modal-content"
style="width: auto">
@ -77,6 +84,9 @@
this.$console.log(error);
this.isLoading = false;
});
if (this.$refs.availableExportersModal)
this.$refs.availableExportersModal.focus();
}
}
</script>

12
src/admin/components/other/available-importers-modal.vue
View File

@ -1,5 +1,12 @@
<template>
<form action="">
<form
action=""
autofocus
role="dialog"
class="tainacan-modal-content"
tabindex="-1"
aria-modal
ref="availableImportersModal">
<div
class="tainacan-modal-content"
style="width: auto">
@ -79,6 +86,9 @@ export default {
this.$console.log(error);
this.isLoading = false;
});
if (this.$refs.availableImportersModal)
this.$refs.availableImportersModal.focus();
}
}
</script>

12
src/admin/components/other/checkbox-radio-modal.vue
View File

@ -1,5 +1,11 @@
<template>
<div class="tainacan-modal-content">
<div
autofocus
role="dialog"
class="tainacan-modal-content"
tabindex="-1"
aria-modal
ref="checkboxRadioModal">
<header class="tainacan-modal-title">
<h2 v-if="isFilter">{{ $i18n.get('filter') }} <em>{{ filter.name }}</em></h2>
<h2 v-else>{{ $i18n.get('metadatum') }} <em>{{ metadatum.name }}</em></h2>
@ -345,6 +351,10 @@
this.getOptions(0);
}
},
mounted() {
if (this.$refs.checkboxRadioModal)
this.$refs.checkboxRadioModal.focus()
},
methods: {
fetchSelectedLabels() {

12
src/admin/components/other/collections-modal.vue
View File

@ -1,5 +1,12 @@
<template>
<form action="">
<form
action=""
autofocus
role="dialog"
class="tainacan-modal-content"
tabindex="-1"
aria-modal
ref="collectionsModal">
<div
class="tainacan-modal-content"
style="width: auto">
@ -74,6 +81,9 @@ export default {
this.$console.log(error);
this.isLoading = false;
});
if (this.$refs.collectionsModal)
this.$refs.collectionsModal.focus();
}
}
</script>

10
src/admin/components/other/custom-dialog.vue
View File

@ -1,9 +1,11 @@
<template>
<div
aria-labelledby="alert-dialog-title"
aria-modal="true"
aria-modal
autofocus
role="alertdialog"
class="tainacan-form dialog">
class="tainacan-form dialog"
ref="customDialog">
<div
class="modal-card"
style="width: auto">
@ -87,6 +89,10 @@
changeNeverShowMessageAgain($event) {
this.$userPrefs.set('neverShow' + this.messageKeyForUserPrefs + 'Dialog', $event);
}
},
mounted() {
if (this.$refs.customDialog)
this.$refs.customDialog.focus();
}
}
</script>

19
src/admin/components/other/document-item.vue
View File

@ -11,7 +11,8 @@
<!-- Preview Modal ----------------- -->
<b-modal
:active.sync="isPreviewModalActive"
scroll="keep">
scroll="keep"
trap-focus>
<!-- <div class="tainacan-modal-content">
<div class="tainacan-modal-title">
<h2>{{ $i18n.get('label_document') }}</h2>
@ -20,7 +21,11 @@
class="back-link">{{ $i18n.get('exit') }}</a>
<hr>
</div> -->
<div
<div
autofocus
role="dialog"
tabindex="-1"
aria-modal
class="is-flex rendered-content"
v-html="documentHtml" />
<!-- </div> -->
@ -32,9 +37,13 @@
export default {
name: 'DocumentItem',
props: {
documentHtml: String,
isSelected: false,
isPreviewModalActive: false
documentHtml: String
},
data() {
return {
isSelected: false,
isPreviewModalActive: false
}
}
}
</script>

10
src/admin/components/other/exposers-modal.vue
View File

@ -1,10 +1,13 @@
<template>
<div
aria-labelledby="exposers-modal-title"
autofocus
role="dialog"
aria-modal="true"
tabindex="-1"
aria-modal
class="tainacan-modal-content"
style="width: auto">
style="width: auto"
ref="exposersModal">
<header class="tainacan-modal-title">
<h2
id="exposers-modal-title"
@ -469,6 +472,9 @@ export default {
if (this.itemId)
this.shouldRespectFetchOnly = false;
if (this.$refs.exposersModal)
this.$refs.exposersModal.focus()
}
}
</script>

10
src/admin/components/other/file-item.vue
View File

@ -32,8 +32,14 @@
<b-modal
:active.sync="isPreviewModalActive"
:width="1024"
scroll="keep">
<div class="tainacan-modal-content">
scroll="keep"
trap-focus>
<div
autofocus
role="dialog"
tabindex="-1"
aria-modal
class="tainacan-modal-content">
<div class="tainacan-modal-title">
<h2 v-if="file.title != undefined">{{ file.title.rendered }}</h2>
</div>

11
src/admin/components/other/item-copy-dialog.vue
View File

@ -1,9 +1,12 @@
<template>
<div
aria-labelledby="alert-dialog-title"
aria-modal="true"
autofocus
role="alertdialog"
class="tainacan-form dialog">
tabindex="-1"
aria-modal
class="tainacan-form dialog"
ref="itemCopyDialog">
<div
class="modal-card"
style="width: auto">
@ -183,6 +186,10 @@
this.isCreatingBulkEditGroup = false;
this.isCreatingSequenceEditGroup = false;
this.copyCount = 1;
},
mounted() {
if (this.$refs.itemCopyDialog)
this.$refs.itemCopyDialog.focus();
}
}
</script>

3
src/admin/components/search/pagination.vue
View File

@ -69,7 +69,8 @@
<b-dropdown
position="is-top-right"
@change="onPageChange"
aria-role="list">
aria-role="list"
trap-focus>
<button
aria-labelledby="go-to-page-dropdown"
class="button is-white"

3
src/admin/components/search/skeleton-items-list.vue
View File

@ -9,7 +9,8 @@
<div class="field is-pulled-right">
<b-dropdown
position="is-bottom-left"
disabled>
disabled
trap-focus>
<button
class="button is-white"
slot="trigger">

12
src/admin/pages/lists/collections-page.vue
View File

@ -11,7 +11,8 @@
<div class="header-item">
<b-dropdown
aria-role="list"
id="collection-creation-options-dropdown">
id="collection-creation-options-dropdown"
trap-focus>
<button
class="button is-secondary"
slot="trigger">
@ -62,7 +63,8 @@
:mobile-modal="true"
:disabled="collections.length <= 0 || isLoading"
@input="onChangeOrder(order == 'asc' ? 'desc' : 'asc')"
aria-role="list">
aria-role="list"
trap-focus>
<button
:aria-label="$i18n.get('label_sorting_direction')"
class="button is-white"
@ -195,7 +197,8 @@
<b-dropdown
:disabled="isLoadingMetadatumMappers"
id="collection-creation-options-dropdown"
aria-role="list">
aria-role="list"
trap-focus>
<button
class="button is-secondary"
slot="trigger">
@ -421,7 +424,8 @@ export default {
this.$buefy.modal.open({
parent: this,
component: AvailableImportersModal,
hasModalCard: true
hasModalCard: true,
trapFocus: true
});
}
},

50
src/admin/pages/lists/items-page.vue
View File

@ -232,7 +232,8 @@
<b-dropdown
:mobile-modal="true"
id="item-creation-options-dropdown"
aria-role="list">
aria-role="list"
trap-focus>
<button
class="button is-secondary"
slot="trigger">
@ -306,7 +307,8 @@
:mobile-modal="true"
:disabled="totalItems <= 0 || adminViewMode == 'grid'|| adminViewMode == 'cards' || adminViewMode == 'masonry'"
class="show metadata-options-dropdown"
aria-role="list">
aria-role="list"
trap-focus>
<button
:aria-label="$i18n.get('label_displayed_metadata')"
class="button is-white"
@ -348,7 +350,8 @@
<b-dropdown
:mobile-modal="true"
@input="onChangeOrder()"
aria-role="list">
aria-role="list"
trap-focus>
<button
:aria-label="$i18n.get('label_sorting_direction')"
class="button is-white"
@ -395,7 +398,8 @@
<b-dropdown
:mobile-modal="true"
@input="onChangeOrderBy($event)"
aria-role="list">
aria-role="list"
trap-focus>
<button
:aria-label="$i18n.get('label_sorting')"
class="button is-white"
@ -431,7 +435,8 @@
:mobile-modal="true"
position="is-bottom-left"
:aria-label="$i18n.get('label_view_mode')"
aria-role="list">
aria-role="list"
trap-focus>
<button
:aria-label="registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].label : $i18n.get('label_visualization')"
class="button is-white"
@ -472,7 +477,8 @@
:mobile-modal="true"
position="is-bottom-left"
:aria-label="$i18n.get('label_view_mode')"
aria-role="list">
aria-role="list"
trap-focus>
<button
:aria-label="$i18n.get('label_view_mode')"
class="button is-white"
@ -811,12 +817,18 @@
role="region"
aria-labelledby="filters-label-landmark-modal"
id="filters-mobile-modal"
ref="filters-mobile-modal"
class="tainacan-form is-hidden-tablet"
:active.sync="isFilterModalActive"
:width="736"
animation="slide-menu">
<div class="modal-inner-content">
animation="slide-menu"
trap-focus>
<div
ref="filters-mobile-modal"
class="modal-inner-content"
autofocus="true"
tabindex="-1"
aria-modal
role="dialog">
<h3
id="filters-label-landmark-modal"
class="has-text-weight-semibold">
@ -1035,6 +1047,14 @@
orderByName() {
if (this.isSortingByCustomMetadata)
this.hasAnOpenAlert = true;
},
isFilterModalActive() {
if (this.isFilterModalActive) {
setTimeout(() => {
if (this.$refs['filters-mobile-modal'])
this.$refs['filters-mobile-modal'].focus();
}, 800);
}
}
},
methods: {
@ -1097,7 +1117,8 @@
props: {
targetCollection: this.collectionId,
hideWhenManualCollection: true
}
},
trapFocus: true
});
},
openExposersModal() {
@ -1108,14 +1129,16 @@
props: {
collectionId: this.collectionId,
totalItems: this.totalItems
}
},
trapFocus: true
})
},
onOpenCollectionsModal() {
this.$buefy.modal.open({
parent: this,
component: CollectionsModal,
hasModalCard: true
hasModalCard: true,
trapFocus: true
});
},
updateSearch() {
@ -1489,7 +1512,8 @@
hideCancel: true,
showNeverShowAgainOption: offerCheckbox && tainacan_plugin.user_caps != undefined && tainacan_plugin.user_caps.length != undefined && tainacan_plugin.user_caps.length > 0,
messageKeyForUserPrefs: 'ItemsHiddenDueSorting'
}
},
trapFocus: true
});
},
adjustSearchControlHeight: _.debounce( function() {

3
src/admin/pages/lists/taxonomies-page.vue
View File

@ -25,7 +25,8 @@
:mobile-modal="true"
:disabled="taxonomies.length <= 0 || isLoading"
@input="onChangeOrder(order == 'asc' ? 'desc' : 'asc')"
aria-role="list">
aria-role="list"
trap-focus>
<button
:aria-label="$i18n.get('label_sorting_direction')"
class="button is-white"

47
src/admin/pages/lists/term-items-page.vue
View File

@ -223,7 +223,8 @@
<b-dropdown
:mobile-modal="true"
id="item-creation-options-dropdown"
aria-role="list">
aria-role="list"
trap-focus>
<button
class="button is-secondary"
slot="trigger">
@ -283,7 +284,8 @@
:mobile-modal="true"
:disabled="totalItems <= 0 || adminViewMode == 'grid'|| adminViewMode == 'cards' || adminViewMode == 'masonry'"
class="show metadata-options-dropdown"
aria-role="list">
aria-role="list"
trap-focus>
<button
:aria-label="$i18n.get('label_displayed_metadata')"
class="button is-white"
@ -325,7 +327,8 @@
<b-dropdown
:mobile-modal="true"
@input="onChangeOrder()"
aria-role="list">
aria-role="list"
trap-focus>
<button
:aria-label="$i18n.get('label_sorting_direction')"
class="button is-white"
@ -372,7 +375,8 @@
<b-dropdown
:mobile-modal="true"
@input="onChangeOrderBy($event)"
aria-role="list">
aria-role="list"
trap-focus>
<button
:aria-label="$i18n.get('label_sorting')"
class="button is-white"
@ -408,7 +412,8 @@
:mobile-modal="true"
position="is-bottom-left"
:aria-label="$i18n.get('label_view_mode')"
aria-role="list">
aria-role="list"
trap-focus>
<button
class="button is-white"
:aria-label="registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].label : $i18n.get('label_visualization')"
@ -449,7 +454,8 @@
:mobile-modal="true"
position="is-bottom-left"
:aria-label="$i18n.get('label_view_mode')"
aria-role="list">
aria-role="list"
trap-focus>
<button
class="button is-white"
:aria-label="$i18n.get('label_view_mode')"
@ -791,8 +797,14 @@
class="tainacan-form is-hidden-tablet"
:active.sync="isFilterModalActive"
:width="736"
animation="slide-menu">
<div class="modal-inner-content">
animation="slide-menu"
trap-focus>
<div
autofocus="true"
tabindex="-1"
role="dialog"
aria-modal
class="modal-inner-content">
<h3
id="filters-label-landmark-modal"
class="has-text-weight-semibold">
@ -989,6 +1001,14 @@
orderByName() {
if (this.isSortingByCustomMetadata)
this.hasAnOpenAlert = true;
},
isFilterModalActive() {
if (this.isFilterModalActive) {
setTimeout(() => {
if (this.$refs['filters-mobile-modal'])
this.$refs['filters-mobile-modal'].focus();
}, 800);
}
}
},
methods: {
@ -1047,7 +1067,8 @@
props: {
targetCollection: this.collectionId,
hideWhenManualCollection: true
}
},
trapFocus: true
});
},
openExposersModal() {
@ -1058,8 +1079,9 @@
props: {
collectionId: this.collectionId,
totalItems: this.totalItems
}
})
},
trapFocus: true
});
},
updateSearch() {
this.$eventBusSearch.setSearchQuery(this.futureSearchQuery);
@ -1419,7 +1441,8 @@
hideCancel: true,
showNeverShowAgainOption: offerCheckbox && tainacan_plugin.user_caps != undefined && tainacan_plugin.user_caps.length != undefined && tainacan_plugin.user_caps.length > 0,
messageKeyForUserPrefs: 'ItemsHiddenDueSorting'
}
},
trapFocus: true
});
},
adjustSearchControlHeight: _.debounce( function() {

5
src/admin/pages/singles/item-page.vue
View File

@ -384,8 +384,9 @@
itemId: this.itemId,
itemURL: this.item.url,
totalItems: 1,
}
})
},
trapFocus: true
});
}
},
created() {

3
src/classes/filter-types/checkbox/Checkbox.vue
View File

@ -193,7 +193,8 @@
appliedCheckBoxModal: () => {
this.loadOptions();
}
}
},
trapFocus: true
});
},
cleanSearchFromTags(filterTag) {

3
src/classes/filter-types/date/Date.vue
View File

@ -3,7 +3,8 @@
<b-dropdown
:mobile-modal="true"
@input="onChangeComparator($event)"
aria-role="list">
aria-role="list"
trap-focus>
<button
:aria-label="$i18n.get('label_comparator')"
class="button is-white"

3
src/classes/filter-types/numeric/Numeric.vue
View File

@ -3,7 +3,8 @@
<b-dropdown
:mobile-modal="true"
@input="onChangeComparator($event)"
aria-role="list">
aria-role="list"
trap-focus>
<button
:aria-label="$i18n.get('label_comparator')"
class="button is-white"

1
src/classes/filter-types/taxonomy/Checkbox.vue
View File

@ -280,6 +280,7 @@
}
},
width: 'calc(100% - 8.333333333%)',
trapFocus: true
});
},
cleanSearchFromTag(filterTag) {

1
src/classes/metadata-types/taxonomy/Taxonomy.vue
View File

@ -134,6 +134,7 @@
}
},
width: 'calc(100% - 8.333333333%)',
trapFocus: true
});
},
getTermsFromTaxonomy(){