@rancher/shell 3.0.5-rc.1 → 3.0.5-rc.2

package/components/form/NotificationSettings.vue

@@ -21,7 +21,12 @@ export default ({
         return [_EDIT, _VIEW].includes(value);
       },
       default: _EDIT,
-    }
+    },
+
+    hiddenAriaDescribedLabel: {
+      type:    String,
+      default: ''
+    },
   },
 
 });
@@ -29,12 +34,20 @@ export default ({
 
 <template>
   <div>
+    <p
+      v-if="hiddenAriaDescribedLabel"
+      id="hidden-label-notification-settings"
+      class="sr-only"
+    >
+      {{ hiddenAriaDescribedLabel }}
+    </p>
     <div class="row mb-20">
       <div class="col span-6">
         <Checkbox
           :mode="mode"
           :value="value.showMessage === 'true'"
           :label="t('notifications.loginError.showCheckboxLabel')"
+          aria-describedby="hidden-label-notification-settings"
           @update:value="value.showMessage = $event.toString()"
         />
       </div>
@@ -48,6 +61,7 @@ export default ({
               :mode="mode"
               :disabled="value.showMessage === 'false'"
               :label="t('notifications.loginError.messageLabel')"
+              aria-describedby="hidden-label-notification-settings"
             />
           </div>
         </div>

package/components/form/Password.vue

@@ -137,6 +137,7 @@ export default {
             tabindex="0"
             class="hide-show"
             role="button"
+            :aria-label="reveal ? t('action.ariaLabel.hidePass', { area: label }) : t('action.ariaLabel.showPass', { area: label })"
             @click.prevent.stop="hideShowFn"
             @keyup.space.prevent.stop="hideShowFn"
           >

package/components/form/Probe.vue

@@ -245,6 +245,7 @@ export default {
           v-if="kind && kind!=='none'"
           :style="{'position':'relative', 'margin':'0px'}"
           class="vertical"
+          role="none"
         >
       </div>
 

package/components/form/SSHKnownHosts/__tests__/KnownHostsEditDialog.test.ts

@@ -1,6 +1,6 @@
 import { mount, VueWrapper } from '@vue/test-utils';
 import { _EDIT } from '@shell/config/query-params';
-import KnownHostsEditDialog from '@shell/components/form/SSHKnownHosts/KnownHostsEditDialog.vue';
+import KnownHostsEditDialog from '@shell/dialog/KnownHostsEditDialog.vue';
 import CodeMirror from '@shell/components/CodeMirror.vue';
 import FileSelector from '@shell/components/form/FileSelector.vue';
 
@@ -14,17 +14,6 @@ const requiredSetup = () => {
   return { global: { mocks: { $store: mockedStore() } } };
 };
 
-jest.mock('focus-trap', () => {
-  return {
-    createFocusTrap: jest.fn().mockImplementation(() => {
-      return {
-        activate:   jest.fn(),
-        deactivate: jest.fn(),
-      };
-    }),
-  };
-});
-
 describe('component: KnownHostsEditDialog', () => {
   beforeEach(() => {
     document.body.innerHTML = '<div id="modals"></div>';
@@ -44,8 +33,6 @@ describe('component: KnownHostsEditDialog', () => {
   });
 
   it('should update text from CodeMirror', async() => {
-    await wrapper.setData({ showModal: true });
-
     expect(wrapper.vm.text).toBe('line1\nline2\n');
 
     const codeMirror = wrapper.getComponent(CodeMirror);
@@ -62,8 +49,6 @@ describe('component: KnownHostsEditDialog', () => {
   });
 
   it('should update text from FileSelector', async() => {
-    await wrapper.setData({ showModal: true });
-
     expect(wrapper.vm.text).toBe('line1\nline2\n');
 
     const fileSelector = wrapper.getComponent(FileSelector);
@@ -78,38 +63,34 @@ describe('component: KnownHostsEditDialog', () => {
   });
 
   it('should save changes and close dialog', async() => {
-    await wrapper.setData({
-      showModal: true,
-      text:      'foo',
-    });
+    const closed = jest.spyOn(wrapper.vm, 'closed');
+
+    await wrapper.setData({ text: 'foo' });
 
     expect(wrapper.vm.value).toBe('line1\nline2\n');
     expect(wrapper.vm.text).toBe('foo');
 
     await wrapper.vm.closeDialog(true);
 
-    expect((wrapper.emitted('closed') as any)[0][0].value).toBe('foo');
-
-    const dialog = wrapper.vm.$refs['sshKnownHostsDialog'];
-
-    expect(dialog).toBeNull();
+    expect(closed).toHaveBeenCalledWith({
+      success: true,
+      value:   'foo'
+    });
   });
 
   it('should discard changes and close dialog', async() => {
-    await wrapper.setData({
-      showModal: true,
-      text:      'foo',
-    });
+    const closed = jest.spyOn(wrapper.vm, 'closed');
+
+    await wrapper.setData({ text: 'foo' });
 
     expect(wrapper.vm.value).toBe('line1\nline2\n');
     expect(wrapper.vm.text).toBe('foo');
 
     await wrapper.vm.closeDialog(false);
 
-    expect((wrapper.emitted('closed') as any)[0][0].value).toBe('line1\nline2\n');
-
-    const dialog = wrapper.vm.$refs['sshKnownHostsDialog'];
-
-    expect(dialog).toBeNull();
+    expect(closed).toHaveBeenCalledWith({
+      success: false,
+      value:   'line1\nline2\n'
+    });
   });
 });

package/components/form/SSHKnownHosts/index.vue

@@ -1,6 +1,5 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import KnownHostsEditDialog from './KnownHostsEditDialog.vue';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 
 export default defineComponent({
@@ -20,8 +19,6 @@ export default defineComponent({
     },
   },
 
-  components: { KnownHostsEditDialog },
-
   computed: {
     isViewMode() {
       return this.mode === _VIEW;
@@ -40,7 +37,20 @@ export default defineComponent({
   methods: {
     openDialog() {
       (this.$refs.button as HTMLInputElement)?.blur();
-      (this.$refs.editDialog as any).showDialog();
+
+      this.$store.dispatch('management/promptModal', {
+        component:           'KnownHostsEditDialog',
+        returnFocusSelector: '#known-ssh-hosts-trigger',
+        testId:              'sshKnownHostsDialog',
+        height:              'auto',
+        componentProps:      {
+          mode:   this.mode,
+          value:  this.value,
+          closed: (res: any) => {
+            this.dialogClosed(res);
+          }
+        }
+      });
     },
 
     dialogClosed(result: any) {
@@ -78,13 +88,6 @@ export default defineComponent({
           :alt="t('secret.ssh.editKnownHosts.title')"
         />
       </button>
-
-      <KnownHostsEditDialog
-        ref="editDialog"
-        :value="value"
-        :mode="mode"
-        @closed="dialogClosed"
-      />
     </template>
   </div>
 </template>

package/components/form/Select.vue

@@ -125,21 +125,6 @@ export default {
     },
 
     focusSearch() {
-      // we need this override as in a "closeOnSelect" type of component
-      // if we don't have this override, it would open again
-      if (this.overridesMixinPreventDoubleTriggerKeysOpen) {
-        this.$nextTick(() => {
-          const el = this.$refs['select'];
-
-          if ( el ) {
-            el.focus();
-          }
-
-          this.overridesMixinPreventDoubleTriggerKeysOpen = false;
-        });
-
-        return;
-      }
       this.$refs['select-input'].open = true;
 
       this.$nextTick(() => {
@@ -317,6 +302,7 @@ export default {
       @open="onOpen"
       @close="onClose"
       @option:created="(e) => $emit('createdListItem', e)"
+      @keydown.enter.stop
     >
       <template
         #option="option"

package/components/form/ValueFromResource.vue

@@ -4,7 +4,7 @@ import { get } from '@shell/utils/object';
 import { _VIEW } from '@shell/config/query-params';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { LabeledInput } from '@components/Form/LabeledInput';
-import { ref, toRef, watch } from 'vue';
+import { ref, watch } from 'vue';
 
 export default {
   emits: ['update:value', 'remove'],
@@ -83,14 +83,14 @@ export default {
 
     switch (type.value) {
     case 'resourceFieldRef':
-      name.value = toRef(props.value.name);
-      refName.value = toRef(props.value.valueFrom[type.value].containerName);
+      name.value = props.value.name;
+      refName.value = props.value.valueFrom[type.value].containerName;
       key.value = props.value.valueFrom[type.value].resource || '';
       break;
     case 'configMapKeyRef':
-      name.value = toRef(props.value.name);
+      name.value = props.value.name;
       key.value = props.value.valueFrom[type.value].key || '';
-      refName.value = toRef(props.value.valueFrom[type.value].name);
+      refName.value = props.value.valueFrom[type.value].name;
       referenced.value = props.allConfigMaps.filter((resource) => {
         return resource.metadata.name === refName.value;
       })[0];
@@ -100,13 +100,13 @@ export default {
       break;
     case 'secretRef':
     case 'configMapRef':
-      name.value = toRef(props.value.prefix);
-      refName.value = toRef(props.value[type.value].name);
+      name.value = props.value.prefix;
+      refName.value = props.value[type.value].name;
       break;
     case 'secretKeyRef':
-      name.value = toRef(props.value.name);
+      name.value = props.value.name;
       key.value = props.value.valueFrom[type.value].key || '';
-      refName.value = toRef(props.value.valueFrom[type.value].name);
+      refName.value = props.value.valueFrom[type.value].name;
       referenced.value = props.allSecrets.filter((resource) => {
         return resource.metadata.name === refName.value;
       })[0];
@@ -116,11 +116,11 @@ export default {
       break;
     case 'fieldRef':
       fieldPath.value = get(props.value.valueFrom, `${ type.value }.fieldPath`) || '';
-      name.value = toRef(props.value.name);
+      name.value = props.value.name;
       break;
     default:
-      name.value = toRef(props.value.name);
-      valStr.value = toRef(props.value.value);
+      name.value = props.value.name;
+      valStr.value = props.value.value;
       break;
     }
 

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

@@ -58,11 +58,11 @@ describe('the ArrayList', () => {
     });
 
     jest.useFakeTimers();
-    await (wrapper.get('[data-testid="remove-item-1"]').element as HTMLElement).click();
+    await (wrapper.get('[data-testid="array-list-remove-item-1"]').element as HTMLElement).click();
     jest.advanceTimersByTime(50);
     jest.useRealTimers();
 
-    expect(wrapper.find('[data-testid="remove-item-2"]').exists()).toBe(false);
+    expect(wrapper.find('[data-testid="array-list-remove-item-2"]').exists()).toBe(false);
     expect((wrapper.emitted('remove')![0][0] as any).row.value).toStrictEqual('string 1');
     expect(wrapper.vm.rows).toStrictEqual([{ value: 'string 0' }, { value: 'string 2' }]);
     expect(wrapper.emitted('update:value')![0][0]).toStrictEqual(['string 0', 'string 2']);

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

@@ -24,4 +24,39 @@ describe('colorInput.vue', () => {
     expect(colorWrapper.classes()).not.toContain('disabled');
     expect(Object.keys(colorInput.attributes())).not.toContain('disabled');
   });
+
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', () => {
+    const label = 'some-label';
+    const describeById = 'some-id';
+
+    const wrapper = shallowMount(ColorInput, {
+      props: { label },
+      attrs: { 'aria-describedby': describeById }
+    });
+
+    const colorInput = wrapper.find('input');
+    const ariaDisabled = colorInput.attributes('aria-disabled');
+    const ariaLabel = colorInput.attributes('aria-label');
+    const ariaDescribedBy = colorInput.attributes('aria-describedby');
+
+    expect(ariaDisabled).toBe('false');
+    expect(ariaLabel).toBe(label);
+    expect(ariaDescribedBy).toBe(describeById);
+  });
+
+  it('a11y: adding aria-label ($attrs) from parent should override label-based aria-label', () => {
+    const inputLabel = 'some-label';
+    const overrideLabel = 'some-override-label';
+
+    const wrapper = shallowMount(ColorInput, {
+      props: { label: inputLabel },
+      attrs: { 'aria-label': overrideLabel }
+    });
+
+    const colorInput = wrapper.find('input');
+    const ariaLabel = colorInput.attributes('aria-label');
+
+    expect(ariaLabel).toBe(overrideLabel);
+    expect(ariaLabel).not.toBe(inputLabel);
+  });
 });

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

@@ -214,4 +214,44 @@ describe('component: LabeledSelect', () => {
       expect(wrapper.vm.$data.myValue).toStrictEqual(expectation);
     });
   });
+
+  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 itemLabel = 'some-label';
+
+    const wrapper = mount(LabeledSelect, {
+      props: {
+        value,
+        label:   itemLabel,
+        options: [
+          { label, value },
+        ],
+        required: true
+      },
+      attrs: { 'aria-describedby': ariaDescribedById }
+    });
+
+    const labeledSelectContainer = wrapper.find('.labeled-select');
+    const ariaExpanded = labeledSelectContainer.attributes('aria-expanded');
+    const ariaDescribedBy = labeledSelectContainer.attributes('aria-describedby');
+    const ariaRequired = labeledSelectContainer.attributes('aria-required');
+    const containerId = labeledSelectContainer.attributes('id');
+    const labelFor = wrapper.find('label').attributes('for');
+
+    const vSelectInput = wrapper.find('.v-select');
+
+    expect(ariaExpanded).toBe('false');
+    expect(ariaDescribedBy).toBe(ariaDescribedById);
+    expect(ariaRequired).toBe('true');
+    expect(containerId).toBe(wrapper.vm.labeledSelectLabelId);
+    expect(labelFor).toBe(wrapper.vm.labeledSelectLabelId);
+
+    // 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/form/__tests__/SSHKnownHosts.test.ts

@@ -1,6 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import SSHKnownHosts from '@shell/components/form/SSHKnownHosts/index.vue';
+import { createStore } from 'vuex';
 
 jest.mock('focus-trap', () => {
   return {
@@ -53,18 +54,26 @@ describe('component: SSHKnownHosts', () => {
   });
 
   it('mode edit: should open edit dialog', async() => {
+    const actions = { 'management/promptModal': jest.fn() };
+
     const wrapper = mount(SSHKnownHosts, {
       props: {
         mode:  _EDIT,
         value: '',
+      },
+      global: {
+        mocks: {
+          $store:      createStore({ actions }),
+          $fetchState: {}
+        },
+        stubs: { transition: false }
       }
     });
 
     const knownSshHostsOpenDialog = wrapper.find('[data-testid="input-known-ssh-hosts_open-dialog"]');
-    const editDialog = wrapper.vm.$refs['editDialog'] as any;
 
     await knownSshHostsOpenDialog.trigger('click');
 
-    expect(editDialog.showModal).toBe(true);
+    expect(actions['management/promptModal']).toHaveBeenCalledWith(expect.anything(), expect.objectContaining({ component: 'KnownHostsEditDialog' }));
   });
 });

package/components/nav/Group.vue

@@ -99,6 +99,11 @@ export default {
     },
 
     groupSelected() {
+      // Can not click on groups that are fixed open
+      if (this.fixedOpen) {
+        return;
+      }
+
       // Don't auto-select first group entry if we're already expanded and contain the currently-selected nav item
       if (this.hasActiveRoute() && this.isExpanded) {
         return;
@@ -219,14 +224,14 @@ export default {
 <template>
   <div
     class="accordion"
-    :class="{[`depth-${depth}`]: true, 'expanded': isExpanded, 'has-children': hasChildren, 'group-highlight': isGroupActive}"
+    :class="{[`depth-${depth}`]: true, 'expanded': isExpanded, 'has-children': hasChildren, 'group-highlight': isGroupActive }"
   >
     <div
       v-if="showHeader"
       class="header"
-      :class="{'active': isOverview, 'noHover': !canCollapse}"
+      :class="{'active': isOverview, 'noHover': !canCollapse || fixedOpen}"
       role="button"
-      tabindex="0"
+      :tabindex="fixedOpen ? -1 : 0"
       :aria-label="group.labelDisplay || group.label || ''"
       @click="groupSelected()"
       @keyup.enter="groupSelected()"
@@ -274,7 +279,7 @@ export default {
           v-if="child.divider"
           :key="idx"
         >
-          <hr>
+          <hr role="none">
         </li>
         <!-- <div v-else-if="child[childrenKey] && hideGroup(child[childrenKey])" :key="child.name">
           HIDDEN
@@ -372,6 +377,9 @@ export default {
       &:hover:not(.active) {
         background-color: var(--nav-hover);
       }
+      &:hover:not(.active).noHover {
+        background-color: inherit;
+      }
     }
   }
 

package/components/nav/Header.vue

@@ -5,7 +5,6 @@ import { MANAGEMENT, NORMAN, STEVE } from '@shell/config/types';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import { ucFirst } from '@shell/utils/string';
 import { isAlternate, isMac } from '@shell/utils/platform';
-import Import from '@shell/components/Import';
 import BrandImage from '@shell/components/BrandImage';
 import { getProduct, getVendor } from '@shell/config/private-label';
 import ClusterProviderIcon from '@shell/components/ClusterProviderIcon';
@@ -16,7 +15,6 @@ import NamespaceFilter from './NamespaceFilter';
 import WorkspaceSwitcher from './WorkspaceSwitcher';
 import TopLevelMenu from './TopLevelMenu';
 
-import Jump from './Jump';
 import { allHash } from '@shell/utils/promise';
 import { ActionLocation, ExtensionPoint } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
@@ -36,9 +34,7 @@ export default {
   components: {
     NamespaceFilter,
     WorkspaceSwitcher,
-    Import,
     TopLevelMenu,
-    Jump,
     BrandImage,
     ClusterBadge,
     ClusterProviderIcon,
@@ -79,9 +75,7 @@ export default {
       LOGGED_OUT,
       navHeaderRight:         null,
       extensionHeaderActions: getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, this.$route),
-      ctx:                    this,
-      showImportModal:        false,
-      showSearchModal:        false
+      ctx:                    this
     };
   },
 
@@ -316,19 +310,24 @@ export default {
     },
 
     openImport() {
-      this.showImportModal = true;
-    },
-
-    closeImport() {
-      this.showImportModal = false;
+      this.$store.dispatch('cluster/promptModal', {
+        component:      'ImportDialog',
+        modalWidth:     '75%',
+        height:         'auto',
+        styles:         'max-height: 90vh;',
+        componentProps: { cluster: this.currentCluster }
+      });
     },
 
     openSearch() {
-      this.showSearchModal = true;
-    },
-
-    hideSearch() {
-      this.showSearchModal = false;
+      this.$store.dispatch('cluster/promptModal', {
+        component:           'SearchDialog',
+        testId:              'search-modal',
+        modalWidth:          '50%',
+        height:              'auto',
+        styles:              'max-height: 90vh;',
+        returnFocusSelector: '#header-btn-search'
+      });
     },
 
     checkClusterName() {
@@ -555,20 +554,6 @@ export default {
           >
             <i class="icon icon-upload icon-lg" />
           </button>
-          <app-modal
-            v-if="showImportModal"
-            class="import-modal"
-            name="importModal"
-            width="75%"
-            height="auto"
-            styles="max-height: 90vh;"
-            @close="closeImport"
-          >
-            <Import
-              :cluster="currentCluster"
-              @close="closeImport"
-            />
-          </app-modal>
 
           <button
             v-if="showKubeShell"
@@ -641,18 +626,6 @@ export default {
         >
           <i class="icon icon-search icon-lg" />
         </button>
-        <app-modal
-          v-if="showSearch && showSearchModal"
-          class="search-modal"
-          name="searchModal"
-          width="50%"
-          height="auto"
-          :trigger-focus-trap="true"
-          return-focus-selector="#header-btn-search"
-          @close="hideSearch()"
-        >
-          <Jump @closeSearch="hideSearch()" />
-        </app-modal>
       </div>
 
       <!-- Extension header actions -->