From 6101feed9b29830b1a66b596cb9237f76ce823e5 Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Fri, 4 Oct 2019 12:20:36 -0300
Subject: [PATCH] LOTS of modal acessibility improvements due to release of
 Buefy 0.8.5 with focus-trap. Finally doing something else for #3.

---
 package-lock.json                             |   6 +-
 package.json                                  |   2 +-
 .../bulk-edition/bulk-edition-modal.vue       |  13 ++-
 .../edition/collection-edition-form.vue       |   3 +-
 .../edition/importer-mapping-form.vue         | 107 ++++++++++--------
 .../edition/item-bulk-edition-form.vue        |   3 +-
 .../components/edition/item-edition-form.vue  |  19 +++-
 .../item-metadata-bulk-edition-form.vue       |   6 +-
 .../edition/taxonomy-edition-form.vue         |   6 +-
 .../components/lists/activities-list.vue      |   3 +-
 .../components/lists/basic-term-item.vue      |   8 +-
 .../components/lists/collections-list.vue     |  15 ++-
 src/admin/components/lists/filters-list.vue   |  10 +-
 src/admin/components/lists/items-list.vue     |  22 ++--
 src/admin/components/lists/metadata-list.vue  |  15 ++-
 src/admin/components/lists/processes-list.vue |  12 +-
 .../components/lists/recursive-term-item.vue  |   8 +-
 .../components/lists/taxonomies-list.vue      |   9 +-
 src/admin/components/lists/terms-list.vue     |   3 +-
 .../components/navigation/tainacan-header.vue |   3 +-
 .../tainacan-repository-subheader.vue         |   3 +-
 .../other/activity-details-modal.vue          |  12 +-
 .../other/available-exporters-modal.vue       |  12 +-
 .../other/available-importers-modal.vue       |  12 +-
 .../components/other/checkbox-radio-modal.vue |  12 +-
 .../components/other/collections-modal.vue    |  12 +-
 src/admin/components/other/custom-dialog.vue  |  10 +-
 src/admin/components/other/document-item.vue  |  19 +++-
 src/admin/components/other/exposers-modal.vue |  10 +-
 src/admin/components/other/file-item.vue      |  10 +-
 .../components/other/item-copy-dialog.vue     |  11 +-
 src/admin/components/search/pagination.vue    |   3 +-
 .../components/search/skeleton-items-list.vue |   3 +-
 src/admin/pages/lists/collections-page.vue    |  12 +-
 src/admin/pages/lists/items-page.vue          |  50 +++++---
 src/admin/pages/lists/taxonomies-page.vue     |   3 +-
 src/admin/pages/lists/term-items-page.vue     |  47 ++++++--
 src/admin/pages/singles/item-page.vue         |   5 +-
 .../filter-types/checkbox/Checkbox.vue        |   3 +-
 src/classes/filter-types/date/Date.vue        |   3 +-
 src/classes/filter-types/numeric/Numeric.vue  |   3 +-
 .../filter-types/taxonomy/Checkbox.vue        |   1 +
 .../metadata-types/taxonomy/Taxonomy.vue      |   1 +
 43 files changed, 373 insertions(+), 157 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 128b22f63..71ce1e51c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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"
       }
diff --git a/package.json b/package.json
index 8ddcd0e23..31ca65333 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/admin/components/bulk-edition/bulk-edition-modal.vue b/src/admin/components/bulk-edition/bulk-edition-modal.vue
index abb01581f..f12fb76f8 100644
--- a/src/admin/components/bulk-edition/bulk-edition-modal.vue
+++ b/src/admin/components/bulk-edition/bulk-edition-modal.vue
@@ -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();
diff --git a/src/admin/components/edition/collection-edition-form.vue b/src/admin/components/edition/collection-edition-form.vue
index 32f76842a..f95a6c485 100644
--- a/src/admin/components/edition/collection-edition-form.vue
+++ b/src/admin/components/edition/collection-edition-form.vue
@@ -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"
diff --git a/src/admin/components/edition/importer-mapping-form.vue b/src/admin/components/edition/importer-mapping-form.vue
index 7cd03307e..7d84d3d00 100644
--- a/src/admin/components/edition/importer-mapping-form.vue
+++ b/src/admin/components/edition/importer-mapping-form.vue
@@ -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
diff --git a/src/admin/components/edition/item-bulk-edition-form.vue b/src/admin/components/edition/item-bulk-edition-form.vue
index 5f6b6f8cc..9bbef9cb1 100644
--- a/src/admin/components/edition/item-bulk-edition-form.vue
+++ b/src/admin/components/edition/item-bulk-edition-form.vue
@@ -337,7 +337,8 @@ export default {
                             this.amountFinished --;
                         });
                     }
-                }
+                },
+                trapFocus: true
             });
         },
     },
diff --git a/src/admin/components/edition/item-edition-form.vue b/src/admin/components/edition/item-edition-form.vue
index 5b990391e..00fc86c19 100644
--- a/src/admin/components/edition/item-edition-form.vue
+++ b/src/admin/components/edition/item-edition-form.vue
@@ -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()
diff --git a/src/admin/components/edition/item-metadata-bulk-edition-form.vue b/src/admin/components/edition/item-metadata-bulk-edition-form.vue
index 47264f68e..d9abc1cc1 100644
--- a/src/admin/components/edition/item-metadata-bulk-edition-form.vue
+++ b/src/admin/components/edition/item-metadata-bulk-edition-form.vue
@@ -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
                 });            
             }
         },
diff --git a/src/admin/components/edition/taxonomy-edition-form.vue b/src/admin/components/edition/taxonomy-edition-form.vue
index f46ac7904..72c1c38b5 100644
--- a/src/admin/components/edition/taxonomy-edition-form.vue
+++ b/src/admin/components/edition/taxonomy-edition-form.vue
@@ -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();
diff --git a/src/admin/components/lists/activities-list.vue b/src/admin/components/lists/activities-list.vue
index d4cf3a41f..4e69c8c81 100644
--- a/src/admin/components/lists/activities-list.vue
+++ b/src/admin/components/lists/activities-list.vue
@@ -177,7 +177,8 @@
                     events: {
                         approveActivity: (activityId) => this.approveActivity(activityId),
                         notApproveActivity: (activityId) => this.notApproveActivity(activityId)
-                    }
+                    },
+                    trapFocus: true
                 });
             },
         },
diff --git a/src/admin/components/lists/basic-term-item.vue b/src/admin/components/lists/basic-term-item.vue
index 053475aa0..279500104 100644
--- a/src/admin/components/lists/basic-term-item.vue
+++ b/src/admin/components/lists/basic-term-item.vue
@@ -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() {
diff --git a/src/admin/components/lists/collections-list.vue b/src/admin/components/lists/collections-list.vue
index 3a158b585..9d474cdd6 100644
--- a/src/admin/components/lists/collections-list.vue
+++ b/src/admin/components/lists/collections-list.vue
@@ -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() {
diff --git a/src/admin/components/lists/filters-list.vue b/src/admin/components/lists/filters-list.vue
index 007784907..68b7bb395 100644
--- a/src/admin/components/lists/filters-list.vue
+++ b/src/admin/components/lists/filters-list.vue
@@ -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()
diff --git a/src/admin/components/lists/items-list.vue b/src/admin/components/lists/items-list.vue
index ab94c147f..fe0086163 100644
--- a/src/admin/components/lists/items-list.vue
+++ b/src/admin/components/lists/items-list.vue
@@ -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() {
diff --git a/src/admin/components/lists/metadata-list.vue b/src/admin/components/lists/metadata-list.vue
index 29981d36c..898f5a332 100644
--- a/src/admin/components/lists/metadata-list.vue
+++ b/src/admin/components/lists/metadata-list.vue
@@ -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) {
diff --git a/src/admin/components/lists/processes-list.vue b/src/admin/components/lists/processes-list.vue
index 70add7611..93f8a753e 100644
--- a/src/admin/components/lists/processes-list.vue
+++ b/src/admin/components/lists/processes-list.vue
@@ -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
                 });
             }
         },
diff --git a/src/admin/components/lists/recursive-term-item.vue b/src/admin/components/lists/recursive-term-item.vue
index 887c66907..90a1181cd 100644
--- a/src/admin/components/lists/recursive-term-item.vue
+++ b/src/admin/components/lists/recursive-term-item.vue
@@ -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) {
diff --git a/src/admin/components/lists/taxonomies-list.vue b/src/admin/components/lists/taxonomies-list.vue
index cf17f3b37..46e64207d 100644
--- a/src/admin/components/lists/taxonomies-list.vue
+++ b/src/admin/components/lists/taxonomies-list.vue
@@ -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) {
diff --git a/src/admin/components/lists/terms-list.vue b/src/admin/components/lists/terms-list.vue
index adc18856f..ca4e72492 100644
--- a/src/admin/components/lists/terms-list.vue
+++ b/src/admin/components/lists/terms-list.vue
@@ -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"
diff --git a/src/admin/components/navigation/tainacan-header.vue b/src/admin/components/navigation/tainacan-header.vue
index 62c07f6ff..6056a2357 100644
--- a/src/admin/components/navigation/tainacan-header.vue
+++ b/src/admin/components/navigation/tainacan-header.vue
@@ -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">
diff --git a/src/admin/components/navigation/tainacan-repository-subheader.vue b/src/admin/components/navigation/tainacan-repository-subheader.vue
index 1a9b4fae3..d6e3710c2 100644
--- a/src/admin/components/navigation/tainacan-repository-subheader.vue
+++ b/src/admin/components/navigation/tainacan-repository-subheader.vue
@@ -130,7 +130,8 @@ export default {
                 props: {
                     sourceCollection: this.collectionId,
                     hideWhenManualCollection: true
-                }
+                },
+                trapFocus: true
             });
         }
     }
diff --git a/src/admin/components/other/activity-details-modal.vue b/src/admin/components/other/activity-details-modal.vue
index 3b557d2fb..d0d8aeb52 100644
--- a/src/admin/components/other/activity-details-modal.vue
+++ b/src/admin/components/other/activity-details-modal.vue
@@ -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'
diff --git a/src/admin/components/other/available-exporters-modal.vue b/src/admin/components/other/available-exporters-modal.vue
index 509ad676d..dcd175aa9 100644
--- a/src/admin/components/other/available-exporters-modal.vue
+++ b/src/admin/components/other/available-exporters-modal.vue
@@ -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>
diff --git a/src/admin/components/other/available-importers-modal.vue b/src/admin/components/other/available-importers-modal.vue
index c1f1ad765..5a1c58d15 100644
--- a/src/admin/components/other/available-importers-modal.vue
+++ b/src/admin/components/other/available-importers-modal.vue
@@ -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>
diff --git a/src/admin/components/other/checkbox-radio-modal.vue b/src/admin/components/other/checkbox-radio-modal.vue
index 49434cef3..ad1615cdc 100644
--- a/src/admin/components/other/checkbox-radio-modal.vue
+++ b/src/admin/components/other/checkbox-radio-modal.vue
@@ -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() {
 
diff --git a/src/admin/components/other/collections-modal.vue b/src/admin/components/other/collections-modal.vue
index 20137a205..39e38aa5f 100644
--- a/src/admin/components/other/collections-modal.vue
+++ b/src/admin/components/other/collections-modal.vue
@@ -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>
diff --git a/src/admin/components/other/custom-dialog.vue b/src/admin/components/other/custom-dialog.vue
index 6e81f69e0..6ac77a7d0 100644
--- a/src/admin/components/other/custom-dialog.vue
+++ b/src/admin/components/other/custom-dialog.vue
@@ -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>
diff --git a/src/admin/components/other/document-item.vue b/src/admin/components/other/document-item.vue
index 2c92a8c87..38790c0ec 100644
--- a/src/admin/components/other/document-item.vue
+++ b/src/admin/components/other/document-item.vue
@@ -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>
diff --git a/src/admin/components/other/exposers-modal.vue b/src/admin/components/other/exposers-modal.vue
index 7b4c1318a..842c8f228 100644
--- a/src/admin/components/other/exposers-modal.vue
+++ b/src/admin/components/other/exposers-modal.vue
@@ -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>
diff --git a/src/admin/components/other/file-item.vue b/src/admin/components/other/file-item.vue
index f54bd3505..0613f9bc9 100644
--- a/src/admin/components/other/file-item.vue
+++ b/src/admin/components/other/file-item.vue
@@ -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>
diff --git a/src/admin/components/other/item-copy-dialog.vue b/src/admin/components/other/item-copy-dialog.vue
index 5d276bc9b..86af52b14 100644
--- a/src/admin/components/other/item-copy-dialog.vue
+++ b/src/admin/components/other/item-copy-dialog.vue
@@ -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>
diff --git a/src/admin/components/search/pagination.vue b/src/admin/components/search/pagination.vue
index 852de4200..339207b0c 100644
--- a/src/admin/components/search/pagination.vue
+++ b/src/admin/components/search/pagination.vue
@@ -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"
diff --git a/src/admin/components/search/skeleton-items-list.vue b/src/admin/components/search/skeleton-items-list.vue
index 3c644742b..fac470a91 100644
--- a/src/admin/components/search/skeleton-items-list.vue
+++ b/src/admin/components/search/skeleton-items-list.vue
@@ -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">
diff --git a/src/admin/pages/lists/collections-page.vue b/src/admin/pages/lists/collections-page.vue
index e4afbda4a..c17ecaf63 100644
--- a/src/admin/pages/lists/collections-page.vue
+++ b/src/admin/pages/lists/collections-page.vue
@@ -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
             });
         }
     },
diff --git a/src/admin/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue
index 61878f65e..e6b3e32e5 100644
--- a/src/admin/pages/lists/items-page.vue
+++ b/src/admin/pages/lists/items-page.vue
@@ -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() {
diff --git a/src/admin/pages/lists/taxonomies-page.vue b/src/admin/pages/lists/taxonomies-page.vue
index 4aa119c5d..c6bd7403f 100644
--- a/src/admin/pages/lists/taxonomies-page.vue
+++ b/src/admin/pages/lists/taxonomies-page.vue
@@ -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"
diff --git a/src/admin/pages/lists/term-items-page.vue b/src/admin/pages/lists/term-items-page.vue
index 7bc9c5ef5..d44f2d52f 100644
--- a/src/admin/pages/lists/term-items-page.vue
+++ b/src/admin/pages/lists/term-items-page.vue
@@ -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() {
diff --git a/src/admin/pages/singles/item-page.vue b/src/admin/pages/singles/item-page.vue
index 7f59724d0..56c7c2e9e 100644
--- a/src/admin/pages/singles/item-page.vue
+++ b/src/admin/pages/singles/item-page.vue
@@ -384,8 +384,9 @@
                         itemId: this.itemId,
                         itemURL: this.item.url,
                         totalItems: 1,
-                    }
-                })
+                    },
+                    trapFocus: true
+                });
             }
         },
         created() {
diff --git a/src/classes/filter-types/checkbox/Checkbox.vue b/src/classes/filter-types/checkbox/Checkbox.vue
index c1e2a364c..7868fa088 100644
--- a/src/classes/filter-types/checkbox/Checkbox.vue
+++ b/src/classes/filter-types/checkbox/Checkbox.vue
@@ -193,7 +193,8 @@
                         appliedCheckBoxModal: () => {
                             this.loadOptions();
                         } 
-                    }
+                    },
+                    trapFocus: true
                 });
             },
             cleanSearchFromTags(filterTag) {
diff --git a/src/classes/filter-types/date/Date.vue b/src/classes/filter-types/date/Date.vue
index 8a8ac6e0a..1b5996fb2 100644
--- a/src/classes/filter-types/date/Date.vue
+++ b/src/classes/filter-types/date/Date.vue
@@ -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"
diff --git a/src/classes/filter-types/numeric/Numeric.vue b/src/classes/filter-types/numeric/Numeric.vue
index 46f4825b7..7108e460e 100644
--- a/src/classes/filter-types/numeric/Numeric.vue
+++ b/src/classes/filter-types/numeric/Numeric.vue
@@ -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"
diff --git a/src/classes/filter-types/taxonomy/Checkbox.vue b/src/classes/filter-types/taxonomy/Checkbox.vue
index f398b8ad0..b42accd31 100644
--- a/src/classes/filter-types/taxonomy/Checkbox.vue
+++ b/src/classes/filter-types/taxonomy/Checkbox.vue
@@ -280,6 +280,7 @@
                         } 
                     },
                     width: 'calc(100% - 8.333333333%)',
+                    trapFocus: true
                 });
             },
             cleanSearchFromTag(filterTag) {
diff --git a/src/classes/metadata-types/taxonomy/Taxonomy.vue b/src/classes/metadata-types/taxonomy/Taxonomy.vue
index 7acd3a756..afa03cb88 100644
--- a/src/classes/metadata-types/taxonomy/Taxonomy.vue
+++ b/src/classes/metadata-types/taxonomy/Taxonomy.vue
@@ -134,6 +134,7 @@
                         }
                     },
                     width: 'calc(100% - 8.333333333%)',
+                    trapFocus: true
                 });
             },
             getTermsFromTaxonomy(){