diff --git a/pkg/rancher-components/src/components/Card/Card.vue b/pkg/rancher-components/src/components/Card/Card.vue
index f7e7790dd41..3d5310ea3a0 100644
--- a/pkg/rancher-components/src/components/Card/Card.vue
+++ b/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 { useBasicSetupFocusTrap } 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) {
+      useBasicSetupFocusTrap('#focus-trap-card-container-element');
     }
-  },
-  beforeUnmount() {
-    if (this.focusTrapInstance && this.triggerFocusTrap) {
-      this.focusTrapInstance.deactivate();
-    }
-  },
+  }
 });
 </script>
 
 <template>
   <div
-    ref="cardContainer"
+    id="focus-trap-card-container-element"
     class="card-container"
     :class="{'highlight-border': showHighlightBorder, 'card-sticky': sticky}"
     data-testid="card"
diff --git a/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue b/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue
index 404bd635c8a..79e9a0f6ac0 100644
--- a/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue
+++ b/pkg/rancher-components/src/components/Form/LabeledInput/LabeledInput.vue
@@ -364,6 +364,7 @@ export default defineComponent({
       <input
         v-else
         ref="value"
+        role="textbox"
         :class="{ 'no-label': !hasLabel }"
         v-bind="$attrs"
         :maxlength="_maxlength"
diff --git a/shell/assets/styles/base/_basic.scss b/shell/assets/styles/base/_basic.scss
index cc9b7b2f75b..ceffb0308fa 100644
--- a/shell/assets/styles/base/_basic.scss
+++ b/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 {
diff --git a/shell/assets/styles/global/_form.scss b/shell/assets/styles/global/_form.scss
index 8897e6f998d..b87de15c6e0 100644
--- a/shell/assets/styles/global/_form.scss
+++ b/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;
   }
 
diff --git a/shell/assets/translations/en-us.yaml b/shell/assets/translations/en-us.yaml
index 256158747d5..d6b483e5282 100644
--- a/shell/assets/translations/en-us.yaml
+++ b/shell/assets/translations/en-us.yaml
@@ -4376,6 +4376,8 @@ 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
@@ -4383,6 +4385,8 @@ plugins:
     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
diff --git a/shell/components/AppModal.vue b/shell/components/AppModal.vue
index 5afab3f3d53..8165eb609c3 100644
--- a/shell/components/AppModal.vue
+++ b/shell/components/AppModal.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { DEFAULT_FOCUS_TRAP_OPTS, useBasicSetupFocusTrap } from '@shell/composables/focusTrap';
 
 export default defineComponent({
   name: 'AppModal',
@@ -56,6 +57,20 @@ export default defineComponent({
     name: {
       type:    String,
       default: '',
+    },
+    /**
+     * trigger focus trap
+     */
+    triggerFocusTrap: {
+      type:    Boolean,
+      default: false,
+    },
+    /**
+     * forcefully set return focus element
+     */
+    returnFocus: {
+      type:    String,
+      default: '',
     }
   },
   computed: {
@@ -85,6 +100,19 @@ export default defineComponent({
       };
     }
   },
+  setup(props) {
+    if (props.triggerFocusTrap) {
+      let opts:any = DEFAULT_FOCUS_TRAP_OPTS;
+
+      if (props.returnFocus) {
+        opts = {
+          ...DEFAULT_FOCUS_TRAP_OPTS,
+          setReturnFocus: props.returnFocus
+        };
+      }
+      useBasicSetupFocusTrap('#modal-container-element', opts);
+    }
+  },
   mounted() {
     document.addEventListener('keydown', this.handleEscapeKey);
   },
@@ -134,6 +162,7 @@ export default defineComponent({
       >
         <div
           v-bind="$attrs"
+          id="modal-container-element"
           ref="modalRef"
           :class="customClass"
           class="modal-container"
diff --git a/shell/components/Dialog.vue b/shell/components/Dialog.vue
index c9fd6359d50..18683a59fbc 100644
--- a/shell/components/Dialog.vue
+++ b/shell/components/Dialog.vue
@@ -60,6 +60,7 @@ export default {
     :name="name"
     height="auto"
     :scrollable="true"
+    :trigger-focus-trap="true"
     @close="closeDialog(false)"
     @before-open="beforeOpen"
   >
diff --git a/shell/components/Tabbed/index.vue b/shell/components/Tabbed/index.vue
index 25eb101fe3f..b0ee2d9f4e0 100644
--- a/shell/components/Tabbed/index.vue
+++ b/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;
       }
     }
 
diff --git a/shell/components/form/LabeledSelect.vue b/shell/components/form/LabeledSelect.vue
index edfadf55a99..21342e7bf2a 100644
--- a/shell/components/form/LabeledSelect.vue
+++ b/shell/components/form/LabeledSelect.vue
@@ -291,7 +291,7 @@ export default {
     ]"
     :tabindex="isView || disabled ? -1 : 0"
     @click="focusSearch"
-    @keyup.enter.space.down="focusSearch"
+    @keydown.enter.space.down="focusSearch"
   >
     <div
       :class="{ 'labeled-container': true, raised, empty, [mode]: true }"
diff --git a/shell/components/form/Select.vue b/shell/components/form/Select.vue
index e5e68fc9cbf..a83a735d2f9 100644
--- a/shell/components/form/Select.vue
+++ b/shell/components/form/Select.vue
@@ -256,7 +256,7 @@ export default {
     }"
     :tabindex="disabled || isView ? -1 : 0"
     @click="focusSearch"
-    @keyup.enter.space.down="focusSearch"
+    @keydown.enter.space.down="focusSearch"
   >
     <v-select
       ref="select-input"
diff --git a/shell/composables/focusTrap.ts b/shell/composables/focusTrap.ts
new file mode 100644
index 00000000000..5a2d9d74d28
--- /dev/null
+++ b/shell/composables/focusTrap.ts
@@ -0,0 +1,74 @@
+/**
+ * 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 const DEFAULT_FOCUS_TRAP_OPTS = { escapeDeactivates: true, allowOutsideClick: true };
+
+export function useBasicSetupFocusTrap(focusElement: string | HTMLElement, opts:any = DEFAULT_FOCUS_TRAP_OPTS) {
+  let focusTrapInstance: FocusTrap;
+  let focusEl;
+
+  onMounted(() => {
+    focusEl = typeof focusElement === 'string' ? document.querySelector(focusElement) as HTMLElement : focusElement;
+
+    focusTrapInstance = createFocusTrap(focusEl, opts);
+
+    nextTick(() => {
+      focusTrapInstance.activate();
+    });
+  });
+
+  onBeforeUnmount(() => {
+    if (Object.keys(focusTrapInstance).length) {
+      focusTrapInstance.deactivate();
+    }
+  });
+}
+
+export function useWatcherBasedSetupFocusTrapWithDestroyIncluded(watchVar:any, focusElement: string | HTMLElement, opts:any = DEFAULT_FOCUS_TRAP_OPTS) {
+  let focusTrapInstance: FocusTrap;
+  let focusEl;
+
+  watch(watchVar, (neu) => {
+    if (neu) {
+      nextTick(() => {
+        focusEl = typeof focusElement === 'string' ? document.querySelector(focusElement) as HTMLElement : focusElement;
+
+        focusTrapInstance = createFocusTrap(focusEl, opts);
+
+        nextTick(() => {
+          focusTrapInstance.activate();
+        });
+      });
+    } else if (!neu && Object.keys(focusTrapInstance).length) {
+      focusTrapInstance.deactivate();
+    }
+  });
+}
+
+export function useWatcherBasedSetupFocusTrap(watchVar:any, focusElement: string | HTMLElement, opts:any = DEFAULT_FOCUS_TRAP_OPTS) {
+  let focusTrapInstance: FocusTrap;
+  let focusEl;
+
+  watch(watchVar, (neu) => {
+    if (neu) {
+      nextTick(() => {
+        focusEl = typeof focusElement === 'string' ? document.querySelector(focusElement) as HTMLElement : focusElement;
+
+        focusTrapInstance = createFocusTrap(focusEl, opts);
+        nextTick(() => {
+          focusTrapInstance.activate();
+        });
+      });
+    }
+  }, { immediate: true });
+
+  onBeforeUnmount(() => {
+    if (Object.keys(focusTrapInstance).length) {
+      focusTrapInstance.deactivate();
+    }
+  });
+}
diff --git a/shell/pages/c/_cluster/explorer/ConfigBadge.vue b/shell/pages/c/_cluster/explorer/ConfigBadge.vue
index 100d1b1bbc2..ad8fc81ccfb 100644
--- a/shell/pages/c/_cluster/explorer/ConfigBadge.vue
+++ b/shell/pages/c/_cluster/explorer/ConfigBadge.vue
@@ -24,9 +24,7 @@ export default {
 </script>
 
 <template>
-  <div
-    class="config-badge"
-  >
+  <div class="config-badge">
     <div>
       <button
         class="badge-install btn btn-sm role-secondary"
@@ -34,7 +32,6 @@ export default {
         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>
diff --git a/shell/pages/c/_cluster/uiplugins/CatalogList/CatalogLoadDialog.vue b/shell/pages/c/_cluster/uiplugins/CatalogList/CatalogLoadDialog.vue
index 82782038fac..af06ee39950 100644
--- a/shell/pages/c/_cluster/uiplugins/CatalogList/CatalogLoadDialog.vue
+++ b/shell/pages/c/_cluster/uiplugins/CatalogList/CatalogLoadDialog.vue
@@ -434,6 +434,7 @@ export default {
     name="catalogLoadDialog"
     height="auto"
     :scrollable="true"
+    :trigger-focus-trap="true"
     @close="closeDialog()"
   >
     <Loading
diff --git a/shell/pages/c/_cluster/uiplugins/CatalogList/CatalogUninstallDialog.vue b/shell/pages/c/_cluster/uiplugins/CatalogList/CatalogUninstallDialog.vue
index 04bc0568cc0..6be19464049 100644
--- a/shell/pages/c/_cluster/uiplugins/CatalogList/CatalogUninstallDialog.vue
+++ b/shell/pages/c/_cluster/uiplugins/CatalogList/CatalogUninstallDialog.vue
@@ -121,6 +121,7 @@ export default {
     name="uninstallCatalogDialog"
     height="auto"
     :scrollable="true"
+    :trigger-focus-trap="true"
     @close="closeDialog(false)"
   >
     <div
diff --git a/shell/pages/c/_cluster/uiplugins/CatalogList/index.vue b/shell/pages/c/_cluster/uiplugins/CatalogList/index.vue
index a8206b0bf15..e364179479d 100644
--- a/shell/pages/c/_cluster/uiplugins/CatalogList/index.vue
+++ b/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') }}
diff --git a/shell/pages/c/_cluster/uiplugins/DeveloperInstallDialog.vue b/shell/pages/c/_cluster/uiplugins/DeveloperInstallDialog.vue
index 59ae943c1d4..caee40ec411 100644
--- a/shell/pages/c/_cluster/uiplugins/DeveloperInstallDialog.vue
+++ b/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,7 @@ export default {
     name="developerInstallPluginDialog"
     height="auto"
     :scrollable="true"
+    :trigger-focus-trap="true"
     @close="closeDialog()"
   >
     <div class="plugin-install-dialog">
diff --git a/shell/pages/c/_cluster/uiplugins/InstallDialog.vue b/shell/pages/c/_cluster/uiplugins/InstallDialog.vue
index b171b3e6e3c..595929be234 100644
--- a/shell/pages/c/_cluster/uiplugins/InstallDialog.vue
+++ b/shell/pages/c/_cluster/uiplugins/InstallDialog.vue
@@ -251,6 +251,7 @@ export default {
     name="installPluginDialog"
     height="auto"
     :scrollable="true"
+    :trigger-focus-trap="true"
     @close="closeDialog(false)"
   >
     <div
diff --git a/shell/pages/c/_cluster/uiplugins/PluginInfoPanel.vue b/shell/pages/c/_cluster/uiplugins/PluginInfoPanel.vue
index 9f6598eb97c..f57f085a3d0 100644
--- a/shell/pages/c/_cluster/uiplugins/PluginInfoPanel.vue
+++ b/shell/pages/c/_cluster/uiplugins/PluginInfoPanel.vue
@@ -5,6 +5,7 @@ import { Banner } from '@components/Banner';
 import LazyImage from '@shell/components/LazyImage';
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
+import { useWatcherBasedSetupFocusTrapWithDestroyIncluded } from '@shell/composables/focusTrap';
 
 export default {
   async fetch() {
@@ -22,7 +23,6 @@ export default {
     ChartReadme,
     LazyImage
   },
-
   data() {
     return {
       showSlideIn:      false,
@@ -32,9 +32,12 @@ export default {
       versionError:     undefined,
       defaultIcon:      require('~shell/assets/images/generic-plugin.svg'),
       headerBannerSize: 0,
+      isActive:         false
     };
   },
-
+  created() {
+    useWatcherBasedSetupFocusTrapWithDestroyIncluded(() => this.showSlideIn, '#slide-in-content-element');
+  },
   computed: {
     ...mapGetters({ theme: 'prefs/theme' }),
 
@@ -46,7 +49,20 @@ export default {
       return {};
     },
   },
-
+  watch: {
+    showSlideIn: {
+      handler(neu) {
+        // we register the global event on slidein visibility
+        // so that it doesn't collide with other global events
+        if (neu) {
+          document.addEventListener('keyup', this.handleEscapeKey);
+        } else {
+          document.removeEventListener('keyup', this.handleEscapeKey);
+        }
+      },
+      immediate: true
+    }
+  },
   methods: {
     show(info) {
       this.info = info;
@@ -115,6 +131,22 @@ export default {
 
     handleVersionBtnClass(version) {
       return { 'version-active': version.version === this.infoVersion, disabled: !version.isVersionCompatible };
+    },
+
+    onEnter() {
+      this.isActive = true; // Set active state after the transition
+    },
+
+    onLeave() {
+      this.isActive = false; // Remove active state when fully closed
+    },
+
+    handleEscapeKey(event) {
+      event.stopPropagation();
+
+      if (event.key === 'Escape') {
+        this.hide();
+      }
     }
   }
 };
@@ -130,123 +162,139 @@ export default {
       data-testid="extension-details-bg"
       @click="hide()"
     />
-    <div
-      class="slideIn"
-      data-testid="extension-details"
-      :class="{'hide': false, 'slideIn__show': showSlideIn}"
+    <transition
+      name="slide"
+      @after-enter="onEnter"
+      @after-leave="onLeave"
     >
       <div
-        v-if="info"
-        class="plugin-info-content"
+        v-if="showSlideIn"
+        id="slide-in-content-element"
+        class="slideIn"
+        data-testid="extension-details"
+        :class="{'active': isActive}"
       >
-        <div class="plugin-header">
-          <div
-            class="plugin-icon"
-            :class="applyDarkModeBg"
-          >
-            <LazyImage
-              v-if="info.icon"
-              :initial-src="defaultIcon"
-              :error-src="defaultIcon"
-              :src="info.icon"
-              class="icon plugin-icon-img"
-            />
-            <img
-              v-else
-              :src="defaultIcon"
-              class="icon plugin-icon-img"
-            >
-          </div>
-          <div class="plugin-title">
-            <h2
-              class="slideIn__header"
-              data-testid="extension-details-title"
+        <div
+          v-if="info"
+          class="plugin-info-content"
+        >
+          <div class="plugin-header">
+            <div
+              class="plugin-icon"
+              :class="applyDarkModeBg"
             >
-              {{ info.label }}
-            </h2>
-            <p class="plugin-description">
-              {{ info.description }}
-            </p>
-          </div>
-          <div class="plugin-close">
-            <div class="slideIn__header__buttons">
-              <div
-                class="slideIn__header__button"
-                data-testid="extension-details-close"
-                @click="showSlideIn = false"
+              <LazyImage
+                v-if="info.icon"
+                :initial-src="defaultIcon"
+                :error-src="defaultIcon"
+                :src="info.icon"
+                class="icon plugin-icon-img"
+              />
+              <img
+                v-else
+                :src="defaultIcon"
+                class="icon plugin-icon-img"
               >
-                <i class="icon icon-close" />
+            </div>
+            <div class="plugin-title">
+              <h2
+                class="slideIn__header"
+                data-testid="extension-details-title"
+              >
+                {{ info.label }}
+              </h2>
+              <p class="plugin-description">
+                {{ info.description }}
+              </p>
+            </div>
+            <div class="plugin-close">
+              <div class="slideIn__header__buttons">
+                <div
+                  class="slideIn__header__button"
+                  data-testid="extension-details-close"
+                  role="button"
+                  :aria-label="t('plugins.closePluginPanel')"
+                  tabindex="0"
+                  @click="hide()"
+                  @keyup.enter.space="hide()"
+                >
+                  <i class="icon icon-close" />
+                </div>
               </div>
             </div>
           </div>
-        </div>
-        <div>
-          <Banner
-            v-if="info.builtin"
-            color="warning"
-            :label="t('plugins.descriptions.built-in')"
-            class="mt-10"
-          />
-          <template v-else>
+          <div>
             <Banner
-              v-if="!info.certified"
+              v-if="info.builtin"
               color="warning"
-              :label="t('plugins.descriptions.third-party')"
+              :label="t('plugins.descriptions.built-in')"
               class="mt-10"
             />
-            <Banner
-              v-if="info.experimental"
-              color="warning"
-              :label="t('plugins.descriptions.experimental')"
-              class="mt-10"
-            />
-          </template>
-        </div>
+            <template v-else>
+              <Banner
+                v-if="!info.certified"
+                color="warning"
+                :label="t('plugins.descriptions.third-party')"
+                class="mt-10"
+              />
+              <Banner
+                v-if="info.experimental"
+                color="warning"
+                :label="t('plugins.descriptions.experimental')"
+                class="mt-10"
+              />
+            </template>
+          </div>
 
-        <h3 v-if="info.versions.length">
-          {{ t('plugins.info.versions') }}
-        </h3>
-        <div class="plugin-versions mb-10">
-          <div
-            v-for="v in info.versions"
-            :key="`${v.name}-${v.version}`"
-          >
-            <a
-              v-clean-tooltip="handleVersionBtnTooltip(v)"
-              class="version-link"
-              :class="handleVersionBtnClass(v)"
-              @click="loadPluginVersionInfo(v.version)"
+          <h3 v-if="info.versions.length">
+            {{ t('plugins.info.versions') }}
+          </h3>
+          <div class="plugin-versions mb-10">
+            <div
+              v-for="v in info.versions"
+              :key="`${v.name}-${v.version}`"
             >
-              {{ v.version }}
-            </a>
+              <a
+                v-clean-tooltip="handleVersionBtnTooltip(v)"
+                class="version-link"
+                :class="handleVersionBtnClass(v)"
+                :tabindex="!v.isVersionCompatible ? -1 : 0"
+                role="button"
+                :aria-label="t('plugins.viewVersionDetails', {name: v.name, version: v.version})"
+                @click="loadPluginVersionInfo(v.version)"
+                @keyup.enter.space="loadPluginVersionInfo(v.version)"
+              >
+                {{ v.version }}
+              </a>
+            </div>
           </div>
-        </div>
 
-        <div v-if="versionError">
-          {{ t('plugins.info.versionError') }}
-        </div>
-        <h3 v-if="versionInfo">
-          {{ t('plugins.info.detail') }}
-        </h3>
-        <div
-          v-if="versionInfo"
-          class="plugin-info-detail"
-        >
-          <ChartReadme
-            v-if="versionInfo"
-            :version-info="versionInfo"
-          />
-        </div>
-        <div v-if="!info.versions.length">
-          <h3>
-            {{ t('plugins.info.versions') }}
+          <div v-if="versionError">
+            {{ t('plugins.info.versionError') }}
+          </div>
+          <h3 v-if="versionInfo">
+            {{ t('plugins.info.detail') }}
           </h3>
-          <div class="version-link version-active version-builtin">
-            {{ info.displayVersion }}
+          <div
+            v-if="versionInfo"
+            class="plugin-info-detail"
+          >
+            <ChartReadme
+              v-if="versionInfo"
+              :version-info="versionInfo"
+            />
+          </div>
+          <div v-if="!info.versions.length">
+            <h3>
+              {{ t('plugins.info.versions') }}
+            </h3>
+            <div class="version-link version-active version-builtin">
+              {{ info.displayVersion }}
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </transition>
   </div>
 </template>
 <style lang="scss" scoped>
@@ -284,10 +332,30 @@ export default {
       z-index: 10;
       display: flex;
       flex-direction: column;
-
       padding: 10px;
 
-      transition: right .5s ease;
+      &.active {
+        right: 0;
+      }
+
+      /* Enter animation */
+      &.slide-enter-active {
+        transition: right 0.5s ease; /* Animates both enter and leave */
+      }
+
+      &.slide-leave-active {
+        transition: right 0.5s ease; /* Animates both enter and leave */
+      }
+
+      &.slide-enter-from,
+      &.slide-leave-to {
+        right: -$slideout-width; /* Off-screen position */
+      }
+
+      &.slide-enter-to,
+      &.slide-leave-from {
+        right: 0; /* Fully visible position */
+      }
 
       &__header {
         text-transform: capitalize;
@@ -378,6 +446,10 @@ export default {
         &.version-builtin {
           display: inline-block;
         }
+
+        &:focus-visible {
+          @include focus-outline;
+        }
       }
 
       &__header {
@@ -395,13 +467,20 @@ export default {
           align-items: center;
           justify-content: center;
           padding: 2px;
+
           > i {
             font-size: 20px;
             opacity: 0.5;
           }
+
           &:hover {
             background-color: var(--wm-closer-hover-bg);
           }
+
+          &:focus-visible {
+            @include focus-outline;
+            outline-offset: -2px;
+          }
         }
       }
 
@@ -419,10 +498,6 @@ export default {
           overflow: auto;
         }
       }
-
-      &__show {
-        right: 0;
-      }
     }
   }
 </style>
diff --git a/shell/pages/c/_cluster/uiplugins/SetupUIPlugins.vue b/shell/pages/c/_cluster/uiplugins/SetupUIPlugins.vue
index 359cb364c38..f133ceff51e 100644
--- a/shell/pages/c/_cluster/uiplugins/SetupUIPlugins.vue
+++ b/shell/pages/c/_cluster/uiplugins/SetupUIPlugins.vue
@@ -62,6 +62,8 @@ export default {
               v-if="showFeaturesButton"
               class="btn role-primary enable-plugin-support"
               data-testid="extension-feature-button"
+              role="button"
+              :aria-label="t('plugins.setup.install.featuresButton')"
               @click="redirectToFeatureFlags"
             >
               {{ t('plugins.setup.install.featuresButton') }}
diff --git a/shell/pages/c/_cluster/uiplugins/UninstallDialog.vue b/shell/pages/c/_cluster/uiplugins/UninstallDialog.vue
index f96c0ad9da9..2868ec04e14 100644
--- a/shell/pages/c/_cluster/uiplugins/UninstallDialog.vue
+++ b/shell/pages/c/_cluster/uiplugins/UninstallDialog.vue
@@ -78,6 +78,7 @@ export default {
     name="uninstallPluginDialog"
     height="auto"
     :scrollable="true"
+    :trigger-focus-trap="true"
     @close="closeDialog(false)"
   >
     <div
diff --git a/shell/pages/c/_cluster/uiplugins/index.vue b/shell/pages/c/_cluster/uiplugins/index.vue
index c74b5795dfa..d70f855c99c 100644
--- a/shell/pages/c/_cluster/uiplugins/index.vue
+++ b/shell/pages/c/_cluster/uiplugins/index.vue
@@ -629,6 +629,7 @@ export default {
 <template>
   <div class="plugins">
     <div class="plugin-header">
+      <!-- catalog view header -->
       <template v-if="showCatalogList">
         <div class="catalog-title">
           <h2
@@ -637,6 +638,9 @@ export default {
           >
             <a
               class="link"
+              role="link"
+              tabindex="0"
+              :aria-label="t('plugins.manageCatalog.title')"
               @click="manageExtensionView()"
             >
               {{ t('plugins.manageCatalog.title') }}:
@@ -650,6 +654,7 @@ export default {
           />
         </div>
       </template>
+      <!-- normal extensions view header -->
       <template v-else>
         <h2 data-testid="extensions-page-title">
           <TabTitle breadcrumb="vendor-only">
@@ -658,6 +663,7 @@ export default {
         </h2>
       </template>
       <div class="actions-container">
+        <!-- extensions reload toast/notification -->
         <div
           v-if="reloadRequired"
           class="plugin-reload-banner mr-20"
@@ -670,11 +676,14 @@ export default {
           <button
             class="ml-10 btn btn-sm role-primary"
             data-testid="extension-reload-banner-reload-btn"
+            role="button"
+            :aria-label="t('plugins.labels.reloadRancher')"
             @click="reload()"
           >
             {{ t('generic.reload') }}
           </button>
         </div>
+        <!-- extensions menu -->
         <div v-if="hasFeatureFlag && hasMenuActions">
           <button
             ref="actions"
@@ -682,6 +691,8 @@ export default {
             type="button"
             class="btn role-multi-action actions"
             data-testid="extensions-page-menu"
+            role="button"
+            :aria-label="t('plugins.labels.menu')"
             @click="setMenu"
           >
             <i class="icon icon-actions" />
@@ -702,8 +713,10 @@ export default {
       </div>
     </div>
 
+    <!-- extensions slide-in panel -->
     <PluginInfoPanel ref="infoPanel" />
 
+    <!-- extensions not enabled by feature flag -->
     <div v-if="!hasFeatureFlag">
       <div
         v-if="loading"
@@ -724,6 +737,7 @@ export default {
       />
     </div>
     <div v-else>
+      <!-- Extension Catalog list view -->
       <template v-if="showCatalogList">
         <CatalogList
           @showCatalogLoadDialog="showCatalogLoadDialog"
@@ -741,6 +755,8 @@ export default {
           <button
             class="ml-10 btn btn-sm role-primary"
             data-testid="extensions-new-repos-banner-action-btn"
+            role="button"
+            :aria-label="t('plugins.addRepos.bannerBtn')"
             @click="showAddExtensionReposDialog()"
           >
             {{ t('plugins.addRepos.bannerBtn') }}
@@ -800,14 +816,19 @@ export default {
             :message="emptyMessage"
           />
           <template v-else>
+            <!-- extension card! -->
             <div
               v-for="(plugin, i) in list"
               :key="i"
               class="plugin"
               :data-testid="`extension-card-${plugin.name}`"
+              role="button"
+              tabindex="0"
+              :aria-label="plugin.name || ''"
               @click="showPluginDetail(plugin)"
+              @keyup.enter.space="showPluginDetail(plugin)"
             >
-              <!-- plugin icon -->
+              <!-- extension icon -->
               <div
                 class="plugin-icon"
                 :class="applyDarkModeBg"
@@ -825,13 +846,14 @@ export default {
                   class="icon plugin-icon-img"
                 >
               </div>
-              <!-- plugin card -->
+              <!-- extension card -->
               <div class="plugin-metadata">
-                <!-- plugin basic info -->
+                <!-- extension basic info -->
                 <div class="plugin-name">
                   {{ plugin.label }}
                 </div>
                 <div>{{ plugin.description }}</div>
+                <!-- extension version info and error display -->
                 <div class="plugin-version">
                   <span
                     v-if="plugin.installing"
@@ -858,7 +880,7 @@ export default {
                     >{{ plugin.incompatibilityMessage }}</p>
                   </span>
                 </div>
-                <!-- plugin badges -->
+                <!-- extension badges -->
                 <div
                   v-if="plugin.builtin"
                   class="plugin-badges"
@@ -885,9 +907,9 @@ export default {
                   </div>
                 </div>
                 <div class="plugin-spacer" />
-                <!-- plugin badges -->
+                <!-- extension actions -->
                 <div class="plugin-actions">
-                  <!-- plugin status -->
+                  <!-- extension status -->
                   <div
                     v-if="plugin.helmError"
                     v-clean-tooltip="t('plugins.helmError')"
@@ -910,7 +932,7 @@ export default {
                       {{ t('plugins.labels.uninstalling') }}
                     </div>
                   </div>
-                  <!-- plugin buttons -->
+                  <!-- extension buttons -->
                   <div
                     v-else-if="plugin.installed"
                     class="plugin-buttons"
@@ -919,7 +941,10 @@ export default {
                       v-if="!plugin.builtin"
                       class="btn role-secondary"
                       :data-testid="`extension-card-uninstall-btn-${plugin.name}`"
-                      @click="showUninstallDialog(plugin, $event)"
+                      role="button"
+                      :aria-label="t('plugins.uninstall.label')"
+                      @click.stop="showUninstallDialog(plugin, $event)"
+                      @keyup.space.stop="showUninstallDialog(plugin, $event)"
                     >
                       {{ t('plugins.uninstall.label') }}
                     </button>
@@ -927,7 +952,10 @@ export default {
                       v-if="plugin.upgrade"
                       class="btn role-secondary"
                       :data-testid="`extension-card-update-btn-${plugin.name}`"
-                      @click="showInstallDialog(plugin, 'update', $event)"
+                      role="button"
+                      :aria-label="t('plugins.update.label')"
+                      @click.stop="showInstallDialog(plugin, 'update', $event)"
+                      @keyup.space.stop="showInstallDialog(plugin, 'update', $event)"
                     >
                       {{ t('plugins.update.label') }}
                     </button>
@@ -935,7 +963,10 @@ export default {
                       v-if="!plugin.upgrade && plugin.installableVersions && plugin.installableVersions.length > 1"
                       class="btn role-secondary"
                       :data-testid="`extension-card-rollback-btn-${plugin.name}`"
-                      @click="showInstallDialog(plugin, 'rollback', $event)"
+                      role="button"
+                      :aria-label="t('plugins.rollback.label')"
+                      @click.stop="showInstallDialog(plugin, 'rollback', $event)"
+                      @keyup.space.stop="showInstallDialog(plugin, 'rollback', $event)"
                     >
                       {{ t('plugins.rollback.label') }}
                     </button>
@@ -947,7 +978,10 @@ export default {
                     <button
                       class="btn role-secondary"
                       :data-testid="`extension-card-install-btn-${plugin.name}`"
-                      @click="showInstallDialog(plugin, 'install', $event)"
+                      role="button"
+                      :aria-label="t('plugins.install.label')"
+                      @click.stop="showInstallDialog(plugin, 'install', $event)"
+                      @keyup.space.stop="showInstallDialog(plugin, 'install', $event)"
                     >
                       {{ t('plugins.install.label') }}
                     </button>