Keyboard nav for extensions main screen

pkg/rancher-components/src/components/Card/Card.vue

@@ -1,8 +1,9 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import { createFocusTrap, FocusTrap } from 'focus-trap';
+import { basicSetupFocusTrap } from '@shell/composables/focusTrap';
 
 export default defineComponent({
+
   name:  'Card',
   props: {
     /**
@@ -56,32 +57,17 @@ export default defineComponent({
       default: false,
     },
   },
-  data() {
-    return { focusTrapInstance: {} as FocusTrap };
-  },
-  mounted() {
-    if (this.triggerFocusTrap) {
-      this.focusTrapInstance = createFocusTrap(this.$refs.cardContainer as HTMLElement, {
-        escapeDeactivates: true,
-        allowOutsideClick: true,
-      });
-
-      this.$nextTick(() => {
-        this.focusTrapInstance.activate();
-      });
+  setup(props) {
+    if (props.triggerFocusTrap) {
+      basicSetupFocusTrap('#focus-trap-card-container');
     }
-  },
-  beforeUnmount() {
-    if (this.focusTrapInstance && this.triggerFocusTrap) {
-      this.focusTrapInstance.deactivate();
-    }
-  },
+  }
 });
 </script>
 
 <template>
   <div
-    ref="cardContainer"
+    id="focus-trap-card-container"
     class="card-container"
     :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}"
     data-testid="card"

pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue

@@ -350,6 +350,7 @@ export default defineComponent({
       <input
         v-else
         ref="value"
+        role="textbox"
         :class="{ 'no-label': !hasLabel }"
         v-bind="$attrs"
         :maxlength="_maxlength"

shell/assets/styles/base/_basic.scss

@@ -61,13 +61,13 @@ BODY {
 INPUT,
 SELECT,
 TEXTAREA,
-.labeled-input,
 .checkbox-custom {
   &:focus, &.focused {
     @include form-focus;
   }
 }
 
+.labeled-input,
 .radio-custom,
 .labeled-select,
 .unlabeled-select {
@@ -76,6 +76,7 @@ TEXTAREA,
   }
 }
 
+.labeled-input,
 .labeled-select,
 .unlabeled-select {
   &.focused {

shell/assets/styles/global/_form.scss

@@ -27,7 +27,8 @@ TEXTAREA,
 
   @include input-status-color;
 
-  &:focus:not(.unlabeled-select):not(.labeled-select), &.focused:not(.unlabeled-select):not(.labeled-select) {
+  &:focus:not(.labeled-input):not(.unlabeled-select):not(.labeled-select), 
+  &.focused:not(.labeled-input):not(.unlabeled-select):not(.labeled-select) {
     @include form-focus;
   }
 

shell/assets/translations/en-us.yaml

@@ -4358,13 +4358,17 @@ plugins:
   incompatibleUiExtensionsApiVersion: "The latest version of this extension ({ version }) is not compatible with the current Extensions API version ({ required })."
   incompatibleHost: 'The latest version of this extension ({ version }) has a host of "{ required }" which is not compatible with this application "{ mainHost }".'
   currentInstalledVersionBlockedByKubeVersion: "This version is not compatible with the current Kubernetes version ({ kubeVersion }  Vs  { kubeVersionToCheck })."
+  closePluginPanel: Close plugin description panel
+  viewVersionDetails: View extension {name} version {version} details/Readme
   labels:
     builtin: Built-in
     experimental: Experimental
     third-party: Third-Party
     image: Image
     installing: Installing ...
     uninstalling: Uninstalling ...
+    menu: Extensions menu
+    reloadRancher: Reload Rancher
   descriptions:
     experimental: This Extension is marked as experimental
     third-party: This Extension is provided by a Third-Party

shell/components/AppModal.vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { watcherBasedSetupFocusTrap } from '@shell/composables/focusTrap';
 
 export default defineComponent({
   name: 'AppModal',
@@ -56,6 +57,20 @@ export default defineComponent({
     name: {
       type:    String,
       default: '',
+    },
+    /**
+     * Modal visibility (used for focus-trap)
+     */
+    modalVisibility: {
+      type:    Boolean,
+      default: false,
+    },
+    /**
+     * trigger focus trap
+     */
+    triggerFocusTrap: {
+      type:    Boolean,
+      default: false,
     }
   },
   computed: {
@@ -85,6 +100,11 @@ export default defineComponent({
       };
     }
   },
+  created() {
+    if (this.triggerFocusTrap) {
+      watcherBasedSetupFocusTrap(() => this.modalVisibility, '.modal-container');
+    }
+  },
   mounted() {
     document.addEventListener('keydown', this.handleEscapeKey);
   },

shell/components/Dialog.vue

@@ -60,6 +60,8 @@ export default {
     :name="name"
     height="auto"
     :scrollable="true"
+    :modal-visibility="!closed"
+    :trigger-focus-trap="true"
     @close="closeDialog(false)"
     @before-open="beforeOpen"
   >

shell/components/Tabbed/index.vue

@@ -276,12 +276,11 @@ export default {
           :data-testid="`btn-${tab.name}`"
           :aria-controls="'#' + tab.name"
           :aria-selected="tab.active"
-          :aria-label="tab.labelDisplay"
+          :aria-label="tab.labelDisplay || ''"
           role="tab"
           tabindex="0"
           @click.prevent="select(tab.name, $event)"
-          @keyup.enter="select(tab.name, $event)"
-          @keyup.space="select(tab.name, $event)"
+          @keyup.enter.space="select(tab.name, $event)"
         >
           <span>{{ tab.labelDisplay }}</span>
           <span
@@ -409,10 +408,8 @@ export default {
 
       &:focus-visible {
         @include focus-outline;
-
-        span {
-          text-decoration: underline;
-        }
+        outline-offset: -4px;
+        text-decoration: none;
       }
     }
 

shell/composables/focusTrap.ts

@@ -0,0 +1,71 @@
+/**
+ * focusTrap is a composable based on the "focus-trap" package that allows us to implement focus traps
+ * on components for keyboard navigation is a safe and reusable way
+ */
+import { watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
+import { createFocusTrap, FocusTrap } from 'focus-trap';
+
+export function basicSetupFocusTrap(containerSelector: string) {
+  let focusTrapInstance = {} as FocusTrap;
+
+  onMounted(() => {
+    focusTrapInstance = createFocusTrap(document.querySelector(containerSelector) as HTMLElement, {
+      escapeDeactivates: true,
+      allowOutsideClick: true,
+    });
+
+    nextTick(() => {
+      focusTrapInstance.activate();
+    });
+  });
+
+  onBeforeUnmount(() => {
+    if (focusTrapInstance) {
+      focusTrapInstance.deactivate();
+    }
+  });
+}
+
+export function watcherBasedSetupFocusTrapWithDestroyIncluded(watchVar:any, containerSelector: string) {
+  let focusTrapInstance = {} as FocusTrap;
+
+  watch(watchVar, (neu) => {
+    if (neu) {
+      nextTick(() => {
+        focusTrapInstance = createFocusTrap(document.querySelector(containerSelector) as HTMLElement, {
+          escapeDeactivates: true,
+          allowOutsideClick: true,
+        });
+        nextTick(() => {
+          focusTrapInstance.activate();
+        });
+      });
+    } else if (!neu && focusTrapInstance) {
+      focusTrapInstance.deactivate();
+    }
+  });
+}
+
+export function watcherBasedSetupFocusTrap(watchVar:any, containerSelector: string) {
+  let focusTrapInstance = {} as FocusTrap;
+
+  watch(watchVar, (neu) => {
+    if (neu) {
+      nextTick(() => {
+        focusTrapInstance = createFocusTrap(document.querySelector(containerSelector) as HTMLElement, {
+          escapeDeactivates: true,
+          allowOutsideClick: true,
+        });
+        nextTick(() => {
+          focusTrapInstance.activate();
+        });
+      });
+    }
+  }, { immediate: true });
+
+  onBeforeUnmount(() => {
+    if (focusTrapInstance) {
+      focusTrapInstance.deactivate();
+    }
+  });
+}

shell/pages/c/_cluster/explorer/ConfigBadge.vue

@@ -24,17 +24,14 @@ export default {
 </script>
 
 <template>
-  <div
-    class="config-badge"
-  >
+  <div class="config-badge">
     <div>
       <button
         class="badge-install btn btn-sm role-secondary"
         data-testid="add-custom-cluster-badge"
         role="button"
         tabindex="0"
         @click="customBadgeDialog"
-        @keyup.space="customBadgeDialog"
       >
         <i
           v-clean-tooltip="tooltip"
@@ -60,6 +57,10 @@ export default {
     > I {
       line-height: inherit;
     }
+
+    &:focus {
+      outline: 0;
+    }
   }
 
 </style>

shell/pages/c/_cluster/uiplugins/CatalogList/CatalogLoadDialog.vue

@@ -434,6 +434,8 @@ export default {
     name="catalogLoadDialog"
     height="auto"
     :scrollable="true"
+    :modal-visibility="showModal"
+    :trigger-focus-trap="true"
     @close="closeDialog()"
   >
     <Loading

shell/pages/c/_cluster/uiplugins/CatalogList/CatalogUninstallDialog.vue

@@ -121,6 +121,8 @@ export default {
     name="uninstallCatalogDialog"
     height="auto"
     :scrollable="true"
+    :modal-visibility="showModal"
+    :trigger-focus-trap="true"
     @close="closeDialog(false)"
   >
     <div

shell/pages/c/_cluster/uiplugins/CatalogList/index.vue

@@ -95,10 +95,12 @@ export default {
         <template #header-left>
           <div>
             <button
-              class="btn bg-primary mr-10"
+              class="btn role-primary mr-10"
               type="button"
               aria-haspopup="dialog"
               data-testid="extensions-catalog-load-dialog"
+              role="button"
+              :aria-label="t('plugins.manageCatalog.imageLoad.load')"
               @click="$emit('showCatalogLoadDialog')"
             >
               {{ t('plugins.manageCatalog.imageLoad.load') }}

shell/pages/c/_cluster/uiplugins/DeveloperInstallDialog.vue

@@ -28,7 +28,7 @@ export default {
   },
 
   watch: {
-    name(neu, old) {
+    name(neu) {
       if (this.canModifyLocation) {
         this.location = `/pkg/${ neu }/${ neu }.umd.min.js`;
       }
@@ -154,6 +154,8 @@ export default {
     name="developerInstallPluginDialog"
     height="auto"
     :scrollable="true"
+    :modal-visibility="showModal"
+    :trigger-focus-trap="true"
     @close="closeDialog()"
   >
     <div class="plugin-install-dialog">

shell/pages/c/_cluster/uiplugins/InstallDialog.vue

@@ -251,6 +251,8 @@ export default {
     name="installPluginDialog"
     height="auto"
     :scrollable="true"
+    :modal-visibility="showModal"
+    :trigger-focus-trap="true"
     @close="closeDialog(false)"
   >
     <div