Fix popout menu tab indices and buttons within being clickable when closed (#107)

This commit is contained in:
Prospector 2023-10-17 14:37:37 -07:00 committed by GitHub
parent 8369330053
commit a3d4db9fc1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,9 +1,10 @@
<template>
<div ref="dropdown" class="popup-container" tabindex="0" :aria-expanded="dropdownVisible">
<div ref="dropdown" class="popup-container" tabindex="-1" :aria-expanded="dropdownVisible">
<button
v-bind="$attrs"
ref="dropdownButton"
:class="{ 'popout-open': dropdownVisible }"
tabindex="-1"
@click="toggleDropdown"
>
<slot></slot>
@ -145,10 +146,19 @@ onBeforeUnmount(() => {
left: calc(100% + var(--gap-sm) - 1rem);
}
&:not(.visible):not(:focus-within) {
pointer-events: none;
*,
::before,
::after {
pointer-events: none;
}
}
&.visible,
&:focus-within {
opacity: 1;
pointer-events: unset;
scale: 1;
&.position-bottom-left {