dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-test.2

package/plugins/steve/worker/web-worker.advanced.js

@@ -3,6 +3,8 @@
  * relocates cluster resource sockets off the UI thread and into a webworker
  */
 
+// Status of this is TBD - https://github.com/rancher/dashboard/issues/15111
+
 import { SCHEMA, COUNT } from '@shell/config/types';
 import ResourceWatcher, { watchKeyFromMessage } from '@shell/plugins/steve/resourceWatcher';
 import ResourceCache from '@shell/plugins/steve/caches/resourceCache';
@@ -314,7 +316,9 @@ self.onmessage = (e) => {
     if (workerActions[action]) {
       workerActions[action](e?.data[action]);
     } else {
-      console.warn('no associated action for:', action); // eslint-disable-line no-console
+      // This catches any window sendMessage event. We're hitting this on hot-reload of code where somehow this file is loaded
+      // Could be related to extensions, which have their own version of this
+      console.debug('no associated action for:', action); // eslint-disable-line no-console
     }
   });
 }; // bind everything to the worker's onmessage handler via the workerActions

package/rancher-components/Banner/Banner.test.ts

@@ -3,14 +3,23 @@ import { Banner } from './index';
 
 describe('component: Banner', () => {
   it('should display text based on label', () => {
-    const label = 'test';
+    const label = 'some-label-test';
     const wrapper = mount(
       Banner,
       { propsData: { label } });
 
-    const element = wrapper.find('span').element;
+    expect(wrapper.html()).toContain(label);
+  });
+
+  it('should display text based on default slot', () => {
+    const slotText = 'some-test';
+
+    const wrapper = mount(
+      Banner,
+      { slots: { default: slotText } }
+    );
 
-    expect(element.textContent).toBe(label);
+    expect(wrapper.html()).toContain(slotText);
   });
 
   it('should display an icon', () => {
@@ -56,4 +65,43 @@ describe('component: Banner', () => {
 
     expect(element.classList).toContain('stacked');
   });
+
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', () => {
+    const label = 'test';
+    const icon = 'my-icon';
+    const closable = true;
+
+    const wrapper = mount(
+      Banner,
+      {
+        propsData: {
+          label, icon, closable
+        }
+      });
+
+    const mainContainer = wrapper.find('.banner');
+    const bannerIcon = wrapper.find('.banner__icon i');
+    const bannerContent = wrapper.find('.banner__content');
+    const bannerCloseBtn = wrapper.find('.banner__content__closer');
+    const bannerCloseIcon = wrapper.find('.icon-close.closer-icon');
+
+    const mainContainerRole = mainContainer.attributes('role');
+    const mainContainerAriaLabelledBy = mainContainer.attributes('aria-labelledby');
+
+    const bannerIconAlt = bannerIcon.attributes('alt');
+
+    const bannerContentId = bannerContent.attributes('id');
+
+    const bannerCloseBtnRole = bannerCloseBtn.attributes('role');
+    const bannerCloseBtnAriaLabel = bannerCloseBtn.attributes('aria-label');
+
+    const bannerCloseIconAlt = bannerCloseIcon.attributes('alt');
+
+    expect(mainContainerRole).toBe('region');
+    expect(mainContainerAriaLabelledBy).toBe(bannerContentId);
+    expect(bannerIconAlt).toBeDefined();
+    expect(bannerCloseIconAlt).toBeDefined();
+    expect(bannerCloseBtnRole).toBe('button');
+    expect(bannerCloseBtnAriaLabel).toBeDefined();
+  });
 });

package/rancher-components/Banner/Banner.vue

@@ -1,8 +1,21 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { nlToBr } from '@shell/utils/string';
+import { nlToBr, generateRandomAlphaString } from '@shell/utils/string';
 import { stringify } from '@shell/utils/error';
 
+/**
+ * These should eventually be used when making this component use the composable api but I need the props elsewhere so I'm defining them here.
+ */
+export interface Props {
+  color?: string;
+  label?: string | Error | Object;
+  labelKey?: string;
+  icon?: string;
+  closable?: boolean;
+  stacked?: boolean;
+  disabled?: boolean;
+}
+
 export default defineComponent({
   props: {
     /**
@@ -47,16 +60,26 @@ export default defineComponent({
     stacked: {
       type:    Boolean,
       default: false
-    }
+    },
+    /**
+     * Disabled banner - banner is shown greyed out
+     */
+    disabled: {
+      type:    Boolean,
+      default: false
+    },
+  },
+  emits: ['close'],
+  data() {
+    return { labelledbyId: `banner-labelledby-${ generateRandomAlphaString(12) }` };
   },
-  emits:    ['close'],
   computed: {
     /**
      * Return message text as label.
      */
     messageLabel(): string | void {
       return !(typeof this.label === 'string') ? stringify(this.label) : undefined;
-    }
+    },
   },
   methods: { nlToBr }
 });
@@ -66,8 +89,11 @@ export default defineComponent({
     class="banner"
     :class="{
       [color]: true,
+      'banner-disabled': disabled
     }"
-    role="banner"
+    role="region"
+    :aria-labelledby="labelledbyId"
+    tabindex="0"
   >
     <div
       v-if="icon"
@@ -77,9 +103,11 @@ export default defineComponent({
       <i
         class="icon icon-2x"
         :class="icon"
+        :alt="t('generic.banners.bannerIcon')"
       />
     </div>
     <div
+      :id="labelledbyId"
       class="banner__content"
       data-testid="banner-content"
       :class="{
@@ -94,7 +122,9 @@ export default defineComponent({
           :k="labelKey"
           :raw="true"
         />
-        <span v-else-if="messageLabel">{{ messageLabel }}</span>
+        <span
+          v-else-if="messageLabel"
+        >{{ messageLabel }}</span>
         <span
           v-else
           v-clean-html="nlToBr(label)"
@@ -113,6 +143,7 @@ export default defineComponent({
         <i
           data-testid="banner-close"
           class="icon icon-close closer-icon"
+          :alt="t('generic.banners.altCloseBanner')"
         />
       </div>
     </div>

package/rancher-components/Form/Checkbox/Checkbox.test.ts

@@ -1,4 +1,4 @@
-import { shallowMount, Wrapper } from '@vue/test-utils';
+import { shallowMount, Wrapper, mount } from '@vue/test-utils';
 import { Checkbox } from './index';
 
 describe('checkbox.vue', () => {
@@ -65,4 +65,62 @@ describe('checkbox.vue', () => {
 
     expect(wrapper.emitted('update:value')[0][0]).toBeNull();
   });
+
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', async() => {
+    const alternateLabel = 'some-alternate-aria-label';
+    const description = 'some-description';
+    const ariaDescribedById = 'some-external-id';
+
+    const wrapper: Wrapper<InstanceType<typeof Checkbox>> = mount(
+      Checkbox,
+      {
+        propsData: {
+          value: false, alternateLabel, description
+        },
+        attrs: { 'aria-describedby': ariaDescribedById },
+      }
+    );
+
+    const field = wrapper.find('.checkbox-custom');
+    const ariaChecked = field.attributes('aria-checked');
+    const ariaLabel = field.attributes('aria-label');
+    const ariaLabelledBy = field.attributes('aria-labelledby');
+    const ariaDescribedBy = field.attributes('aria-describedby');
+
+    // validates type of input rendered
+    expect(ariaChecked).toBe('false');
+    expect(ariaLabelledBy).toBeUndefined();
+    expect(ariaLabel).toBe(alternateLabel);
+    expect(ariaDescribedBy).toBe(`${ ariaDescribedById } ${ wrapper.vm.describedById }`);
+  });
+
+  it('a11y: having a label should not render "aria-label" prop and have "aria-labelledby"', async() => {
+    const label = 'some-label';
+
+    const wrapper: Wrapper<InstanceType<typeof Checkbox>> = mount(
+      Checkbox,
+      {
+        propsData: {
+          value: true, label, disabled: true
+        }
+      }
+    );
+
+    const field = wrapper.find('.checkbox-custom');
+    const ariaChecked = field.attributes('aria-checked');
+    const ariaLabel = field.attributes('aria-label');
+    const ariaLabelledBy = field.attributes('aria-labelledby');
+    const ariaDisabled = field.attributes('aria-disabled');
+    const tabIndex = field.attributes('tabindex');
+
+    // validates type of input rendered
+    expect(field.exists()).toBe(true);
+    expect(ariaChecked).toBe('true');
+    expect(ariaLabelledBy).toBe(wrapper.vm.idForLabel);
+    expect(ariaLabel).toBeUndefined();
+    expect(wrapper.find(`#${ wrapper.vm.idForLabel }`).text()).toBe(label);
+
+    expect(ariaDisabled).toBe('true');
+    expect(tabIndex).toBe('-1');
+  });
 });

package/rancher-components/Form/Checkbox/Checkbox.vue

@@ -13,7 +13,7 @@ export default defineComponent({
      * The checkbox value.
      */
     value: {
-      type:    [Boolean, Array, String] as PropType<boolean | boolean[] | string>,
+      type:    [Boolean, Array, String] as PropType<boolean | boolean[] | string | string[]>,
       default: false
     },
 
@@ -142,6 +142,18 @@ export default defineComponent({
   },
 
   computed: {
+    ariaDescribedBy(): string | undefined {
+      const inheritedDescribedBy = this.$attrs['aria-describedby'];
+      const internalDescribedBy = this.descriptionKey || this.description ? this.describedById : undefined;
+
+      if (inheritedDescribedBy && internalDescribedBy) {
+        return `${ inheritedDescribedBy } ${ internalDescribedBy }`;
+      } else if (inheritedDescribedBy || internalDescribedBy) {
+        return `${ inheritedDescribedBy || internalDescribedBy }`;
+      }
+
+      return undefined;
+    },
     /**
      * Determines if the checkbox is disabled.
      * @returns boolean: True when the disabled prop is true or when mode is
@@ -176,7 +188,7 @@ export default defineComponent({
     },
 
     idForLabel():string {
-      return `${ this.id }-label`;
+      return `${ generateRandomAlphaString(12) }-checkbox-label`;
     }
   },
 
@@ -233,7 +245,7 @@ export default defineComponent({
     /**
      * Determines if there are multiple values for the checkbox.
      */
-    isMulti(value: boolean | boolean[] | string): value is boolean[] {
+    isMulti(value: boolean | boolean[] | string | string[]): value is boolean[] {
       return Array.isArray(value);
     },
 
@@ -280,10 +292,11 @@ export default defineComponent({
         class="checkbox-custom"
         :class="{indeterminate: indeterminate}"
         :tabindex="isDisabled ? -1 : 0"
+        :aria-disabled="isDisabled"
         :aria-label="replacementLabel"
         :aria-checked="!!value"
         :aria-labelledby="labelKey || label ? idForLabel : undefined"
-        :aria-describedby="descriptionKey || description ? describedById : undefined"
+        :aria-describedby="ariaDescribedBy"
         role="checkbox"
       />
       <span
@@ -292,12 +305,15 @@ export default defineComponent({
         :class="{ 'checkbox-primary': primary }"
       >
         <slot name="label">
-          <t
+          <span
             v-if="labelKey"
             :id="idForLabel"
-            :k="labelKey"
-            :raw="true"
-          />
+          >
+            <t
+              :k="labelKey"
+              :raw="true"
+            />
+          </span>
           <span
             v-else-if="label"
             :id="idForLabel"
@@ -310,6 +326,7 @@ export default defineComponent({
             class="checkbox-info icon icon-info icon-lg"
             :data-testid="componentTestid + '-info-icon'"
             :tabindex="isDisabled ? -1 : 0"
+            role="tooltip"
           />
           <i
             v-else-if="tooltip"
@@ -318,6 +335,7 @@ export default defineComponent({
             class="checkbox-info icon icon-info icon-lg"
             :data-testid="componentTestid + '-info-icon'"
             :tabindex="isDisabled ? -1 : 0"
+            role="tooltip"
           />
         </slot>
       </span>
@@ -386,7 +404,7 @@ $fontColor: var(--input-label);
 
   .checkbox-info {
     line-height: normal;
-    margin-left: 2px;
+    margin-left: 4px;
 
     &:focus-visible {
       @include focus-outline;

package/rancher-components/Form/LabeledInput/LabeledInput.test.ts

@@ -54,4 +54,55 @@ describe('component: LabeledInput', () => {
       expect(subLabel.text()).toBe(hint);
     });
   });
+
+  describe('a11y: adding ARIA props', () => {
+    const ariaLabelVal = 'some-aria-label';
+    const subLabelVal = 'some-sublabel';
+    const ariaDescribedByIdVal = 'some-external-id';
+    const ariaRequiredVal = 'true';
+
+    it.each([
+      ['text', 'input', ariaLabelVal, subLabelVal, ariaDescribedByIdVal],
+      ['cron', 'input', ariaLabelVal, subLabelVal, ariaDescribedByIdVal],
+      ['multiline', 'textarea', ariaLabelVal, subLabelVal, ariaDescribedByIdVal],
+      ['multiline-password', 'textarea', ariaLabelVal, subLabelVal, ariaDescribedByIdVal],
+    ])('for type %p should correctly fill out the appropriate fields on the component', (type, validationType, ariaLabel, subLabel, ariaDescribedById) => {
+      const wrapper = mount(LabeledInput, {
+        propsData: {
+          value: '', type, ariaLabel, subLabel, required: true, mode: 'view'
+        },
+        attrs: { 'aria-describedby': ariaDescribedById },
+        mocks: { $store: { getters: { 'i18n/t': jest.fn() } } }
+      });
+
+      const field = wrapper.find(validationType);
+      const ariaLabelProp = field.attributes('aria-label');
+      const ariaDescribedBy = field.attributes('aria-describedby');
+      const ariaRequired = field.attributes('aria-required');
+      const ariaDisabled = field.attributes('aria-disabled');
+      const disabledAttr = field.attributes('disabled');
+
+      // validates type of input rendered
+      expect(field.exists()).toBe(true);
+      expect(ariaLabelProp).toBe(ariaLabel);
+      expect(ariaDescribedBy).toBe(`${ ariaDescribedById } ${ wrapper.vm.describedById }`);
+      expect(ariaRequired).toBe(ariaRequiredVal);
+      expect(ariaDisabled).toBe('true');
+      expect(disabledAttr).toBeDefined();
+    });
+  });
+
+  it('a11y: rendering a "label" should not render an "aria-label" prop', () => {
+    const label = 'some-label';
+
+    const wrapper = mount(LabeledInput, {
+      propsData: { type: 'text', label },
+      mocks:     { $store: { getters: { 'i18n/t': jest.fn() } } }
+    });
+
+    const mainInput = wrapper.find('input[type="text"]');
+
+    expect(mainInput.attributes('aria-label')).toBeUndefined();
+    expect(wrapper.find('label').text()).toBe(label);
+  });
 });

package/rancher-components/Form/LabeledInput/LabeledInput.vue

@@ -162,6 +162,19 @@ export default defineComponent({
       return this.isCompact ? false : !!this.label || !!this.labelKey || !!this.$slots.label;
     },
 
+    ariaDescribedBy(): string | undefined {
+      const inheritedDescribedBy = this.$attrs['aria-describedby'];
+      const internalDescribedBy = this.cronHint || this.subLabel ? this.describedById : undefined;
+
+      if (inheritedDescribedBy && internalDescribedBy) {
+        return `${ inheritedDescribedBy } ${ internalDescribedBy }`;
+      } else if (inheritedDescribedBy || internalDescribedBy) {
+        return `${ inheritedDescribedBy || internalDescribedBy }`;
+      }
+
+      return undefined;
+    },
+
     /**
      * Determines if the Labeled Input should display a tooltip.
      */
@@ -382,6 +395,7 @@ export default defineComponent({
         <span
           v-if="requiredField"
           class="required"
+          :aria-hidden="true"
         >*</span>
       </label>
     </slot> -->
@@ -397,11 +411,13 @@ export default defineComponent({
         v-stripped-aria-label="!hasLabel && ariaLabel ? ariaLabel : undefined"
         :maxlength="_maxlength"
         :disabled="isDisabled"
+        :aria-disabled="isDisabled"
         :value="value || ''"
         :placeholder="_placeholder"
         autocapitalize="off"
         :class="{ conceal: type === 'multiline-password' }"
-        :aria-describedby="cronHint || subLabel ? describedById : undefined"
+        :aria-describedby="ariaDescribedBy"
+        :aria-required="requiredField"
         @update:value="onInput"
         @focus="onFocus"
         @blur="onBlur"
@@ -411,18 +427,20 @@ export default defineComponent({
         :id="inputId"
         ref="value"
         v-stripped-aria-label="!hasLabel && ariaLabel ? ariaLabel : undefined"
-        role="textbox"
+        :role="type === 'number' ? undefined : 'textbox'"
         :class="{ 'no-label': !hasLabel }"
         v-bind="$attrs"
         :maxlength="_maxlength"
         :disabled="isDisabled"
+        :aria-disabled="isDisabled"
         :type="type === 'cron' ? 'text' : type"
         :value="value"
         :placeholder="_placeholder"
         autocomplete="off"
         autocapitalize="off"
         :data-lpignore="ignorePasswordManagers"
-        :aria-describedby="cronHint || subLabel ? describedById : undefined"
+        :aria-describedby="ariaDescribedBy"
+        :aria-required="requiredField"
         @input="onInput"
         @focus="onFocus"
         @blur="onBlur"

package/rancher-components/Form/Radio/RadioButton.test.ts

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import { RadioButton } from './index';
 
 describe('radioButton.vue', () => {
@@ -30,4 +30,39 @@ describe('radioButton.vue', () => {
 
     expect(wrapper.find('.radio-label').text()).toBe('Test Label - Slot');
   });
+
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', async() => {
+    const val = 'foo';
+    const value = 'foo';
+    const description = 'some-description';
+    const itemLabel = 'some-label';
+    const radioOptionId = 'some-id-from-parent';
+
+    const wrapper = mount(
+      RadioButton,
+      {
+        propsData: {
+          label: itemLabel,
+          val,
+          value,
+          description,
+          radioOptionId
+        }
+      });
+
+    const radioInputElem = wrapper.find('span[role="radio"]');
+    const role = radioInputElem.attributes('role');
+    const ariaLabel = radioInputElem.attributes('aria-label');
+    const ariaChecked = radioInputElem.attributes('aria-checked');
+    const ariaDisabled = radioInputElem.attributes('aria-disabled');
+    const ariaDescribedBy = radioInputElem.attributes('aria-describedby');
+    const itemId = radioInputElem.attributes('id');
+
+    expect(role).toBe('radio');
+    expect(ariaLabel).toBe(itemLabel);
+    expect(ariaChecked).toBe('true');
+    expect(ariaDisabled).toBe('false');
+    expect(ariaDescribedBy).toBe(wrapper.vm.describeById);
+    expect(itemId).toBe(radioOptionId);
+  });
 });

package/rancher-components/Form/Radio/RadioButton.vue

@@ -1,10 +1,12 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
-import { randomStr } from '@shell/utils/string';
+import { generateRandomAlphaString } from '@shell/utils/string';
 
 export default defineComponent({
-  props: {
+
+  inheritAttrs: false,
+  props:        {
     /**
      * The name of the input, for grouping.
      */
@@ -76,7 +78,16 @@ export default defineComponent({
     preventFocusOnRadioGroups: {
       type:    Boolean,
       default: false
-    }
+    },
+
+    /**
+     * Radio option Id - used to link to aria-activedescendant
+     * when using inside of the context of a Radio Group
+     */
+    radioOptionId: {
+      type:    String,
+      default: undefined
+    },
   },
 
   emits: ['update:value'],
@@ -84,7 +95,8 @@ export default defineComponent({
   data() {
     return {
       isChecked:    this.value === this.val,
-      randomString: `${ randomStr() }-radio`,
+      randomString: `${ generateRandomAlphaString(12) }-radio`,
+      describeById: `${ generateRandomAlphaString(12) }-radio-described-id`,
     };
   },
 
@@ -165,11 +177,14 @@ export default defineComponent({
       @click.stop.prevent
     >
     <span
+      :id="radioOptionId"
       ref="custom"
       :class="[ isDisabled ? 'text-muted' : '', 'radio-custom']"
       :tabindex="isDisabled || preventFocusOnRadioGroups ? -1 : 0"
       :aria-label="label"
       :aria-checked="isChecked"
+      :aria-disabled="isDisabled"
+      :aria-describedby="descriptionKey || description ? describeById : undefined"
       role="radio"
     />
     <div class="labeling">
@@ -183,13 +198,14 @@ export default defineComponent({
         >
           <!-- slot content -->
         </slot>
-        <span
+        <div
           v-else-if="label"
           v-clean-html="label"
         />
       </label>
       <div
         v-if="descriptionKey || description"
+        :id="describeById"
         class="radio-button-outer-container-description"
       >
         <t

package/rancher-components/Form/Radio/RadioGroup.test.ts

@@ -24,4 +24,64 @@ describe('component: RadioGroup', () => {
       expect(slot.disabled).toBe(disabled);
     });
   });
+
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', async() => {
+    const inputLabel = 'some-label';
+    const ariaDescribedById = 'some-external-id';
+    const currValue = 'whatever';
+
+    const wrapper = mount(RadioGroup, {
+      propsData: {
+        name:    'some-name',
+        label:   inputLabel,
+        value:   currValue,
+        options: [{ label: currValue, value: currValue }]
+      },
+      attrs: { 'aria-describedby': ariaDescribedById }
+    });
+
+    const field = wrapper.find('[role="radiogroup"]');
+    const role = field.attributes('role');
+    const ariaLabel = field.attributes('aria-label');
+    const ariaDescribedBy = field.attributes('aria-describedby');
+    const ariaActiveDescendant = field.attributes('aria-activedescendant');
+
+    expect(ariaLabel).toBe(inputLabel);
+    expect(role).toBe('radiogroup');
+    expect(ariaActiveDescendant).toBe(`${ wrapper.vm.radioOptionsIdPrefix }0`);
+    expect(ariaDescribedBy).toBe(ariaDescribedById);
+
+    const radioOption = wrapper.find(`.radio-custom`);
+
+    // make sure we validate when using RadioGroup without custom slot data
+    // we do assign an ID that is important to get 'aria-activedescendant' working
+    expect(radioOption.attributes('id')).toBe(`${ wrapper.vm.radioOptionsIdPrefix }0`);
+  });
+
+  it('a11y: adding aria-label ($attrs) from parent should override label-based aria-label', async() => {
+    const inputLabel = 'some-label';
+    const overrideLabel = 'some-override-label';
+    const currValue = 'whatever';
+
+    const wrapper = mount(RadioGroup, {
+      propsData: {
+        name:     'some-name',
+        label:    inputLabel,
+        value:    currValue,
+        disabled: true,
+        options:  [{ label: currValue, value: currValue }]
+      },
+      attrs: { 'aria-label': overrideLabel }
+    });
+
+    const field = wrapper.find('[role="radiogroup"]');
+    const ariaLabel = field.attributes('aria-label');
+    const ariaDisabled = field.attributes('aria-disabled');
+    const tabIndex = field.attributes('tabindex');
+
+    expect(ariaLabel).toBe(overrideLabel);
+    expect(ariaLabel).not.toBe(inputLabel);
+    expect(ariaDisabled).toBe('true');
+    expect(tabIndex).toBe('-1');
+  });
 });