@rancher/shell 3.0.4 → 3.0.5-rc.2

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 '';
     }
   },
 
@@ -232,10 +270,13 @@ export default defineComponent({
     <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
@@ -255,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"

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;
 }
 

package/rancher-components/RcDropdown/RcDropdown.vue

@@ -24,9 +24,18 @@ import { ref } from 'vue';
 import { useClickOutside } from '@shell/composables/useClickOutside';
 import { useDropdownContext } from '@components/RcDropdown/useDropdownContext';
 
-defineProps<{
-  ariaLabel?: string
-}>();
+import type { Placement } from 'floating-vue';
+
+withDefaults(
+  defineProps<{
+    // eslint-disable-next-line vue/require-default-prop
+    ariaLabel?: string;
+    // eslint-disable-next-line vue/require-default-prop
+    distance?: number;
+    placement?: Placement;
+  }>(),
+  { placement: 'bottom-end' }
+);
 
 const emit = defineEmits(['update:open']);
 
@@ -49,7 +58,7 @@ useClickOutside(dropdownTarget, () => showMenu(false));
 
 const applyShow = () => {
   registerDropdownCollection(dropdownTarget.value);
-  setFocus();
+  setFocus('down');
 };
 
 </script>
@@ -61,7 +70,8 @@ const applyShow = () => {
     :shown="isMenuOpen"
     :auto-hide="false"
     :container="popperContainer"
-    :placement="'bottom-end'"
+    :placement="placement"
+    :distance="distance"
     @apply-show="applyShow"
   >
     <slot name="default">
@@ -78,7 +88,8 @@ const applyShow = () => {
         dropdown-menu-collection
         :aria-label="ariaLabel || 'Dropdown Menu'"
         @keydown="handleKeydown"
-        @keydown.down="setFocus()"
+        @keydown.down.prevent="setFocus('down')"
+        @keydown.up.prevent="setFocus('up')"
       >
         <slot name="dropdownCollection">
           <!--Empty slot content-->
@@ -110,6 +121,7 @@ const applyShow = () => {
         }
 
         .v-popper__inner {
+          overflow: unset;
           padding: 10px 0 10px 0;
         }
       }

package/rancher-components/RcDropdown/RcDropdownItem.vue

@@ -2,56 +2,12 @@
 /**
  * An item for a dropdown menu. Used in conjunction with RcDropdown.
  */
-import { inject } from 'vue';
-import { DropdownContext, defaultContext } from './types';
+import { useDropdownItem } from '@components/RcDropdown/useDropdownItem';
 
 const props = defineProps({ disabled: Boolean });
 const emits = defineEmits(['click']);
 
-const { close, dropdownItems } = inject<DropdownContext>('dropdownContext') || defaultContext;
-
-/**
- * Handles keydown events to navigate between dropdown items.
- * @param {KeyboardEvent} e - The keydown event.
- */
-const handleKeydown = (e: KeyboardEvent) => {
-  const activeItem = document.activeElement;
-
-  const activeIndex = dropdownItems.value.indexOf(activeItem || new HTMLElement());
-
-  if (activeIndex < 0) {
-    return;
-  }
-
-  const shouldAdvance = e.key === 'ArrowDown';
-
-  const newIndex = findNewIndex(shouldAdvance, activeIndex, dropdownItems.value);
-
-  if (dropdownItems.value[newIndex] instanceof HTMLElement) {
-    dropdownItems.value[newIndex].focus();
-  }
-};
-
-/**
- * Finds the new index for the dropdown item based on the key pressed.
- * @param shouldAdvance - Whether to advance to the next or previous item.
- * @param activeIndex - Current active index.
- * @param itemsArr - Array of dropdown items.
- * @returns The new index.
- */
-const findNewIndex = (shouldAdvance: boolean, activeIndex: number, itemsArr: Element[]) => {
-  const newIndex = shouldAdvance ? activeIndex + 1 : activeIndex - 1;
-
-  if (newIndex > itemsArr.length - 1) {
-    return 0;
-  }
-
-  if (newIndex < 0) {
-    return itemsArr.length - 1;
-  }
-
-  return newIndex;
-};
+const { handleKeydown, close, handleActivate } = useDropdownItem();
 
 const handleClick = (e: MouseEvent) => {
   if (props.disabled) {
@@ -62,15 +18,6 @@ const handleClick = (e: MouseEvent) => {
   close();
 };
 
-/**
- * Handles keydown events to activate the dropdown item.
- * @param e - The keydown event.
- */
-const handleActivate = (e: KeyboardEvent) => {
-  if (e?.target instanceof HTMLElement) {
-    e?.target?.click();
-  }
-};
 </script>
 
 <template>
@@ -83,7 +30,7 @@ const handleActivate = (e: KeyboardEvent) => {
     :aria-disabled="disabled || false"
     @click.stop="handleClick"
     @keydown.enter.space="handleActivate"
-    @keydown.up.down.stop="handleKeydown"
+    @keydown.up.down.prevent.stop="handleKeydown"
   >
     <slot name="before">
       <!--Empty slot content-->

package/rancher-components/RcDropdown/RcDropdownItemCheckbox.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+/**
+ * An item for a dropdown menu. Used in conjunction with RcDropdown.
+ */
+import { Checkbox as RcCheckbox } from '@components/Form/Checkbox';
+import { useDropdownItem } from '@components/RcDropdown/useDropdownItem';
+
+const props = defineProps({ modelValue: Boolean, disabled: Boolean });
+const emits = defineEmits(['click']);
+
+const { handleKeydown, handleActivate } = useDropdownItem();
+
+const handleClick = () => {
+  if (props.disabled) {
+    return;
+  }
+
+  emits('click', !props.modelValue);
+};
+</script>
+
+<template>
+  <div
+    ref="dropdownMenuItem"
+    dropdown-menu-item
+    tabindex="-1"
+    role="menuitemcheckbox"
+    :disabled="disabled || null"
+    :aria-disabled="disabled || false"
+    @click.stop="handleClick"
+    @keydown.enter.space="handleActivate"
+    @keydown.up.down.prevent.stop="handleKeydown"
+  >
+    <rc-checkbox :value="modelValue">
+      <template #label>
+        <slot name="default">
+          <!--Empty slot content-->
+        </slot>
+      </template>
+    </rc-checkbox>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  [dropdown-menu-item] {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    padding: 9px 8px;
+    margin: 0 9px;
+    border-radius: 4px;
+
+    &:hover {
+      cursor: pointer;
+      background-color: var(--dropdown-hover-bg);
+    }
+    &:focus-visible, &:focus {
+      @include focus-outline;
+      outline-offset: 0;
+    }
+    &[disabled] {
+      color: var(--disabled-text);
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
+</style>

package/rancher-components/RcDropdown/RcDropdownItemSelect.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+/**
+ * An item for a dropdown menu. Used in conjunction with RcDropdown.
+ */
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { useDropdownItem } from '@components/RcDropdown/useDropdownItem';
+import { ref } from 'vue';
+
+type LabeledSelectComponent = {
+  focusSearch: () => void;
+};
+
+defineProps({
+  modelValue: {
+    type:    String,
+    default: ''
+  },
+  disabled: Boolean,
+  options:  {
+    type: Array,
+    default() {
+      return [];
+    }
+  },
+});
+const emits = defineEmits(['click', 'select']);
+
+const { handleKeydown, handleActivate } = useDropdownItem();
+
+const dropdownMenuItem = ref<HTMLDivElement | null>(null);
+const menuItemSelect = ref<LabeledSelectComponent | null>(null);
+
+const handleClick = () => {
+  menuItemSelect?.value?.focusSearch();
+};
+
+const focusMenuItem = () => {
+  dropdownMenuItem?.value?.focus();
+};
+</script>
+
+<template>
+  <div
+    ref="dropdownMenuItem"
+    dropdown-menu-item
+    tabindex="-1"
+    role="menuitem"
+    :disabled="disabled || null"
+    :aria-disabled="disabled || false"
+    @click.stop="handleClick"
+    @keydown.enter.space="handleActivate"
+    @keydown.up.down.prevent.stop="handleKeydown"
+  >
+    <LabeledSelect
+      ref="menuItemSelect"
+      :value="modelValue"
+      :label="t('wm.containerLogs.range.label')"
+      :options="options"
+      :clearable="false"
+      placement="top"
+      @keydown.enter.stop
+      @update:value="emits('select', $event)"
+      @on-close="focusMenuItem"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  [dropdown-menu-item] {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    padding: 9px 8px;
+    margin: 0 9px;
+    border-radius: 4px;
+
+    &:hover {
+      cursor: pointer;
+      background-color: var(--dropdown-hover-bg);
+    }
+    &:focus-visible, &:focus {
+      @include focus-outline;
+      outline-offset: 0;
+    }
+    &[disabled] {
+      color: var(--disabled-text);
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
+</style>

package/rancher-components/RcDropdown/RcDropdownTrigger.vue

@@ -35,8 +35,18 @@ defineExpose({ focus });
     @keydown.enter.space="handleKeydown"
     @click="showMenu(true)"
   >
+    <template #before>
+      <slot name="before">
+        <!-- Empty Content -->
+      </slot>
+    </template>
     <slot name="default">
       <!--Empty slot content-->
     </slot>
+    <template #after>
+      <slot name="after">
+        <!-- Empty Content -->
+      </slot>
+    </template>
   </RcButton>
 </template>

package/rancher-components/RcDropdown/index.ts

@@ -1,5 +1,7 @@
 export { default as RcDropdown } from './RcDropdown.vue';
 export { default as RcDropdownItem } from './RcDropdownItem.vue';
+export { default as RcDropdownItemCheckbox } from './RcDropdownItemCheckbox.vue';
+export { default as RcDropdownItemSelect } from './RcDropdownItemSelect.vue';
 export { default as RcDropdownSeparator } from './RcDropdownSeparator.vue';
 export { default as RcDropdownTrigger } from './RcDropdownTrigger.vue';
 export { default as RcDropdownMenu } from './RcDropdownMenu.vue';

package/rancher-components/RcDropdown/useDropdownCollection.ts

@@ -10,6 +10,7 @@ export const useDropdownCollection = () => {
   const dropdownItems = ref<Element[]>([]);
   const dropdownContainer = ref<HTMLElement | null>(null);
   const firstDropdownItem = ref<HTMLElement | null>(null);
+  const lastDropdownItem = ref<HTMLElement | null>(null);
 
   /**
    * Registers the dropdown container and initializes dropdown items.
@@ -22,6 +23,12 @@ export const useDropdownCollection = () => {
       if (dropdownItems.value[0] instanceof HTMLElement) {
         firstDropdownItem.value = dropdownItems.value[0];
       }
+
+      const lastItem = dropdownItems.value[dropdownItems.value.length - 1];
+
+      if (lastItem instanceof HTMLElement) {
+        lastDropdownItem.value = lastItem;
+      }
     }
   };
 
@@ -40,6 +47,7 @@ export const useDropdownCollection = () => {
   return {
     dropdownItems,
     firstDropdownItem,
+    lastDropdownItem,
     dropdownContainer,
     registerDropdownCollection,
   };