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

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,51 @@ 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
+        },
+        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');
+
+      // 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);
+    });
+  });
+
+  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');
+  });
 });

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

@@ -2,11 +2,13 @@
 import { PropType, defineComponent } from 'vue';
 import { _VIEW } from '@shell/config/query-params';
 import RadioButton from '@components/Form/Radio/RadioButton.vue';
+import { generateRandomAlphaString } from '@shell/utils/string';
 
 interface Option {
   value: unknown,
   label: string,
   description?: string,
+  radioOptionId?: string,
 }
 
 export default defineComponent({
@@ -106,7 +108,10 @@ export default defineComponent({
   emits: ['update:value'],
 
   data() {
-    return { currFocusedElem: undefined as undefined | EventTarget | null };
+    return {
+      currFocusedElem:      undefined as undefined | EventTarget | null,
+      radioOptionsIdPrefix: `radio-option-${ generateRandomAlphaString(12) }-`
+    };
   },
 
   computed: {
@@ -120,16 +125,21 @@ export default defineComponent({
         const opt = this.options[i];
 
         if (typeof opt === 'object' && opt) {
-          out.push(opt);
+          out.push({
+            ...opt,
+            radioOptionId: `${ this.radioOptionsIdPrefix }${ i }`
+          });
         } else if (this.labels) {
           out.push({
-            label: this.labels[i],
-            value: opt
+            label:         this.labels[i],
+            value:         opt,
+            radioOptionId: `${ this.radioOptionsIdPrefix }${ i }`
           });
         } else {
           out.push({
-            label: opt,
-            value: opt
+            label:         opt,
+            value:         opt,
+            radioOptionId: `${ this.radioOptionsIdPrefix }${ i }`
           });
         }
       }
@@ -150,8 +160,36 @@ export default defineComponent({
     isDisabled(): boolean {
       return (this.disabled || this.isView);
     },
-    radioGroupLabel(): string {
-      return this.labelKey ? this.t(this.labelKey) : this.label ? this.label : '';
+    /**
+     * Radio Group Aria Label based on the label present on this input
+     */
+    radioGroupAriaLabel(): string | undefined {
+      // seems like VoiceOver screen reader isn't really picking up aria-labelledby
+      // let's just gather the label that comes in and assign it.
+      // We allow override with $attrs['aria-label'] for more control
+      if (this.$attrs['aria-label']) {
+        return this.$attrs['aria-label'] as string || undefined;
+      }
+
+      return this.labelKey ? this.t(this.labelKey) : this.label ? this.label : undefined;
+    },
+    /**
+     * Radio Group Aria DescribedBy parent attribute for extendability
+     */
+    radioGroupAriaDescribedBy(): string | undefined {
+      return this.$attrs['aria-describedby'] as string || undefined;
+    },
+    /**
+     * Radio Group value for aria-activedescendant HTML prop
+     */
+    ariaActiveDescendant(): string | undefined {
+      const activeOpt = this.normalizedOptions.find((opt) => opt.value === this.value);
+
+      if (this.value && activeOpt) {
+        return activeOpt.radioOptionId;
+      }
+
+      return '';
     }
   },
 
@@ -199,45 +237,46 @@ export default defineComponent({
 </script>
 
 <template>
-  <fieldset>
+  <div>
     <!-- Label -->
     <div
       v-if="label || labelKey || tooltip || tooltipKey || $slots.label"
       class="radio-group label"
     >
-      <legend>
-        <slot name="label">
-          <h3>
-            <t
-              v-if="labelKey"
-              :k="labelKey"
-            />
-            <template v-else-if="label">
-              {{ label }}
-            </template>
-            <i
-              v-if="tooltipKey"
-              v-clean-tooltip="t(tooltipKey)"
-              class="icon icon-info icon-lg"
-            />
-            <i
-              v-else-if="tooltip"
-              v-clean-tooltip="tooltip"
-              class="icon icon-info icon-lg"
-            />
-          </h3>
-        </slot>
-      </legend>
+      <slot name="label">
+        <h3>
+          <t
+            v-if="labelKey"
+            :k="labelKey"
+          />
+          <template v-else-if="label">
+            {{ label }}
+          </template>
+          <i
+            v-if="tooltipKey"
+            v-clean-tooltip="t(tooltipKey)"
+            class="icon icon-info icon-lg"
+          />
+          <i
+            v-else-if="tooltip"
+            v-clean-tooltip="tooltip"
+            class="icon icon-info icon-lg"
+          />
+        </h3>
+      </slot>
     </div>
 
     <!-- Group -->
     <div
       ref="radioGroup"
       role="radiogroup"
-      :aria-label="radioGroupLabel"
+      :aria-label="radioGroupAriaLabel"
+      :aria-describedby="radioGroupAriaDescribedBy"
+      :aria-activedescendant="ariaActiveDescendant"
       class="radio-group"
       :class="{'row':row}"
-      tabindex="0"
+      :tabindex="isDisabled ? -1 : 0"
+      :aria-disabled="isDisabled"
       @keydown.down.prevent.stop="clickNext(1)"
       @keydown.up.prevent.stop="clickNext(-1)"
       @keydown.space.enter.stop.prevent
@@ -257,6 +296,7 @@ export default defineComponent({
             :name="name"
             :value="value"
             :label="option.label"
+            :radio-option-id="option.radioOptionId"
             :description="option.description"
             :val="option.value"
             :disabled="isDisabled"
@@ -268,7 +308,7 @@ export default defineComponent({
         </slot>
       </div>
     </div>
-  </fieldset>
+  </div>
 </template>
 
 <style lang='scss'>

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

@@ -91,4 +91,21 @@ describe('toggleSwitch.vue', () => {
     expect(wrapper.emitted('update:value')).toHaveLength(1);
     expect(wrapper.emitted('update:value')[0][0]).toBe(offValue);
   });
+
+  it('adds focus class when input is focused', async() => {
+    const wrapper = shallowMount(ToggleSwitch);
+
+    await wrapper.find('input').trigger('focus');
+
+    expect(wrapper.find('.slider').classes()).toContain('focus');
+  });
+
+  it('removes focus class when input is blurred', async() => {
+    const wrapper = shallowMount(ToggleSwitch);
+
+    await wrapper.find('input').trigger('focus');
+    await wrapper.find('input').trigger('blur');
+
+    expect(wrapper.find('.slider').classes()).not.toContain('focus');
+  });
 });

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

@@ -54,6 +54,11 @@ export default defineComponent({
       switchInput.value?.removeEventListener('focus', focus);
       switchInput.value?.removeEventListener('blur', blur);
     });
+
+    return {
+      switchChrome,
+      switchInput,
+    };
   },
 
   data() {

package/rancher-components/LabeledTooltip/LabeledTooltip.vue

@@ -26,7 +26,15 @@ export default defineComponent({
     hover: {
       type:    Boolean,
       default: true
-    }
+    },
+    /**
+     * Inherited global identifier prefix for tests
+     * Define a term based on the parent component to avoid conflicts on multiple components
+     */
+    componentTestid: {
+      type:    String,
+      default: 'labeledTooltip-info-icon'
+    },
   },
   computed: {
     iconClass(): string {
@@ -64,6 +72,7 @@ export default defineComponent({
         :class="{'hover':!value, [iconClass]: true}"
         class="icon status-icon"
         tabindex="0"
+        :data-testid="componentTestid"
       />
     </template>
     <template v-else>

package/rancher-components/RcButton/RcButton.vue

@@ -15,6 +15,7 @@ const buttonRoles: { role: keyof ButtonRoleProps, className: string }[] = [
   { role: 'secondary', className: 'role-secondary' },
   { role: 'tertiary', className: 'role-tertiary' },
   { role: 'link', className: 'role-link' },
+  { role: 'multiAction', className: 'role-multi-action' },
   { role: 'ghost', className: 'role-ghost' },
 ];
 
@@ -50,7 +51,7 @@ defineExpose({ focus });
   <button
     ref="RcFocusTarget"
     role="button"
-    :class="{ ...buttonClass, ...($attrs.class || { }) }"
+    :class="{ ...buttonClass }"
   >
     <slot name="before">
       <!-- Empty Content -->

package/rancher-components/RcButton/types.ts

@@ -9,6 +9,7 @@ export type ButtonRoleProps = {
   secondary?: boolean;
   tertiary?: boolean;
   link?: boolean;
+  multiAction?: boolean;
   ghost?: boolean;
 }