@rancher/shell 3.0.2-rc.3 → 3.0.2-rc.4

package/rancher-components/RcDropdown/RcDropdown.vue

@@ -35,6 +35,7 @@ const {
   setFocus,
   provideDropdownContext,
   registerDropdownCollection,
+  handleKeydown,
 } = useDropdownContext();
 
 provideDropdownContext();
@@ -68,10 +69,14 @@ const applyShow = () => {
     <template #popper>
       <div
         ref="dropdownTarget"
+        class="dropdownTarget"
+        tabindex="-1"
         role="menu"
         aria-orientation="vertical"
         dropdown-menu-collection
         :aria-label="ariaLabel || 'Dropdown Menu'"
+        @keydown="handleKeydown"
+        @keydown.down="setFocus()"
       >
         <slot name="dropdownCollection">
           <!--Empty slot content-->
@@ -108,4 +113,10 @@ const applyShow = () => {
       }
     }
   }
+
+  .dropdownTarget {
+    &:focus-visible, &:focus {
+      outline: none;
+    }
+  }
 </style>

package/rancher-components/RcDropdown/RcDropdownTrigger.vue

@@ -9,8 +9,8 @@ import { DropdownContext, defaultContext } from './types';
 const {
   showMenu,
   registerTrigger,
-  focusFirstElement,
   isMenuOpen,
+  handleKeydown,
 } = inject<DropdownContext>('dropdownContext') || defaultContext;
 
 const dropdownTrigger = useTemplateRef<RcButtonType>('dropdownTrigger');
@@ -32,8 +32,7 @@ defineExpose({ focus });
     role="button"
     aria-haspopup="menu"
     :aria-expanded="isMenuOpen"
-    @keydown.down="focusFirstElement"
-    @keydown.escape="showMenu(false)"
+    @keydown.enter.space="handleKeydown"
     @click="showMenu(true)"
   >
     <slot name="default">

package/rancher-components/RcDropdown/useDropdownCollection.ts

@@ -40,6 +40,7 @@ export const useDropdownCollection = () => {
   return {
     dropdownItems,
     firstDropdownItem,
+    dropdownContainer,
     registerDropdownCollection,
   };
 };

package/rancher-components/RcDropdown/useDropdownContext.ts

@@ -12,7 +12,12 @@ import { RcButtonType } from '@components/RcButton';
  * interactions and setting focus.
  */
 export const useDropdownContext = () => {
-  const { dropdownItems, firstDropdownItem, registerDropdownCollection } = useDropdownCollection();
+  const {
+    dropdownItems,
+    firstDropdownItem,
+    dropdownContainer,
+    registerDropdownCollection,
+  } = useDropdownCollection();
 
   const isMenuOpen = ref(false);
 
@@ -21,6 +26,9 @@ export const useDropdownContext = () => {
    * @param show - Whether to show or hide the dropdown menu.
    */
   const showMenu = (show: boolean) => {
+    if (!show) {
+      didKeydown.value = false;
+    }
     isMenuOpen.value = show;
   };
 
@@ -46,12 +54,29 @@ export const useDropdownContext = () => {
     dropdownTrigger?.value?.focus();
   };
 
+  /**
+     * Tracks if a keydown event has occurred. Important for distinguishing keyboard
+     * events from mouse events.
+     */
+  const didKeydown = ref(false);
+
+  const handleKeydown = () => {
+    didKeydown.value = true;
+  };
+
   /**
    * Sets focus to the first dropdown item if a keydown event has occurred.
    */
   const setFocus = () => {
     nextTick(() => {
+      if (!didKeydown.value) {
+        dropdownContainer.value?.focus();
+
+        return;
+      }
+
       firstDropdownItem.value?.focus();
+      didKeydown.value = false;
     });
   };
 
@@ -69,6 +94,7 @@ export const useDropdownContext = () => {
       focusFirstElement: () => {
         setFocus();
       },
+      handleKeydown,
     });
   };
 
@@ -79,5 +105,6 @@ export const useDropdownContext = () => {
     setFocus,
     provideDropdownContext,
     registerDropdownCollection,
+    handleKeydown,
   };
 };