diff --git a/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue b/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue index 673038b620f43..8fa334b3a4a07 100644 --- a/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue +++ b/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue @@ -1,16 +1,31 @@ @@ -26,6 +41,8 @@ import { ATOMIC_PERMISSIONS, } from '../lib/SharePermissionsToolBox.js' +import { createFocusTrap } from 'focus-trap' + export default { components: { DropdownIcon, @@ -45,6 +62,7 @@ export default { return { selectedOption: '', showDropdown: this.toggle, + focusTrap: null, } }, computed: { @@ -102,6 +120,10 @@ export default { return BUNDLED_PERMISSIONS.READ_ONLY } }, + dropdownId() { + // Generate a unique ID for ARIA attributes + return `dropdown-${Math.random().toString(36).substr(2, 9)}` + }, }, watch: { toggle(toggleValue) { @@ -110,15 +132,26 @@ export default { }, mounted() { this.initializeComponent() - window.addEventListener('click', this.handleClickOutside); + window.addEventListener('click', this.handleClickOutside) }, beforeDestroy() { - // Remove the global click event listener to prevent memory leaks - window.removeEventListener('click', this.handleClickOutside); - }, + // Remove the global click event listener to prevent memory leaks + window.removeEventListener('click', this.handleClickOutside) + }, methods: { toggleDropdown() { this.showDropdown = !this.showDropdown + if (this.showDropdown) { + this.$nextTick(() => { + this._useFocusTrap() + }) + } else { + this._clearFocusTrap() + } + }, + closeDropdown() { + this.showDropdown = false + this._clearFocusTrap() }, selectOption(option) { this.selectedOption = option @@ -134,12 +167,46 @@ export default { this.selectedOption = this.preSelectedOption }, handleClickOutside(event) { - const dropdownElement = this.$refs.quickShareDropdown; + const dropdownContainer = this.$refs.quickShareDropdownContainer + + if (dropdownContainer && !dropdownContainer.contains(event.target)) { + this.showDropdown = false + } + }, + _useFocusTrap() { + const dropdownElement = this.$refs.quickShareDropdown + this.focusTrap = createFocusTrap(dropdownElement, { + allowOutsideClick: true, + }) - if (dropdownElement && !dropdownElement.contains(event.target)) { - this.showDropdown = false; + this.focusTrap.activate() + }, + _clearFocusTrap() { + this.focusTrap?.deactivate() + this.focusTrap = null + }, + shiftFocusForward() { + const currentElement = document.activeElement + let nextElement = currentElement.nextElementSibling + if (nextElement) { + nextElement = this.$refs.quickShareDropdown.firstElementChild + } + nextElement.focus() + }, + shiftFocusBackward() { + const currentElement = document.activeElement + let previousElement = currentElement.previousElementSibling + if (!previousElement) { + previousElement = this.$refs.quickShareDropdown.lastElementChild } - }, + previousElement.focus() + }, + handleArrowUp() { + this.shiftFocusBackward() + }, + handleArrowDown() { + this.shiftFocusForward() + }, }, } @@ -161,6 +228,8 @@ export default { .share-select-dropdown-container { position: absolute; + display: flex; + flex-direction: column; top: 100%; left: 0; background-color: var(--color-main-background); @@ -172,6 +241,15 @@ export default { .dropdown-item { padding: 8px; font-size: 12px; + background: none; + border: none; + border-radius: 0; + font: inherit; + cursor: pointer; + color: inherit; + outline: none; + width: 100%; + white-space: nowrap; &:hover { background-color: #f2f2f2;