fix(Menu): accessibility for menu when it is first opened

example/cypress/e2e/overlays/menu.cy.ts

@@ -24,8 +24,7 @@ describe('menu', () => {
     cy.get('@menuContent').trigger('mouseover');
     cy.get('@menuContent').trigger('click');
     cy.get('body').find('div[role=menu-content]').should('exist');
-    cy.get('@activator').type('{esc}');
-    cy.get('body').trigger('click');
+    cy.get('@menuContent').type('{esc}');
     cy.get('body').find('div[role=menu-content]').should('not.exist');
   });
 
@@ -50,9 +49,9 @@ describe('menu', () => {
     cy.get('body').find('div[role=menu-content]').should('exist');
 
     cy.get('@activator').trigger('mouseleave');
-    cy.get('body').find('div[role=menu-content]').should('exist');
+    cy.get('body').find('div[role=menu-content]').should('exist').as('menuContent');
 
-    cy.get('@activator').type('{esc}');
+    cy.get('@menuContent').type('{esc}');
     cy.get('body').trigger('click');
     cy.get('body').find('div[role=menu-content]').should('not.exist');
   });

src/components/forms/auto-complete/RuiAutoComplete.vue

@@ -398,6 +398,7 @@
   <RuiMenu
     v-model="isOpen"
     :class="$style.wrapper"
+    disable-auto-focus
     v-bind="{
       ...getRootAttrs($attrs),
       placement: 'bottom-start',
@@ -797,7 +798,7 @@
   }
 
   .fieldset {
     @apply absolute w-full min-w-0 h-[calc(100%+0.5rem)] top-0 left-0 rounded pointer-events-none px-2 transition-all -mt-2;
 
     legend {
       @apply opacity-0 text-xs truncate;

src/components/forms/select/RuiMenuSelect.vue

@@ -139,6 +139,7 @@ function clear() {
   <RuiMenu
     v-model="isOpen"
     :class="$style.wrapper"
+    disable-auto-focus
     v-bind="{
       ...getRootAttrs($attrs),
       placement: 'bottom-start',

src/components/overlays/menu/RuiMenu.vue

@@ -20,6 +20,7 @@ export interface MenuProps {
   showDetails?: boolean;
   dense?: boolean;
   persistent?: boolean;
+  disableAutoFocus?: boolean;
 }
 
 defineOptions({
@@ -42,6 +43,7 @@ const props = withDefaults(defineProps<MenuProps>(), {
   errorMessages: () => [],
   successMessages: () => [],
   persistent: false,
+  disableAutoFocus: false,
 });
 
 const emit = defineEmits<{
@@ -60,6 +62,7 @@ const {
   errorMessages,
   successMessages,
   persistent,
+  disableAutoFocus,
 } = toRefs(props);
 
 const {
@@ -78,13 +81,45 @@ const {
 const { width } = useElementSize(activator);
 
 const click = ref<boolean>(false);
+const menuContent = ref<HTMLElement>();
+
+const FOCUSABLE_ELEMENTS_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+function focusMenu() {
+  if (get(disableAutoFocus))
+    return;
+
+  nextTick(() => {
+    const content = get(menuContent);
+    if (!content)
+      return;
+
+    // Focus on the menu container itself
+    content.focus();
+  });
+}
 
 function onLeave(event?: KeyboardEvent) {
   if (!get(open))
     return;
   onClose();
   set(click, false);
   event?.stopPropagation();
+
+  // Return focus to activator when menu closes
+  if (!get(disableAutoFocus)) {
+    nextTick(() => {
+      const activatorEl = get(activator);
+      if (activatorEl) {
+        const focusableEl = activatorEl.querySelector<HTMLElement>(
+          FOCUSABLE_ELEMENTS_SELECTOR,
+        );
+        if (focusableEl) {
+          focusableEl.focus();
+        }
+      }
+    });
+  }
 }
 
 function checkClick() {
@@ -110,6 +145,9 @@ watch(modelValue, (value) => {
 
 watch(open, (open) => {
   emit('update:model-value', open);
+  if (open) {
+    focusMenu();
+  }
 });
 
 onClickOutside(menu, () => {
@@ -149,7 +187,10 @@ const { hasError, hasSuccess } = useFormTextDetail(
 </script>
 
 <template>
-  <div @keydown.esc.stop="onLeave()">
+  <div
+    @keydown.esc.stop="onLeave()"
+    @keydown.tab="!disableAutoFocus && open ? undefined : null"
+  >
     <div
       ref="activator"
       :class="[$style.wrapper, wrapperClass, { 'w-full': fullWidth }]"
@@ -174,6 +215,7 @@ const { hasError, hasSuccess } = useFormTextDetail(
         ]"
         role="menu"
         @click="closeOnContentClick ? onLeave() : undefined"
+        @keydown.esc.stop="onLeave()"
       >
         <TransitionGroup
           enter-active-class="transition ease-out duration-200"
@@ -188,9 +230,11 @@ const { hasError, hasSuccess } = useFormTextDetail(
         >
           <div
             v-if="open"
+            ref="menuContent"
             key="menu"
-            :class="$style.base"
             role="menu-content"
+            :class="$style.base"
+            tabindex="-1"
             v-bind="baseMenuAttrs"
           >
             <slot v-bind="{ width }" />
@@ -228,6 +272,10 @@ const { hasError, hasSuccess } = useFormTextDetail(
   .base {
     @apply rounded overflow-hidden shadow-8;
     @apply bg-white text-rui-text;
+
+    &:focus {
+      @apply outline-none;
+    }
   }
 }
 

src/composables/popper.ts

@@ -30,7 +30,7 @@ export const DEFAULT_POPPER_OPTIONS: PopperOptions = {
 };
 
 interface UsePopperReturn {
-  instance: Ref<Instance | null>;
+  instance: Ref<Instance | undefined>;
   leavePending: Ref<boolean>;
   onClose: (immediate?: boolean) => void;
   onLeavePending: () => void;
@@ -39,7 +39,7 @@ interface UsePopperReturn {
   open: Ref<boolean, boolean>;
   popper: Ref<MaybeElement>;
   popperEnter: Ref<boolean>;
-  reference: Ref<MaybeElement>;
+  reference: Ref<HTMLElement | undefined>;
   updatePopper: () => Promise<void>;
 }
 
@@ -50,9 +50,9 @@ export function usePopper(
   closeDelay: Ref<number> = ref(0),
   virtualReference?: Ref<Element | VirtualElement>,
 ): UsePopperReturn {
-  const reference = ref<MaybeElement | null>(null);
-  const popper = ref<MaybeElement | null>(null);
-  const instance = ref<Instance | null>(null);
+  const reference = ref<HTMLElement | undefined>(undefined);
+  const popper = ref<MaybeElement | undefined>(undefined);
+  const instance = ref<Instance | undefined>(undefined);
   const open = ref<boolean>(false);
   const popperEnter = ref<boolean>(false);
   const leavePending = ref<boolean>(false);