diff --git a/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue b/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue index 8128b3925ee1c..a83ef50304848 100644 --- a/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue +++ b/apps/files_sharing/src/components/SharingEntryQuickShareSelect.vue @@ -1,16 +1,30 @@ @@ -26,6 +40,8 @@ import { ATOMIC_PERMISSIONS, } from '../lib/SharePermissionsToolBox.js' +import { createFocusTrap } from 'focus-trap' + export default { components: { DropdownIcon, @@ -45,6 +61,7 @@ export default { return { selectedOption: '', showDropdown: this.toggle, + focusTrap: null, } }, computed: { @@ -102,6 +119,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,10 +131,26 @@ export default { }, mounted() { this.initializeComponent() + window.addEventListener('click', this.handleClickOutside) + }, + beforeDestroy() { + // 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.clearFocusTrap() + this.showDropdown = false }, selectOption(option) { this.selectedOption = option @@ -128,6 +165,51 @@ export default { initializeComponent() { this.selectedOption = this.preSelectedOption }, + handleClickOutside(event) { + const dropdownContainer = this.$refs.quickShareDropdownContainer + + if (dropdownContainer && !dropdownContainer.contains(event.target)) { + this.showDropdown = false + } + }, + useFocusTrap() { + // Create global stack if undefined + // Use in with trapStack to avoid conflicting traps + Object.assign(window, { _nc_focus_trap: window._nc_focus_trap || [] }) + const dropdownElement = this.$refs.quickShareDropdown + this.focusTrap = createFocusTrap(dropdownElement, { + allowOutsideClick: true, + trapStack: window._nc_focus_trap, + }) + + 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() + }, }, } @@ -147,8 +229,10 @@ export default { color: var(--color-primary-element); } - .share-select-dropdown-container { + .share-select-dropdown { position: absolute; + display: flex; + flex-direction: column; top: 100%; left: 0; background-color: var(--color-main-background); @@ -160,6 +244,16 @@ 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; + text-align: left; &:hover { background-color: #f2f2f2; @@ -172,13 +266,13 @@ export default { } /* Optional: Add a transition effect for smoother dropdown animation */ - .share-select-dropdown-container { + .share-select-dropdown { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } - &.active .share-select-dropdown-container { + &.active .share-select-dropdown { max-height: 200px; /* Adjust the value to your desired height */ }