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

package/components/Carousel.vue

@@ -43,24 +43,29 @@ export default {
       activeItemId:            0,
       autoScroll:              true,
       autoScrollSlideInterval: null,
+      isTransitionning:        false, // prevents showing empty spaces caused by aggressive clicking
+      shouldDisableTransition: false // smoothes the move from the first/last slides to the previous/next slide
     };
   },
 
   computed: {
     ...mapGetters(['clusterId']),
     trackStyle() {
-      let sliderItem = ( this.activeItemId + 1) * 100 / (this.slider.length + 2);
-      const width = 60 * (this.slider.length + 2);
-
       if (this.slider.length === 1) {
-        sliderItem = 0;
+        return `
+          width: 100%;
+          left: 0%;
+        `;
       }
 
-      return `transform: translateX(-${ sliderItem }%); width: ${ width }%`;
-    },
+      const width = 60 * (this.slider.length + 2);
+      const left = -(40 + this.activeItemId * 60);
 
-    test() {
-      return 'test';
+      return `
+        width: ${ width }%;
+        left: ${ left }%;
+        transition: ${ this.shouldDisableTransition ? 'none' : '700ms ease-in-out' };
+      `;
     }
   },
 
@@ -77,10 +82,14 @@ export default {
     },
 
     nextPrev(direction) {
-      this.autoScroll = false;
-      const slideTrack = document.getElementById('slide-track');
+      if (this.isTransitionning) {
+        return;
+      }
 
-      slideTrack.style.transition = `transform 450ms ease-in-out`;
+      this.isTransitionning = true;
+      this.autoScroll = false;
+      this.shouldDisableTransition = false;
+      const slideTrack = this.$refs.slider;
 
       direction !== 'prev' ? (this.activeItemId++) : (this.activeItemId--);
 
@@ -88,21 +97,27 @@ export default {
     },
 
     slideTransition() {
-      const slideTrack = document.getElementById('slide-track');
       const slidesArray = this.slider.length + 2;
 
       if (this.activeItemId === -1) {
-        slideTrack.style.transition = 'none';
+        this.shouldDisableTransition = true;
         this.activeItemId = this.slider.length - 1;
       }
+
       if (this.activeItemId === slidesArray - 2) {
-        slideTrack.style.transition = 'none';
+        this.shouldDisableTransition = true;
         this.activeItemId = 0;
       }
+
+      this.isTransitionning = false;
     },
 
     autoScrollSlide() {
-      if (this.activeItemId < (this.slider.length + 1) && this.autoScroll ) {
+      if (!this.autoScroll) {
+        return;
+      }
+
+      if (this.activeItemId < (this.slider.length + 1)) {
         this.activeItemId++;
       }
 
@@ -120,23 +135,21 @@ export default {
   },
 
   mounted() {
-    const slideTrack = document.getElementById('slide-track');
+    const slideTrack = this.$refs.slider;
 
-    if (this.slider.length === 1) {
-      slideTrack.style = 'transform:translateX(0%); width:100%; left:0';
-    } else {
-      const node = document.getElementById('slide0');
+    if (this.slider.length > 1) {
+      const firstSlide = this.$refs['slide0']?.[0];
 
-      if (node) {
-        const clone = node.cloneNode(true);
+      if (firstSlide) {
+        const clone = firstSlide.cloneNode(true);
 
         slideTrack.appendChild(clone);
       }
 
-      const nodeLast = document.getElementById(`slide${ this.slider.length - 1 }`);
+      const lastSlide = this.$refs[`slide${ this.slider.length - 1 }`]?.[0];
 
-      if (nodeLast) {
-        const cloneLast = nodeLast.cloneNode(true);
+      if (lastSlide) {
+        const cloneLast = lastSlide.cloneNode(true);
 
         slideTrack.insertBefore(cloneLast, slideTrack.children[0]);
       }
@@ -159,7 +172,7 @@ export default {
 <template>
   <div
     class="slider"
-    :class="{'disable': sliders.length === 1}"
+    :class="{'disabled': sliders.length === 1}"
   >
     <div
       id="slide-track"
@@ -170,8 +183,8 @@ export default {
       <component
         :is="asLink ? 'a' : 'div'"
         v-for="(slide, i) in sliders"
-        :id="`slide` + i"
-        ref="slide"
+        :id="`slide${i}`"
+        :ref="`slide${i}`"
         :key="get(slide, keyField)"
         class="slide"
         :class="{'singleSlide': sliders.length === 1}"
@@ -187,7 +200,7 @@ export default {
           <div class="slide-content-right">
             <BadgeState
               :label="slide.repoName"
-              color="slider-badge mb-20"
+              color="slide-badge mb-20"
             />
             <h1>{{ slide.chartNameDisplay }}</h1>
             <p>{{ slide.chartDescription }}</p>
@@ -196,33 +209,49 @@ export default {
       </component>
     </div>
     <div
+      role="button"
+      class="prev"
+      :aria-label="t('carousel.previous')"
+      :aria-disabled="sliders.length === 1"
+      :class="{'disabled': sliders.length === 1}"
+      tabindex="0"
+      @click="nextPrev('prev')"
+      @keyup.enter.space="nextPrev('prev')"
+    >
+      <i
+        class="icon icon-chevron-left icon-4x"
+      />
+    </div>
+    <div
+      role="button"
+      class="next"
+      :aria-label="t('carousel.next')"
+      :aria-disabled="sliders.length === 1"
+      :class="{'disabled': sliders.length === 1}"
+      tabindex="0"
+      @click="nextPrev('next')"
+      @keyup.enter.space="nextPrev('next')"
+    >
+      <i
+        class="icon icon-chevron-right icon-4x"
+      />
+    </div>
+    <div
+      v-if="sliders.length > 1"
       class="controls"
-      :class="{'disable': sliders.length === 1}"
     >
       <div
         v-for="(slide, i) in slider"
         :key="i"
         class="control-item"
         :class="{'active': activeItemId === i}"
+        role="button"
+        tabindex="0"
+        :aria-label="t('carousel.controlItem', { number: i+1 })"
         @click="scrollSlide(i, slider.length)"
+        @keyup.enter.space="scrollSlide(i, slider.length)"
       />
     </div>
-    <div
-      ref="prev"
-      class="prev"
-      :class="{'disable': sliders.length === 1}"
-      @click="nextPrev('prev')"
-    >
-      <i class="icon icon-chevron-left icon-4x" />
-    </div>
-    <div
-      ref="next"
-      class="next"
-      :class="{'disable': sliders.length === 1}"
-      @click="nextPrev('next')"
-    >
-      <i class="icon icon-chevron-right icon-4x" />
-    </div>
   </div>
 </template>
 
@@ -234,37 +263,21 @@ export default {
   place-items: center;
   overflow: hidden;
   margin-bottom: 30px;
-  // min-width: 700px;
+  height: 245px;
 
-  &.disable::before,
-  &.disable::after {
+  &.disabled::before,
+  &.disabled::after {
     display: none;
   }
-
-  &.disable:hover {
-    .prev,
-    .next {
-      display: none;
-    }
-  }
-
-  &:hover {
-    .prev,
-    .next {
-      display: block;
-    }
-  }
 }
 
 .slide-track {
   display: flex;
-  animation: scrolls 10s ;
-  position: relative;
-  transition: 1s ease-in-out;
-  left: 21%;
+  position: absolute;
+  top: 0;
 }
 
-.slider-badge {
+.slide-badge {
   background: var(--app-partner-accent);
   color: var(--body-bg);
 }
@@ -329,7 +342,7 @@ export default {
 .slider::before {
   left: 0;
   top: 0;
-  &.disable {
+  &.disabled {
     display: none;
   }
 }
@@ -340,15 +353,13 @@ export default {
 }
 
 .controls {
+  position: absolute;
+  bottom: 0;
   width: 100%;
   display: flex;
   justify-content: center;
   margin-top: 10px;
 
-  &.disable {
-    display: none;
-  }
-
   .control-item {
     width: 10px;
     height: 10px;
@@ -367,13 +378,16 @@ export default {
   position: absolute;
   z-index: 20;
   top: 90px;
-  display: none;
   cursor: pointer;
 
   &.disabled .icon {
     color: var(--disabled-bg);
     cursor: not-allowed;
   }
+
+  .icon:focus-visible {
+    @include focus-outline;
+  }
 }
 
 .next {

package/components/CommunityLinks.vue

@@ -7,6 +7,7 @@ import { SETTING } from '@shell/config/settings';
 import { mapGetters } from 'vuex';
 import { isRancherPrime } from '@shell/config/version';
 import { fetchLinks } from '@shell/config/home-links';
+import { processLink } from '@shell/plugins/clean-html';
 
 // i18n-ignore footer.wechat.title, footer.wechat.modalText, footer.wechat.modalText2
 export default {
@@ -77,7 +78,11 @@ export default {
         all.push(...this.links.defaults.filter((link) => link.enabled));
       }
 
-      return all;
+      // Process the links
+      return all.map((item) => ({
+        ...item,
+        value: processLink(item.value)
+      }));
     }
   },
   methods: {

package/components/CopyToClipboardText.vue

@@ -48,9 +48,12 @@ export default {
   <a
     v-if="text"
     class="copy-to-clipboard-text"
+    role="button"
+    :aria-label="t('generic.copyToClipboard')"
     :class="{ 'copied': copied, 'plain': plain}"
     href="#"
     @click="clicked"
+    @keyup.space="clicked"
   >
     {{ text }} <i
       class="icon"

package/components/Dialog.vue

@@ -1,6 +1,6 @@
 <script>
 import AsyncButton from '@shell/components/AsyncButton';
-import AppModal from '@shell/components/AppModal.vue';
+import AppModal, { DEFAULT_ITERABLE_NODE_SELECTOR } from '@shell/components/AppModal.vue';
 
 export default {
   emits: ['okay', 'closed'],
@@ -21,6 +21,22 @@ export default {
     mode: {
       type:    String,
       default: '',
+    },
+
+    /**
+     * forcefully set return focus element based on this selector
+     */
+    returnFocusSelector: {
+      type:    String,
+      default: '',
+    },
+
+    /**
+     * will return focus to the first iterable node of this container select
+     */
+    returnFocusFirstIterableNodeSelector: {
+      type:    String,
+      default: DEFAULT_ITERABLE_NODE_SELECTOR,
     }
   },
 
@@ -60,6 +76,9 @@ export default {
     :name="name"
     height="auto"
     :scrollable="true"
+    :trigger-focus-trap="true"
+    :return-focus-selector="returnFocusSelector"
+    :return-focus-first-iterable-node-selector="returnFocusFirstIterableNodeSelector"
     @close="closeDialog(false)"
     @before-open="beforeOpen"
   >

package/components/GrowlManager.vue

@@ -87,7 +87,10 @@ export default {
     <div class="growl-list">
       <div
         v-for="(growl, idx) in stack"
-        :key="idx"
+        :key="growl.id"
+        role="alert"
+        :aria-labelledby="`growl-title-${ growl.id }`"
+        :aria-describedby="`growl-message-${ growl.id }`"
         :data-testid="`growl-list-item-${idx}`"
         :class="{'growl': true, ['bg-'+growl.color]: true}"
       >
@@ -103,11 +106,15 @@ export default {
               class="close hand icon icon-close"
               @click="close(growl)"
             />
-            <div class="growl-text-title">
+            <div
+              :id="`growl-title-${ growl.id }`"
+              class="growl-text-title"
+            >
               {{ growl.title }}
             </div>
             <p
               v-if="growl.message"
+              :id="`growl-message-${ growl.id }`"
               :class="{ 'has-title': !!growl.title }"
             >
               {{ growl.message }}

package/components/LocaleSelector.vue

@@ -11,6 +11,10 @@ export default {
     mode: {
       type:    String,
       default: ''
+    },
+    showIcon: {
+      type:    Boolean,
+      default: true
     }
   },
 
@@ -89,7 +93,10 @@ export default {
             class="locale-chooser"
           >
             {{ selectedLocaleLabel }}
-            <i class="icon icon-fw icon-sort-down" />
+            <i
+              v-if="showIcon"
+              class="icon icon-fw icon-sort-down"
+            />
           </a>
           <template #popper>
             <ul

package/components/PaginatedResourceTable.vue

@@ -2,13 +2,6 @@
 import { defineComponent } from 'vue';
 import ResourceFetch from '@shell/mixins/resource-fetch';
 import ResourceTable from '@shell/components/ResourceTable.vue';
-import { StorePaginationResult } from '@shell/types/store/pagination.types';
-
-export type FetchSecondaryResourcesOpts = { canPaginate: boolean }
-export type FetchSecondaryResources = (opts: FetchSecondaryResourcesOpts) => Promise<any>
-
-export type FetchPageSecondaryResourcesOpts = { canPaginate: boolean, force: boolean, page: any[], pagResult: StorePaginationResult }
-export type FetchPageSecondaryResources = (opts: FetchPageSecondaryResourcesOpts) => Promise<any>
 
 /**
  * This is meant to enable ResourceList like capabilities outside of List pages / components
@@ -57,6 +50,8 @@ export default defineComponent({
      * Information may be required from resources other than the primary one shown per row
      *
      * This will fetch them ALL and will be run in a non-server-side pagination world
+     *
+     * of type PagTableFetchSecondaryResources
      */
     fetchSecondaryResources: {
       type:    Function,
@@ -69,6 +64,8 @@ export default defineComponent({
      * This will fetch only those relevant to the current page using server-side pagination based filters
      *
      * called from shell/mixins/resource-fetch-api-pagination.js
+     *
+     * of type PagTableFetchPageSecondaryResources
      */
     fetchPageSecondaryResources: {
       type:    Function,

package/components/ProgressBarMulti.vue

@@ -90,6 +90,19 @@ export default {
 
       return out.filter((obj) => obj.percent);
     },
+    ariaLabelText() {
+      if (Array.isArray(this.values) && this.values.length) {
+        let ariaLabel = '';
+
+        this.values.forEach((val) => {
+          ariaLabel += `${ val.value } ${ val.value === 1 ? 'item' : 'items' } ${ val.label }`;
+        });
+
+        return ariaLabel;
+      }
+
+      return '';
+    }
   }
 };
 
@@ -108,6 +121,7 @@ function toPercent(value, min, max) {
   <div
     v-trim-whitespace
     :class="{progress: true, multi: pieces.length > 1}"
+    :aria-label="ariaLabelText"
   >
     <div
       v-for="(piece, idx) of pieces"

package/components/PromptChangePassword.vue

@@ -43,6 +43,7 @@ export default {
     name="password-modal"
     :width="500"
     :height="465"
+    :trigger-focus-trap="true"
     @close="show(false)"
   >
     <Card
@@ -68,6 +69,8 @@ export default {
         <!-- type reset is required by lastpass -->
         <button
           class="btn role-secondary"
+          role="button"
+          :aria-label="t('changePassword.cancel')"
           type="reset"
           @click="show(false)"
         >

package/components/Questions/Reference.vue

@@ -1,7 +1,8 @@
 <script>
 import { LabeledInput } from '@components/Form/LabeledInput';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
-import { filterBy } from '@shell/utils/array';
+import ResourceLabeledSelect from '@shell/components/form/ResourceLabeledSelect.vue';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
+
 import { PVC, STORAGE_CLASS } from '@shell/config/types';
 import Question from './Question';
 
@@ -14,7 +15,7 @@ const LEGACY_MAP = {
 export default {
   emits: ['update:value'],
 
-  components: { LabeledInput, LabeledSelect },
+  components: { LabeledInput, ResourceLabeledSelect },
   mixins:     [Question],
 
   props: {
@@ -29,12 +30,6 @@ export default {
     },
   },
 
-  async fetch() {
-    if ( this.typeSchema ) {
-      this.all = await this.$store.dispatch(`${ this.inStore }/findAll`, { type: this.typeName });
-    }
-  },
-
   data() {
     const t = this.question.type;
 
@@ -57,29 +52,61 @@ export default {
     return {
       typeName,
       typeSchema,
-      all: [],
+      all:                 [],
+      allResourceSettings: {
+        updateResources: (all) => {
+          // Filter to only include required namespaced resources
+          const resources = this.isNamespaced ? all.filter((r) => r.metadata.namespace === this.targetNamespace) : all;
+
+          return this.mapResourcesToOptions(resources);
+        }
+      },
+      paginateResourceSetting: {
+        updateResources: (resources) => {
+          return this.mapResourcesToOptions(resources);
+        },
+        /**
+          * of type PaginateTypeOverridesFn
+          * @param [LabelSelectPaginationFunctionOptions] opts
+          * @returns LabelSelectPaginationFunctionOptions
+         */
+        requestSettings: (opts) => {
+          // Filter to only include required namespaced resources
+          const filters = this.isNamespaced ? [
+            PaginationParamFilter.createSingleField({ field: 'metadata.namespace', value: this.targetNamespace }),
+          ] : [];
+
+          return {
+            ...opts,
+            filters,
+            groupByNamespace: false,
+            classify:         true,
+          };
+        }
+      },
     };
   },
 
+  methods: {
+    mapResourcesToOptions(resources) {
+      return resources.map((r) => {
+        if (r.id) {
+          return {
+            label: r.nameDisplay || r.metadata.name,
+            value: r.metadata.name
+          };
+        } else {
+          return r;
+        }
+      });
+    },
+
+  },
+
   computed: {
     isNamespaced() {
       return !!this.typeSchema?.attributes?.namespaced;
     },
-
-    options() {
-      let out = this.all;
-
-      if ( this.isNamespaced ) {
-        out = filterBy(this.all, 'metadata.namespace', this.targetNamespace);
-      }
-
-      return out.map((x) => {
-        return {
-          label: x.nameDisplay || x.metadata.name,
-          value: x.metadata.name
-        };
-      });
-    }
   },
 };
 </script>
@@ -90,15 +117,17 @@ export default {
     class="row"
   >
     <div class="col span-6">
-      <LabeledSelect
-        :mode="mode"
-        :options="options"
+      <ResourceLabeledSelect
+        :resource-type="typeName"
+        :in-store="inStore"
         :disabled="$fetchState.pending || disabled"
         :label="displayLabel"
         :placeholder="question.description"
         :required="question.required"
         :value="value"
         :tooltip="displayTooltip"
+        :paginated-resource-settings="paginateResourceSetting"
+        :all-resources-settings="allResourceSettings"
         @update:value="!$fetchState.pending && $emit('update:value', $event)"
       />
     </div>

package/components/ResourceDetail/Masthead.vue

@@ -609,7 +609,7 @@ export default {
       .masthead-resource-title {
         padding: 0 8px;
         text-overflow: ellipsis;
-        overflow-x: hidden;
+        overflow: hidden;
         white-space: nowrap;
       }
 

package/components/SelectIconGrid.vue

@@ -104,6 +104,10 @@ export default {
       :is="asLink ? 'a' : 'div'"
       v-for="(r, idx) in rows"
       :key="get(r, keyField)"
+      :role="asLink ? 'link' : null"
+      :aria-disabled="asLink && get(r, disabledField) === true ? true : null"
+      :aria-label="get(r, nameField)"
+      :tabindex="get(r, disabledField) === true ? -1 : 0"
       :href="asLink ? get(r, linkField) : null"
       :target="get(r, targetField)"
       :rel="rel"
@@ -111,9 +115,12 @@ export default {
       :data-testid="componentTestid + '-' + get(r, nameField)"
       :class="{
         'has-description': !!get(r, descriptionField),
-        'has-side-label': !!get(r, sideLabelField), [colorFor(r, idx)]: true, disabled: get(r, disabledField) === true
+        'has-side-label': !!get(r, sideLabelField),
+        [colorFor(r, idx)]: true,
+        disabled: get(r, disabledField) === true
       }"
       @click="select(r, idx)"
+      @keyup.enter.space="select(r, idx)"
     >
       <div
         class="side-label"
@@ -212,6 +219,10 @@ export default {
       text-decoration: none !important;
       color: $color;
 
+      &:focus-visible {
+        @include focus-outline;
+      }
+
       &:hover:not(.disabled) {
         box-shadow: 0 0 30px var(--shadow);
         transition: box-shadow 0.1s ease-in-out;