@rancher/shell 3.0.4 → 3.0.5-rc.1

package/components/form/__tests__/Select.test.ts

@@ -27,4 +27,41 @@ describe('select.vue', () => {
     // eslint-disable-next-line no-console
     expect(console.warn).not.toHaveBeenCalled();
   });
+
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', async() => {
+    const label = 'Foo';
+    const value = 'foo';
+    const ariaDescribedById = 'some-described-by-id';
+    const ariaLabelText = 'some-aria-label';
+
+    const wrapper = shallowMount(SelectComponent, {
+      props: {
+        value,
+        options: [
+          { label, value },
+        ],
+      },
+      attrs: {
+        'aria-describedby': ariaDescribedById,
+        'aria-label':       ariaLabelText,
+      }
+    });
+
+    const labeledSelectContainer = wrapper.find('.unlabeled-select');
+    const ariaExpanded = labeledSelectContainer.attributes('aria-expanded');
+    const ariaDescribedBy = labeledSelectContainer.attributes('aria-describedby');
+    const ariaLabel = labeledSelectContainer.attributes('aria-label');
+
+    const vSelectInput = wrapper.find('.inline');
+
+    expect(ariaExpanded).toBe('false');
+    expect(ariaDescribedBy).toBe(ariaDescribedById);
+    expect(ariaLabel).toBe(ariaLabelText);
+
+    // make sure it's hardcoded to a "neutral" value so that
+    // in the current architecture of the component
+    // screen readers won't pick up the default "Select option" aria-label
+    // from the library
+    expect(vSelectInput.attributes('aria-label')).toBe('-');
+  });
 });

package/components/formatter/InternalExternalIP.vue

@@ -28,6 +28,7 @@ export default {
   <span>
     <template v-if="isIp(row.externalIp)">
       {{ row.externalIp }} <CopyToClipboard
+        :aria-label="t('internalExternalIP.copyExternalIp')"
         label-as="tooltip"
         :text="row.externalIp"
         class="icon-btn"
@@ -43,6 +44,7 @@ export default {
     </template>
     <template v-else-if="isIp(row.internalIp)">
       {{ row.internalIp }}<CopyToClipboard
+        :aria-label="t('internalExternalIP.copyInternalIp')"
         label-as="tooltip"
         :text="row.internalIp"
         class="icon-btn"

package/components/formatter/SecretData.vue

@@ -13,17 +13,25 @@ export default {
     },
   },
 
-  data() {
+  beforeMount() {
     if (this.value.issuer) {
       const { cn, notAfter, sans = [] } = this.value;
 
-      return {
-        cn, expiration: notAfter, sans, isTLS: true
-      };
-    } else {
-      return { isTLS: false };
+      this.expiration = notAfter;
+      this.sans = sans;
+      this.cn = cn;
+      this.isTLS = true;
     }
   },
+
+  data() {
+    return {
+      isTLS:      false,
+      cn:         null,
+      sans:       [],
+      expiration: null,
+    };
+  },
   computed: {
     // use 'text-warning' or 'text-error' classes if the cert is <8 days from expiring or expired respectively
     dateClass() {
@@ -43,7 +51,12 @@ export default {
 
 <template>
   <div v-if="isTLS">
-    <t k="secret.certificate.cn" /> {{ cn }} <span v-if="row.unrepeatedSans && row.unrepeatedSans.length">{{ t('secret.certificate.plusMore', {n:row.unrepeatedSans.length}) }}</span><br>
+    <t k="secret.certificate.cn" />
+    {{ cn }}
+    <span v-if="row.unrepeatedSans && row.unrepeatedSans.length">
+      {{ t('secret.certificate.plusMore', {n:row.unrepeatedSans.length}) }}
+    </span>
+    <br>
     <t k="secret.certificate.expires" />: <DateComponent
       :class="dateClass"
       :value="expiration"

package/components/nav/Group.vue

@@ -158,6 +158,17 @@ export default {
         items = this.group;
       }
 
+      let parentPath = '';
+      const cluster = this.$route.params?.cluster;
+
+      // Where we use nested route configuration, consider the parent route when trying to identify the nav location
+      if (this.$route.matched.length > 1) {
+        const parentRoute = this.$route.matched[this.$route.matched.length - 2];
+
+        parentPath = parentRoute.path.replace(':cluster', cluster);
+        parentPath = parentPath === '/' ? undefined : parentPath;
+      }
+
       for (const item of items.children) {
         if (item.children && this.hasActiveRoute(item)) {
           return true;
@@ -166,8 +177,11 @@ export default {
           const matchesNavLevel = navLevels.filter((param) => !this.$route.params[param] || this.$route.params[param] !== item.route.params[param]).length === 0;
           const withoutHash = this.$route.hash ? this.$route.fullPath.slice(0, this.$route.fullPath.indexOf(this.$route.hash)) : this.$route.fullPath;
           const withoutQuery = withoutHash.split('?')[0];
+          const itemFullPath = this.$router.resolve(item.route).fullPath;
 
-          if (matchesNavLevel || this.$router.resolve(item.route).fullPath === withoutQuery) {
+          if (matchesNavLevel || itemFullPath === withoutQuery) {
+            return true;
+          } else if (parentPath && itemFullPath === parentPath) {
             return true;
           }
         }

package/components/nav/Header.vue

@@ -702,6 +702,7 @@ export default {
               :class="{'avatar-round': principal.roundAvatar}"
               width="36"
               height="36"
+              :alt="t('nav.alt.userAvatar')"
             >
             <i
               v-else

package/components/nav/Type.vue

@@ -58,7 +58,18 @@ export default {
 
     isActive() {
       const typeFullPath = this.$router.resolve(this.type.route)?.fullPath.toLowerCase();
-      const pageFullPath = this.$route.fullPath?.toLowerCase();
+      const pageFullPath = this.$route.fullPath?.toLowerCase().split('#')[0]; // Ignore the shebang when comparing routes
+      const routeMetaNav = this.$route.meta?.nav;
+
+      // If the route explicitly declares the nav path that should be highlighted, then use that
+      if (routeMetaNav) {
+        const cluster = this.$route.params?.cluster;
+        const navPath = routeMetaNav.replace(':cluster', cluster);
+
+        if (navPath === typeFullPath) {
+          return true;
+        }
+      }
 
       if ( !this.type.exact) {
         const typeSplit = typeFullPath.split('/');

package/components/templates/blank.vue

@@ -9,7 +9,10 @@ export default {
 </script>
 
 <template>
-  <main class="main-layout">
+  <main
+    class="main-layout"
+    :aria-label="t('layouts.blank')"
+  >
     <router-view :key="$route.path" />
 
     <Inactivity />

package/components/templates/default.vue

@@ -198,6 +198,7 @@ export default {
       <main
         v-if="clusterAndRouteReady"
         class="main-layout"
+        :aria-label="t('layouts.default')"
       >
         <router-view
           :key="$route.path"
@@ -235,6 +236,7 @@ export default {
       <main
         v-else-if="unmatchedRoute"
         class="main-layout"
+        :aria-label="t('layouts.default')"
       >
         <router-view
           :key="$route.path"

package/components/templates/home.vue

@@ -67,7 +67,10 @@ export default {
         :simple="true"
       />
 
-      <main class="main-layout">
+      <main
+        class="main-layout"
+        :aria-label="t('layouts.home')"
+      >
         <router-view
           :key="$route.path"
           class="outlet"

package/components/templates/plain.vue

@@ -68,7 +68,10 @@ export default {
       :class="{'dashboard-padding-left': showTopLevelMenu}"
     >
       <Header :simple="true" />
-      <main class="main-layout">
+      <main
+        class="main-layout"
+        :aria-label="t('layouts.plain')"
+      >
         <IndentedPanel class="pt-20">
           <router-view
             :key="$route.path"

package/composables/useRuntimeFlag.ts

@@ -0,0 +1,29 @@
+import { computed } from 'vue';
+import { Store } from 'vuex';
+import semver from 'semver';
+
+import { getVersionInfo } from '@shell/utils/version';
+
+let store: Store<any>;
+
+/**
+ * Initializes runtime flags.
+ * @param vuexStore The Vuex store instance
+ */
+export const useRuntimeFlag = (vuexStore: Store<any>) => {
+  store = vuexStore;
+
+  return { featureDropdownMenu };
+};
+
+/**
+ * Check if the dropdown menu feature is enabled
+ * @returns A boolean indicating whether the dropdownMenu feature is enabled.
+ */
+const featureDropdownMenu = computed(() => {
+  const { fullVersion } = getVersionInfo(store);
+
+  const coerced = semver.coerce(fullVersion) || { version: '0.0.0' };
+
+  return semver.gte(coerced.version, '2.11.0');
+});

package/config/router/routes.js

@@ -276,14 +276,24 @@ export default [
         name:      'c-cluster-neuvector',
         meta:      { ...installRedirectRouteMeta(NEUVECTOR_NAME, NEUVECTOR_CHART_NAME, undefined, false) }
       }, {
-        path:      '/c/:cluster/apps/charts',
-        component: () => interopDefault(import('@shell/pages/c/_cluster/apps/charts/index.vue')),
-        name:      'c-cluster-apps-charts'
-      },
-      {
-        path:      '/c/:cluster/apps/charts/install',
-        component: () => interopDefault(import('@shell/pages/c/_cluster/apps/charts/install.vue')),
-        name:      'c-cluster-apps-charts-install'
+        path:     '/c/:cluster/apps/charts',
+        children: [
+          {
+            path:      '',
+            component: () => interopDefault(import('@shell/pages/c/_cluster/apps/charts/index.vue')),
+            name:      'c-cluster-apps-charts'
+          },
+          {
+            path:      'chart',
+            component: () => interopDefault(import('@shell/pages/c/_cluster/apps/charts/chart.vue')),
+            name:      'c-cluster-apps-charts-chart',
+          },
+          {
+            path:      'install',
+            component: () => interopDefault(import('@shell/pages/c/_cluster/apps/charts/install.vue')),
+            name:      'c-cluster-apps-charts-install',
+          },
+        ]
       },
       {
         path:      '/c/:cluster/auth/config',
@@ -353,10 +363,6 @@ export default [
         path:      '/c/:cluster/settings/performance',
         component: () => interopDefault(import('@shell/pages/c/_cluster/settings/performance.vue')),
         name:      'c-cluster-settings-performance'
-      }, {
-        path:      '/c/:cluster/apps/charts/chart',
-        component: () => interopDefault(import('@shell/pages/c/_cluster/apps/charts/chart.vue')),
-        name:      'c-cluster-apps-charts-chart'
       }, {
         path:      '/c/:cluster/auth/group.principal/assign-edit',
         component: () => interopDefault(import('@shell/pages/c/_cluster/auth/group.principal/assign-edit.vue')),
@@ -364,7 +370,8 @@ export default [
       }, {
         path:      '/c/:cluster/auth/user.retention',
         component: () => interopDefault(import('@shell/pages/c/_cluster/auth/user.retention/index.vue')),
-        name:      'c-cluster-auth-user.retention'
+        name:      'c-cluster-auth-user.retention',
+        meta:      { nav: '/c/:cluster/auth/management.cattle.io.user' }
       }, {
         path:      '/c/:cluster/manager/cloudCredential/create',
         component: () => interopDefault(import('@shell/pages/c/_cluster/manager/cloudCredential/create.vue')),

package/core/types.ts

@@ -373,6 +373,11 @@ export interface ConfigureTypeOptions {
    */
   customRoute?: Object;
 
+  /**
+   * Custom options vary pre resource type
+   */
+  custom?: any;
+
   /**
    * Leaving these here for completeness but I don't think these should be advertised as useable to plugin creators.
    */

package/dialog/AddCustomBadgeDialog.vue

@@ -296,6 +296,7 @@ export default {
               v-model:value="badgeBgColor"
               :disabled="!badgeColorPicker"
               :default-value="badgeBgColor"
+              :aria-label="t('clusterBadge.modal.badgeBgColorInput')"
             />
           </div>
         </div>

package/dialog/DeactivateDriverDialog.vue

@@ -91,6 +91,7 @@ export default {
           :key="i"
           color="error"
           :label="err"
+          data-testid="deactivate-driver-error-banner"
         />
       </div>
     </template>

package/dialog/ForceMachineRemoveDialog.vue

@@ -88,7 +88,10 @@ export default {
           {{ t('promptForceRemove.confirmName') }}
         </div>
         <div class="mb-10">
-          <CopyToClipboardText :text="nameToMatch" />
+          <CopyToClipboardText
+            :aria-label="t('promptForceRemove.ariaLabel')"
+            :text="nameToMatch"
+          />
         </div>
         <input
           id="confirm"

package/edit/__tests__/monitoring.coreos.com.prometheusrule.test.ts

@@ -2,14 +2,23 @@ import { mount } from '@vue/test-utils';
 import FormValidation from '@shell/mixins/form-validation';
 import Monitoring from '@shell/edit/monitoring.coreos.com.prometheusrule/index.vue';
 import { _EDIT } from '@shell/config/query-params';
+import { createStore } from 'vuex';
 
 describe('edit: management.cattle.io.setting should', () => {
   const MOCKED_ERRORS = ['error1', 'error2', 'error3', 'error4', 'error5'];
   const ERROR_BANNER_SELECTOR = '[data-testid="banner-close"]';
+  const store = createStore({
+    getters: {
+      namespaces:                () => () => ({}),
+      currentStore:              () => () => 'current_store',
+      'current_store/schemaFor': () => jest.fn()
+    }
+  });
   const requiredSetup = () => ({
     // Remove all these mocks after migration to Vue 2.7/3 due mixin logic
     global: {
-      mocks: {
+      provide: { store },
+      mocks:   {
         $store: {
           dispatch: jest.fn(),
           getters:  {
@@ -35,8 +44,12 @@ describe('edit: management.cattle.io.setting should', () => {
         canYaml:  false,
         mode:     _EDIT,
         resource: {},
-        value:    { value: 'anything' },
-        name:     ''
+        value:    {
+          setAnnotation: jest.fn(),
+          value:         'anything',
+          metadata:      {},
+        },
+        name: ''
       },
       ...requiredSetup()
     });