remove console logs + add focus trap to card component with prop cont…

…rol + fix element for config badge button

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
+import { createFocusTrap } from 'focus-trap';
 
 export default defineComponent({
   name:  'Card',
@@ -50,12 +51,37 @@ export default defineComponent({
       type:    Boolean,
       default: false,
     },
-  }
+    triggerFocusTrap: {
+      type:    Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return { focusTrapInstance: undefined as any };
+  },
+  mounted() {
+    if (this.triggerFocusTrap) {
+      this.focusTrapInstance = createFocusTrap(this.$refs.cardContainer as HTMLElement, {
+        escapeDeactivates: true,
+        allowOutsideClick: true,
+      });
+
+      this.$nextTick(() => {
+        this.focusTrapInstance.activate();
+      });
+    }
+  },
+  beforeUnmount() {
+    if (this.focusTrapInstance && this.triggerFocusTrap) {
+      this.focusTrapInstance.deactivate();
+    }
+  },
 });
 </script>
 
 <template>
   <div
+    ref="cardContainer"
     class="card-container"
     :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}"
     data-testid="card"

shell/components/Tabbed/index.vue

@@ -258,7 +258,6 @@ export default {
       role="tablist"
       class="tabs"
       :class="{'clearfix':!sideTabs, 'vertical': sideTabs, 'horizontal': !sideTabs}"
-      tabindex="0"
       data-testid="tabbed-block"
       @keydown.right.prevent="selectNext(1)"
       @keydown.left.prevent="selectNext(-1)"
@@ -277,8 +276,12 @@ export default {
           :data-testid="`btn-${tab.name}`"
           :aria-controls="'#' + tab.name"
           :aria-selected="tab.active"
+          :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)"
         >
           <span>{{ tab.labelDisplay }}</span>
           <span
@@ -403,6 +406,14 @@ export default {
           text-decoration: underline;
         }
       }
+
+      &:focus-visible {
+        @include focus-outline;
+
+        span {
+          text-decoration: underline;
+        }
+      }
     }
 
     .conditions-alert-icon {

shell/dialog/AddCustomBadgeDialog.vue

@@ -211,9 +211,9 @@ export default {
 
 <template>
   <Card
-    v-trap="true"
     class="prompt-badge"
     :show-highlight-border="false"
+    :trigger-focus-trap="true"
   >
     <template #title>
       <h4 class="text-default-text">

shell/directives/focus-trap.js

@@ -1,6 +1,5 @@
 import { createFocusTrap } from 'focus-trap';
 
-console.error('RUNNING!!!!');
 let trap;
 
 const createTrap = (element) => {

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

@@ -16,7 +16,7 @@ export default {
     }
   },
   methods: {
-    customBadgeDialog() {
+    customBadgeDialog(ev) {
       this.$store.dispatch('cluster/promptModal', { component: 'AddCustomBadgeDialog', componentProps: { mode: _EDIT } });
     },
   },
@@ -28,20 +28,19 @@ export default {
     class="config-badge"
   >
     <div>
-      <a
+      <button
         class="badge-install btn btn-sm role-secondary"
         data-testid="add-custom-cluster-badge"
         role="button"
         tabindex="0"
         @click="customBadgeDialog"
-        @keyup.enter="customBadgeDialog"
         @keyup.space="customBadgeDialog"
       >
         <i
           v-clean-tooltip="tooltip"
           class="icon icon-brush-icon"
         />
-      </a>
+      </button>
     </div>
   </div>
 </template>