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

package/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>

package/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') }}

package/pages/c/_cluster/uiplugins/UninstallDialog.vue

@@ -20,7 +20,12 @@ export default {
     };
   },
 
-  computed: { ...mapGetters({ allCharts: 'catalog/charts' }) },
+  computed: {
+    ...mapGetters({ allCharts: 'catalog/charts' }),
+    returnFocusSelector() {
+      return `[data-testid="extension-card-uninstall-btn-${ this.plugin?.name }"]`;
+    }
+  },
 
   methods: {
     showDialog(plugin) {
@@ -78,6 +83,9 @@ export default {
     name="uninstallPluginDialog"
     height="auto"
     :scrollable="true"
+    :trigger-focus-trap="true"
+    :return-focus-selector="returnFocusSelector"
+    :return-focus-first-iterable-node-selector="'#extensions-main-page'"
     @close="closeDialog(false)"
   >
     <div

package/pages/c/_cluster/uiplugins/index.vue

@@ -627,8 +627,12 @@ export default {
 </script>
 
 <template>
-  <div class="plugins">
+  <div
+    id="extensions-main-page"
+    class="plugins"
+  >
     <div class="plugin-header">
+      <!-- catalog view header -->
       <template v-if="showCatalogList">
         <div class="catalog-title">
           <h2
@@ -637,6 +641,9 @@ export default {
           >
             <a
               class="link"
+              role="link"
+              tabindex="0"
+              :aria-label="t('plugins.manageCatalog.title')"
               @click="manageExtensionView()"
             >
               {{ t('plugins.manageCatalog.title') }}:
@@ -650,6 +657,7 @@ export default {
           />
         </div>
       </template>
+      <!-- normal extensions view header -->
       <template v-else>
         <h2 data-testid="extensions-page-title">
           <TabTitle breadcrumb="vendor-only">
@@ -658,6 +666,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 +679,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 +694,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 +716,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 +740,7 @@ export default {
       />
     </div>
     <div v-else>
+      <!-- Extension Catalog list view -->
       <template v-if="showCatalogList">
         <CatalogList
           @showCatalogLoadDialog="showCatalogLoadDialog"
@@ -741,6 +758,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 +819,20 @@ export default {
             :message="emptyMessage"
           />
           <template v-else>
+            <!-- extension card! -->
             <div
               v-for="(plugin, i) in list"
+              :id="`list-item-${i}`"
               :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 +850,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 +884,7 @@ export default {
                     >{{ plugin.incompatibilityMessage }}</p>
                   </span>
                 </div>
-                <!-- plugin badges -->
+                <!-- extension badges -->
                 <div
                   v-if="plugin.builtin"
                   class="plugin-badges"
@@ -885,9 +911,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 +936,7 @@ export default {
                       {{ t('plugins.labels.uninstalling') }}
                     </div>
                   </div>
-                  <!-- plugin buttons -->
+                  <!-- extension buttons -->
                   <div
                     v-else-if="plugin.installed"
                     class="plugin-buttons"
@@ -919,7 +945,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 +956,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 +967,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 +982,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>

package/rancher-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"

package/rancher-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"