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

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

@@ -314,7 +314,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/public/index.html

@@ -16,6 +16,7 @@
         </div>
     </div>
     <div id="modals"><!--Portal content here--></div>
+    <div id="slides"></div>
 
     <script>
         (() => {

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,6 +1,6 @@
 <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';
 
 export default defineComponent({
@@ -47,16 +47,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 +76,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 +90,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 +109,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 +130,7 @@ export default defineComponent({
         <i
           data-testid="banner-close"
           class="icon icon-close closer-icon"
+          :alt="t('generic.banners.altCloseBanner')"
         />
       </div>
     </div>
@@ -164,6 +182,10 @@ $icon-size: 24px;
     }
   }
 
+  &.banner-disabled {
+    filter: grayscale(1);
+  }
+
   &__content {
     padding: 10px;
     transition: all 0.2s ease;

package/rancher-components/Card/Card.vue

@@ -89,7 +89,7 @@ export default defineComponent({
           {{ title }}
         </slot>
       </div>
-      <hr>
+      <hr role="none">
       <div
         class="card-body"
         data-testid="card-body-slot"

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

@@ -124,6 +124,15 @@ export default defineComponent({
       type:    String,
       default: undefined
     },
+
+    /**
+     * Inherited global identifier prefix for tests
+     * Define a term based on the parent component to avoid conflicts on multiple components
+     */
+    componentTestid: {
+      type:    String,
+      default: 'checkbox'
+    },
   },
 
   emits: ['update:value'],
@@ -133,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
@@ -167,7 +188,7 @@ export default defineComponent({
     },
 
     idForLabel():string {
-      return `${ this.id }-label`;
+      return `${ generateRandomAlphaString(12) }-checkbox-label`;
     }
   },
 
@@ -271,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
@@ -298,6 +320,7 @@ export default defineComponent({
             v-clean-tooltip="{content: t(tooltipKey), triggers: ['hover', 'touch', 'focus']}"
             v-stripped-aria-label="t(tooltipKey)"
             class="checkbox-info icon icon-info icon-lg"
+            :data-testid="componentTestid + '-info-icon'"
             :tabindex="isDisabled ? -1 : 0"
           />
           <i
@@ -305,6 +328,7 @@ export default defineComponent({
             v-clean-tooltip="{content: tooltip, triggers: ['hover', 'touch', 'focus']}"
             v-stripped-aria-label="tooltip"
             class="checkbox-info icon icon-info icon-lg"
+            :data-testid="componentTestid + '-info-icon'"
             :tabindex="isDisabled ? -1 : 0"
           />
         </slot>
@@ -374,7 +398,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

@@ -161,6 +161,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.
      */
@@ -362,6 +375,7 @@ export default defineComponent({
         <span
           v-if="requiredField"
           class="required"
+          :aria-hidden="true"
         >*</span>
       </label>
     </slot>
@@ -377,11 +391,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"
@@ -396,13 +412,15 @@ export default defineComponent({
         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">
@@ -190,6 +205,7 @@ export default defineComponent({
       </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');
+  });
 });