@rancher/shell 3.0.2-rc.5 → 3.0.2

package/components/ActionMenuShell.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import { useRoute } from 'vue-router';
+
+import { isAlternate } from '@shell/utils/platform';
+import { RcDropdownMenu } from '@components/RcDropdown';
+import { ButtonRoleProps, ButtonSizeProps } from '@components/RcButton/types';
+import { DropdownOption } from '@components/RcDropdown/types';
+
+const store = useStore();
+
+type RcDropdownMenuComponentProps = {
+  buttonRole?: keyof ButtonRoleProps;
+  buttonSize?: keyof ButtonSizeProps;
+  buttonAriaLabel?: string;
+  dropdownAriaLabel?: string;
+  dataTestid?: string;
+  resource: Object;
+  customActions?: DropdownOption[];
+}
+
+const props = defineProps <RcDropdownMenuComponentProps>();
+
+const openChanged = (event: boolean) => {
+  if (event) {
+    store.dispatch('action-menu/setResource', props.resource);
+  }
+};
+
+const emit = defineEmits<{(event: string, payload: any): void}>();
+const route = useRoute();
+
+const execute = (action: any, event: MouseEvent, args?: any) => {
+  if (action.disabled) {
+    return;
+  }
+
+  // this will come from extensions...
+  if (action.invoke) {
+    const fn = action.invoke;
+
+    if (fn && action.enabled) {
+      const resources = store.getters['action-menu/resources'];
+      const opts = {
+        event,
+        action,
+        isAlt: isAlternate(event)
+      };
+
+      if (resources.length === 1) {
+        fn.apply(this, [opts, resources]);
+      }
+    }
+  } else if (props.customActions) {
+    // If the state of this component is controlled
+    // by props instead of Vuex, we assume you wouldn't want
+    // the mutation to have a dependency on Vuex either.
+    // So in that case we use events to execute actions instead.
+    // If an action list item is clicked, this
+    // component emits that event, then we assume the parent
+    // component will execute the action.
+    emit(
+      action.action,
+      {
+        action,
+        event,
+        ...args,
+        route,
+      }
+    );
+  } else {
+    // If the state of this component is controlled
+    // by Vuex, mutate the store when an action is clicked.
+    const opts = { alt: isAlternate(event) };
+
+    store.dispatch('action-menu/execute', {
+      action, args, opts
+    });
+  }
+};
+
+const options = computed(() => store.getters['action-menu/optionsArray']);
+
+const menuOptions = () => {
+  if (props.customActions && props.customActions.length > 0) {
+    return props.customActions;
+  }
+
+  return options.value;
+};
+</script>
+
+<template>
+  <rc-dropdown-menu
+    :button-role="buttonRole || 'link'"
+    :button-size="buttonSize || 'small'"
+    :button-aria-label="buttonAriaLabel"
+    :dropdown-aria-label="dropdownAriaLabel"
+    :options="menuOptions()"
+    :data-testid="dataTestid"
+    @update:open="openChanged"
+    @select="(e: MouseEvent, option: object) => execute(option, e)"
+  />
+</template>

package/components/AppModal.vue

@@ -107,7 +107,7 @@ export default defineComponent({
         width: this.modalWidth,
         ...this.stylesPropToObj,
       };
-    }
+    },
   },
   setup(props) {
     if (props.triggerFocusTrap) {
@@ -208,7 +208,7 @@ export default defineComponent({
     display: flex;
     justify-content: center;
     align-items: center;
-    z-index: 20;
+    z-index: z-index('modalOverlay');
 
     .modal-container {
       background-color: var(--modal-bg);

package/components/AsyncButton.vue

@@ -279,10 +279,12 @@ export default defineComponent({
 <template>
   <button
     ref="btn"
+    role="button"
     :class="classes"
     :name="name"
     :type="type"
     :disabled="isDisabled"
+    :aria-disabled="isDisabled"
     :tab-index="tabIndex"
     :data-testid="componentTestid + '-async-button'"
     @click="clicked"

package/components/ButtonGroup.vue

@@ -70,6 +70,13 @@ export default {
       const label = opt.labelKey ? this.t(opt.labelKey) : opt.label;
 
       return tooltip || label || '';
+    },
+    actionAriaLabel(opt) {
+      const ariaLabel = opt.ariaLabel;
+      const label = opt.labelKey ? this.t(opt.labelKey) : opt.label;
+      const tooltip = opt.tooltipKey ? this.t(opt.tooltipKey) : opt.tooltip;
+
+      return ariaLabel || tooltip || label || undefined;
     }
   }
 };
@@ -89,7 +96,7 @@ export default {
       :class="opt.class"
       :disabled="disabled || opt.disabled"
       role="button"
-      :aria-label="actionDescription(opt)"
+      :aria-label="actionAriaLabel(opt)"
       @click="change(opt.value)"
     >
       <slot
@@ -100,7 +107,7 @@ export default {
         <i
           v-if="opt.icon"
           :class="{icon: true, [opt.icon]: true, [`icon-${iconSize}`]: !!iconSize }"
-          :alt="actionDescription(opt)"
+          :alt="actionAriaLabel(opt)"
         />
         <t
           v-if="opt.labelKey"

package/components/ClusterBadge.vue

@@ -23,6 +23,7 @@ export default {
     :style="{ backgroundColor: cluster.badge.color, color: cluster.badge.textColor }"
     class="cluster-badge"
     :class="{'cluster-badge-border': showBorders}"
+    :aria-label="t('clusterBadge.clusterComment', { text: cluster.badge?.text || '' })"
   >
     {{ cluster.badge.text }}
   </div>

package/components/ClusterIconMenu.vue

@@ -76,6 +76,7 @@ export default {
         style="enable-background:new 0 0 100 100;"
         xml:space="preserve"
       >
+        <title>{{ t('nav.ariaLabel.localClusterIcon') }}</title>
         <g>
           <g>
             <path
@@ -106,10 +107,12 @@ export default {
     <i
       v-if="!routeCombo && cluster.pinned"
       class="icon icon-pin cluster-pin-icon"
+      :alt="t('nav.ariaLabel.pinCluster', { cluster: cluster.nameDisplay })"
     />
     <i
       v-else-if="routeCombo"
       class="icon icon-keyboard_tab key-combo-icon"
+      :alt="t('nav.ariaLabel.clusterIconKeyCombo')"
     />
   </div>
 </template>

package/components/ClusterProviderIcon.vue

@@ -37,7 +37,19 @@ export default {
       {{ cluster.badge.iconText }}
     </div>
     <!-- eslint-disable -->
-    <svg v-else-if="cluster.isLocal && !cluster.isHarvester" class="cluster-local-logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+    <svg 
+      v-else-if="cluster.isLocal && !cluster.isHarvester" 
+      class="cluster-local-logo" 
+      version="1.1" 
+      id="Layer_1" 
+      xmlns="http://www.w3.org/2000/svg" 
+      xmlns:xlink="http://www.w3.org/1999/xlink" 
+      x="0px" 
+      y="0px" 
+      viewBox="0 0 100 100" 
+      style="enable-background:new 0 0 100 100;" 
+      xml:space="preserve">
+      <title>{{ t('nav.ariaLabel.clusterProvIcon', { cluster: 'local' }) }}</title>
       <g>
         <g>
           <path class="rancher-icon-fill" d="M26.0862026,44.4953918H8.6165142c-5.5818157,0-9.3979139-4.6252708-8.4802637-10.1311035l2.858391-17.210701
@@ -60,6 +72,7 @@ export default {
       v-else-if="cluster.providerNavLogo"
       class="cluster-os-logo"
       :src="cluster.providerNavLogo"
+      :alt="t('nav.ariaLabel.clusterProvIcon', { cluster: cluster.nameDisplay })"
     >
   </div>
 </template>

package/components/CodeMirror.vue

@@ -36,10 +36,13 @@ export default {
 
   data() {
     return {
-      codeMirrorRef:   null,
-      loaded:          false,
-      removeKeyMapBox: false,
-      hasLintErrors:   false,
+      codeMirrorRef:          null,
+      loaded:                 false,
+      removeKeyMapBox:        false,
+      hasLintErrors:          false,
+      currFocusedElem:        undefined,
+      isCodeMirrorFocused:    false,
+      codeMirrorContainerRef: undefined
     };
   },
 
@@ -83,6 +86,10 @@ export default {
         out.lint = { onUpdateLinting: this.handleLintErrors };
       }
 
+      // fixes https://github.com/rancher/dashboard/issues/13653
+      // we can't use the inert HTML prop on the parent because it disables all interaction
+      out.readOnly = this.isDisabled ? 'nocursor' : false;
+
       return out;
     },
 
@@ -98,6 +105,14 @@ export default {
 
     isNonDefaultKeyMap() {
       return this.combinedOptions?.keyMap !== 'sublime';
+    },
+
+    isCodeMirrorContainerFocused() {
+      return this.currFocusedElem === this.codeMirrorContainerRef;
+    },
+
+    codeMirrorContainerTabIndex() {
+      return this.isCodeMirrorFocused ? 0 : -1;
     }
   },
 
@@ -111,13 +126,64 @@ export default {
     }
   },
 
+  async mounted() {
+    const el = this.$refs.codeMirrorContainer;
+
+    el.addEventListener('keydown', this.handleKeyPress);
+    this.codeMirrorContainerRef = this.$refs.codeMirrorContainer;
+  },
+
+  beforeUnmount() {
+    const el = this.$refs.codeMirrorContainer;
+
+    el.removeEventListener('keydown', this.handleKeyPress);
+  },
+
   watch: {
     hasLintErrors(neu) {
       this.$emit('validationChanged', !neu);
+    },
+
+    isCodeMirrorContainerFocused: {
+      handler(neu) {
+        const codeMirrorEl = this.codeMirrorRef?.getInputField();
+
+        if (codeMirrorEl) {
+          codeMirrorEl.tabIndex = neu ? -1 : 0;
+        }
+      },
+      immediate: true
     }
   },
 
   methods: {
+    focusChanged(ev, isBlurred = false) {
+      if (isBlurred) {
+        this.currFocusedElem = undefined;
+      } else {
+        this.currFocusedElem = ev.target;
+      }
+    },
+
+    handleKeyPress(ev) {
+      // allows pressing escape in the editor, useful for modal editing with vim
+      if (this.isCodeMirrorFocused && ev.code === 'Escape') {
+        ev.preventDefault();
+        ev.stopPropagation();
+      }
+
+      // make focus leave the editor for it's parent container so that we can tab
+      const didPressEscapeSequence = ev.shiftKey && ev.code === 'Escape';
+
+      if (this.isCodeMirrorFocused && didPressEscapeSequence) {
+        this.$refs?.codeMirrorContainer?.focus();
+      }
+
+      // if parent container is focused and we press a trigger, focus goes to the editor inside
+      if (this.isCodeMirrorContainerFocused && (ev.code === 'Enter' || ev.code === 'Space')) {
+        this.codeMirrorRef.focus();
+      }
+    },
     /**
      * Codemirror yaml linting uses js-yaml parse
      * it does not distinguish between warnings and errors so we will treat all yaml lint messages as errors
@@ -161,10 +227,12 @@ export default {
     },
 
     onFocus() {
+      this.isCodeMirrorFocused = true;
       this.$emit('onFocus', true);
     },
 
     onBlur() {
+      this.isCodeMirrorFocused = false;
       this.$emit('onFocus', false);
     },
 
@@ -183,8 +251,12 @@ export default {
 
 <template>
   <div
-    class="code-mirror"
+    ref="codeMirrorContainer"
+    :tabindex="codeMirrorContainerTabIndex"
+    class="code-mirror code-mirror-container"
     :class="{['as-text-area']: asTextArea}"
+    @focusin="focusChanged"
+    @blur="focusChanged($event, true)"
   >
     <div v-if="loaded">
       <div
@@ -204,6 +276,7 @@ export default {
         </div>
       </div>
       <Codemirror
+        id="code-mirror-el"
         ref="codeMirrorRef"
         :value="value"
         :options="combinedOptions"
@@ -215,6 +288,12 @@ export default {
         @focus="onFocus"
         @blur="onBlur"
       />
+      <span
+        v-show="isCodeMirrorFocused"
+        class="escape-text"
+        role="alert"
+        :aria-describedby="t('wm.containerShell.escapeText')"
+      >{{ t('codeMirror.escapeText') }}</span>
     </div>
     <div v-else>
       Loading...
@@ -226,6 +305,10 @@ export default {
   $code-mirror-animation-time: 0.1s;
 
   .code-mirror {
+    &.code-mirror-container:focus-visible {
+      @include focus-outline;
+    }
+
     &.as-text-area .codemirror-container{
       min-height: 40px;
       position: relative;
@@ -321,6 +404,14 @@ export default {
 
   .code-mirror {
     position: relative;
+    margin-bottom: 20px;
+
+    .escape-text {
+      font-size: 12px;
+      position: absolute;
+      bottom: -20px;
+      left: 0;
+    }
 
     .codemirror-container {
       z-index: 0;

package/components/Collapse.vue

@@ -13,7 +13,12 @@ export default {
     title: {
       type:    String,
       default: ''
-    }
+    },
+
+    isDisabled: {
+      type:    Boolean,
+      default: false
+    },
   },
 
   methods: {
@@ -25,10 +30,15 @@ export default {
 </script>
 
 <template>
-  <div class="collapse">
+  <div
+    class="collapse"
+    :class="{ 'disabled': isDisabled }"
+  >
     <slot name="title">
       <div
         class="advanced text-link"
+        :class="{ 'disabled': isDisabled }"
+        :disabled="isDisabled"
         data-testid="collapse-div"
         @click="showAdvanced"
       >
@@ -59,11 +69,14 @@ export default {
 <style lang="scss" scoped>
 .advanced {
   user-select: none;
-  padding: 0 5px;
   cursor: pointer;
   line-height: 40px;
   font-size: 15px;
   font-weight: 500;
+
+  .disabled {
+    cursor: not-allowed;
+  }
 }
 .content {
   background: var(--nav-active);

package/components/CruResource.vue

@@ -490,7 +490,12 @@ export default {
             class="subtype-banner"
             :class="{ selected: subtype.id === _selectedSubtype }"
             :data-testid="`subtype-banner-item-${subtype.id}`"
+            tabindex="0"
+            :aria-disabled="false"
+            :aria-label="subtype.description ? `${subtype.label} - ${subtype.description}` : subtype.label"
+            role="link"
             @click="selectType(subtype.id, $event)"
+            @keyup.enter.space="selectType(subtype.id, $event)"
           >
             <slot name="subtype-content">
               <div class="subtype-container">
@@ -825,6 +830,10 @@ export default {
     .round-image {
       background-color: var(--primary);
     }
+
+    &:focus-visible {
+      @include focus-outline;
+    }
   }
 }
 

package/components/CruResourceFooter.vue

@@ -117,7 +117,7 @@ export default {
   display: flex;
   justify-content: flex-end;
   margin-top: 20px;
-  z-index: 40;
+  z-index: z-index('cruFooter');
 
   .btn {
     margin-left: 20px;

package/components/ExplorerMembers.vue

@@ -355,7 +355,8 @@ export default {
                 <button
                   v-if="canEditProjectMembers"
                   type="button"
-                  class="create-namespace btn btn-sm role-secondary mr-10 right"
+                  class="btn btn-sm role-secondary mr-10 right"
+                  :data-testid="`add-project-member-${getProjectLabel(group).replace(' ', '').toLowerCase()}`"
                   @click="addProjectMember(group)"
                 >
                   {{ t('members.createActionLabel') }}

package/components/FixedBanner.vue

@@ -37,7 +37,7 @@ export default {
     handleLineBreaksConsentText(banner) {
       if (banner.text?.length) {
         // split text by newline char
-        const textArray = banner.text.split(/\\n/).filter((element) => element);
+        const textArray = banner.text.split('\n').filter((element) => element);
 
         if (textArray.length > 1) {
           textArray.forEach((str, i) => {
@@ -130,11 +130,11 @@ export default {
 
             if (isEmpty(banner)) {
               if (showHeader && this.header) {
-                bannerContent = bannerHeader || {};
+                bannerContent = this.handleLineBreaksConsentText(bannerHeader) || {};
               } else if (showConsent && this.consent) {
                 bannerContent = this.handleLineBreaksConsentText(bannerConsent) || {};
               } else if (showFooter && this.footer) {
-                bannerContent = bannerFooter || {};
+                bannerContent = this.handleLineBreaksConsentText(bannerFooter) || {};
               } else {
                 bannerContent = {};
               }
@@ -168,16 +168,20 @@ export default {
     >
       <!-- text as array to support line breaks programmatically rather than just exposing HTML -->
       <div v-if="isTextAnArray">
-        <p
+        <div
           v-for="(text, index) in banner.text"
           :key="index"
+          class="array-row"
         >
           {{ text }}
-        </p>
+        </div>
       </div>
-      <p v-else>
+      <div
+        v-else
+        class="single-row"
+      >
         {{ banner.text }}
-      </p>
+      </div>
     </div>
     <div v-else-if="showDialog">
       <div class="banner-dialog-glass" />
@@ -192,16 +196,20 @@ export default {
           >
             <!-- text as array to support line breaks programmatically rather than just exposing HTML -->
             <div v-if="isTextAnArray">
-              <p
+              <div
                 v-for="(text, index) in banner.text"
                 :key="index"
+                class="array-row"
               >
                 {{ text }}
-              </p>
+              </div>
             </div>
-            <p v-else>
+            <div
+              v-else
+              class="single-row"
+            >
               {{ banner.text }}
-            </p>
+            </div>
           </div>
           <button
             class="btn role-primary"
@@ -223,7 +231,6 @@ export default {
     padding: 0 20px;
 
     &.banner-consent {
-      position: absolute;
       height: unset;
       min-height: 2em;
       overflow: hidden;

package/components/Import.vue

@@ -14,7 +14,7 @@ import { NAMESPACE } from '@shell/config/types';
 import { NAME as NAME_COL, TYPE, NAMESPACE as NAMESPACE_COL, AGE } from '@shell/config/table-headers';
 
 export default {
-  emits: ['close'],
+  emits: ['close', 'onReadyYamlEditor'],
 
   components: {
     AsyncButton,
@@ -111,6 +111,10 @@ export default {
         this.close();
       }
     },
+
+    onReadyYamlEditor(arg) {
+      this.$emit('onReadyYamlEditor', arg);
+    }
   },
 };
 </script>
@@ -121,6 +125,7 @@ export default {
     v-else
     :show-highlight-border="false"
     data-testid="import-yaml"
+    :trigger-focus-trap="true"
   >
     <template #title>
       <div style="display: block; width: 100%;">
@@ -134,6 +139,8 @@ export default {
           <div class="row">
             <div class="col span-6">
               <FileSelector
+                role="button"
+                :aria-label="t('generic.readFromFileArea', { area: t('import.title') })"
                 class="btn role-secondary pull-left"
                 :label="t('generic.readFromFile')"
                 @selected="onFileSelected"
@@ -174,6 +181,7 @@ export default {
         ref="yamleditor"
         v-model:value="currentYaml"
         class="yaml-editor"
+        @onReady="onReadyYamlEditor"
       />
       <Banner
         v-for="(err, i) in errors"
@@ -189,6 +197,8 @@ export default {
         style="width: 100%"
       >
         <button
+          :aria-label="t('generic.close')"
+          role="button"
           type="button"
           class="btn role-primary"
           data-testid="import-yaml-close"
@@ -203,6 +213,8 @@ export default {
         style="width: 100%"
       >
         <button
+          :aria-label="t('generic.cancel')"
+          role="button"
           type="button"
           class="btn role-secondary mr-10"
           data-testid="import-yaml-cancel"
@@ -215,6 +227,7 @@ export default {
           mode="import"
           :disabled="!currentYaml.length"
           data-testid="import-yaml-import-action"
+          :aria-label="t('import.title')"
           @click="importYaml"
         />
       </div>

package/components/LandingPagePreference.vue

@@ -94,7 +94,7 @@ export default {
       if (neu) {
         this.afterLoginRoute = neu;
       } else {
-        this.afterLoginRoute = this.routeFromDropdown?.value;
+        this.afterLoginRoute = this.routeFromDropdown?.value || this.routeDropdownOptions[0]?.value;
       }
     },
   }
@@ -120,10 +120,12 @@ export default {
             :val="false"
             :value="afterLoginRoute=== 'home' || afterLoginRoute === 'last-visited'"
             :v-bind="$attrs"
-            @update:value="afterLoginRoute = false"
+            :prevent-focus-on-radio-groups="true"
+            @update:value="updateLoginRoute(null)"
           />
           <Select
             v-model:value="routeFromDropdown"
+            :aria-label="t('landing.landingPrefs.ariaLabelTakeMeToCluster')"
             :searchable="true"
             :disabled="afterLoginRoute === 'home' || afterLoginRoute === 'last-visited'"
             :clearable="false"