dashboard-shell-shell 3.0.2-rc.105 → 3.0.5-logTest.1

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');
+  });
 });

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({
@@ -100,13 +102,21 @@ export default defineComponent({
     row: {
       type:    Boolean,
       default: false
+    },
+
+    flexDirection: {
+      type:    String,
+      default: 'row'
     }
   },
 
   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 +130,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 +165,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 +242,46 @@ export default defineComponent({
 </script>
 
 <template>
-  <fieldset>
+  <div style="display: flex;">
     <!-- Label -->
     <div
       v-if="label || labelKey || tooltip || tooltipKey || $slots.label"
-      class="radio-group label"
+      class="radio-group label radio-group-labelBox"
     >
-      <legend>
-        <slot name="label">
-          <span class="radio-group-title">
-            <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"
-            />
-          </span>
-        </slot>
-      </legend>
+      <slot name="label">
+        <span class="radio-group-title">
+          <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"
+          />
+        </span>
+      </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"
+      :class="{'row':row, 'flexDirection': flexDirection === 'column'}"
+      :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 +301,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,10 +313,13 @@ export default defineComponent({
         </slot>
       </div>
     </div>
-  </fieldset>
+  </div>
 </template>
 
 <style lang='scss'>
+.flexDirection {
+  flex-direction: column;
+}
 .radio-group {
   &:focus, &:focus-visible {
     border: none;
@@ -298,8 +346,11 @@ export default defineComponent({
   }
 }
 .radio-group-title{
-  font-size: 14px;
-  margin-bottom: 15px;
+  font-size: 12px !important;
+  margin-bottom: 0px !important;
   display: inline-block;
 }
+.radio-group-labelBox {
+  width: 160px;
+}
 </style>

package/rancher-components/Form/TextArea/TextAreaAutoGrow.vue

@@ -165,10 +165,14 @@ export default defineComponent({
         return;
       }
 
+      // el.style.height = '1px';
+
       const border = parseInt(getComputedStyle(el).getPropertyValue('borderTopWidth'), 10) || 0 + parseInt(getComputedStyle(el).getPropertyValue('borderBottomWidth'), 10) || 0;
       const neu = Math.max(this.minHeight, Math.min(el.scrollHeight + border, this.maxHeight));
 
       el.style.overflowY = el.scrollHeight > neu ? 'auto' : 'hidden';
+      // el.style.height = `${ neu }px`;
+
       this.curHeight = neu;
     }
   }

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

@@ -29,6 +29,11 @@ export default defineComponent({
       type:    String,
       default: '',
     },
+
+    disabled: {
+      type:    Boolean,
+      default: false,
+    },
   },
 
   emits: ['update:value'],
@@ -84,8 +89,12 @@ export default defineComponent({
 </script>
 
 <template>
-  <span class="toggle-container">
+  <span
+    class="toggle-container"
+    :class="{'toggle-disabled': disabled}"
+  >
     <span
+      style="width: 160px;"
       class="label no-select hand"
       :class="{ active: !state}"
       @click="toggle(false)"
@@ -126,6 +135,18 @@ $toggle-height: 16px;
   span:last-child {
     padding-left: 6px;
   }
+
+  &.toggle-disabled {
+    pointer-events: none;
+
+    .slider {
+      background-color: var(--checkbox-disabled-bg);
+
+      &:before {
+        opacity: 0.6;
+      }
+    }
+  }
 }
 /* The switch - the box around the slider */
 .switch {

package/rancher-components/LabeledTooltip/LabeledTooltip.vue

@@ -73,6 +73,7 @@ export default defineComponent({
         class="icon status-icon"
         tabindex="0"
         :data-testid="componentTestid"
+        role="tooltip"
       />
     </template>
     <template v-else>
@@ -122,8 +123,8 @@ export default defineComponent({
     &.null {
 
         .status-icon {
-          top: 5px;
-          right: -20px;
+          top: 8px !important;
+          right: 25px !important;
         }
     }
 
@@ -145,6 +146,35 @@ export default defineComponent({
     }
 }
 
+.labeled-select{
+  .labeled-tooltip{
+    &.null {
+        .status-icon {
+          top: 10px !important;
+          right: 25px !important;
+        }
+    }
+
+    &.error {
+
+        .status-icon {
+          top: 9px !important;
+          right: 20px;
+        }
+    }
+  }
+}
+.labeled-input{
+  .labeled-tooltip{
+    &.null {
+        .status-icon {
+          top: 10px !important;
+          right: 10px !important;
+        }
+    }
+  }
+}
+
 // Ensure code blocks inside tootips don't look awful
 .v-popper__popper.v-popper--theme-tooltip {
   .v-popper__inner {

package/rancher-components/RcButton/RcButton.vue

@@ -51,7 +51,7 @@ defineExpose({ focus });
   <button
     ref="RcFocusTarget"
     role="button"
-    :class="{ ...buttonClass, ...($attrs.class || { }) }"
+    :class="{ ...buttonClass }"
   >
     <slot name="before">
       <!-- Empty Content -->

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

@@ -0,0 +1,98 @@
+import { mount } from '@vue/test-utils';
+import { defineComponent } from 'vue';
+import { RcDropdown } from '@components/RcDropdown';
+
+const vDropdownMock = defineComponent({
+  template: `
+    <div class="popper">
+      <slot name="popper" />
+    </div>
+  `,
+});
+
+describe('component: RcDropdown.vue', () => {
+  it('should not change the height if the dropdown fits within the screen', async() => {
+    Object.defineProperty(window, 'innerHeight', { value: 800 });
+
+    const wrapper = mount(RcDropdown, { global: { components: { 'v-dropdown': vDropdownMock } } });
+
+    const dropdownTarget = wrapper.find('[dropdown-menu-collection]').element as HTMLElement;
+
+    Object.defineProperty(dropdownTarget, 'getBoundingClientRect', {
+      value: () => ({
+        top:    200,
+        bottom: 600,
+        height: 400,
+      }),
+      writable: true,
+    });
+
+    await wrapper.findComponent(vDropdownMock).vm.$emit('apply-show');
+    await wrapper.vm.$nextTick();
+
+    expect(dropdownTarget.style.height).toBe('');
+  });
+
+  it('should apply correct height if dropdown exceeds the top edge', async() => {
+    Object.defineProperty(window, 'innerHeight', { value: 800 });
+
+    const wrapper = mount(RcDropdown, { global: { components: { 'v-dropdown': vDropdownMock } } });
+
+    const dropdownTarget = wrapper.find('[dropdown-menu-collection]').element as HTMLElement;
+
+    Object.defineProperty(dropdownTarget, 'getBoundingClientRect', {
+      value: () => ({
+        top:    2, // Exceeds (top - padding)
+        bottom: 300,
+        height: 298,
+      }),
+    });
+
+    await wrapper.findComponent(vDropdownMock).vm.$emit('apply-show');
+    await wrapper.vm.$nextTick();
+
+    expect(dropdownTarget.style.height).toBe('268px');
+  });
+
+  it('should apply correct height if dropdown exceeds the bottom edge', async() => {
+    Object.defineProperty(window, 'innerHeight', { value: 925 });
+
+    const wrapper = mount(RcDropdown, { global: { components: { 'v-dropdown': vDropdownMock } } });
+
+    const dropdownTarget = wrapper.find('[dropdown-menu-collection]').element as HTMLElement;
+
+    Object.defineProperty(dropdownTarget, 'getBoundingClientRect', {
+      value: () => ({
+        top:    200,
+        bottom: 920, // Exceeds (bottom + padding)
+        height: 720,
+      }),
+    });
+
+    await wrapper.findComponent(vDropdownMock).vm.$emit('apply-show');
+    await wrapper.vm.$nextTick();
+
+    expect(dropdownTarget.style.height).toBe('693px');
+  });
+
+  it('should apply correct height if dropdown exceeds both top and bottom edges', async() => {
+    Object.defineProperty(window, 'innerHeight', { value: 400 });
+
+    const wrapper = mount(RcDropdown, { global: { components: { 'v-dropdown': vDropdownMock } } });
+
+    const dropdownTarget = wrapper.find('[dropdown-menu-collection]').element as HTMLElement;
+
+    Object.defineProperty(dropdownTarget, 'getBoundingClientRect', {
+      value: () => ({
+        top:    -800, // Exceeds top
+        bottom: 800, // Exceeds bottom
+        height: 1600,
+      }),
+    });
+
+    await wrapper.findComponent(vDropdownMock).vm.$emit('apply-show');
+    await wrapper.vm.$nextTick();
+
+    expect(dropdownTarget.style.height).toBe('368px');
+  });
+});

package/rancher-components/RcDropdown/RcDropdown.vue

@@ -47,6 +47,7 @@ const {
   provideDropdownContext,
   registerDropdownCollection,
   handleKeydown,
+  setDropdownDimensions
 } = useDropdownContext(emit);
 
 provideDropdownContext();
@@ -57,6 +58,7 @@ const dropdownTarget = ref(null);
 useClickOutside(dropdownTarget, () => showMenu(false));
 
 const applyShow = () => {
+  setDropdownDimensions(dropdownTarget.value);
   registerDropdownCollection(dropdownTarget.value);
   setFocus('down');
 };
@@ -137,6 +139,7 @@ const applyShow = () => {
         }
 
         .v-popper__inner {
+          overflow: unset;
           /* padding: 10px 0 10px 0; */
           padding: 0px;
           /* min-width: 145px; */
@@ -146,6 +149,9 @@ const applyShow = () => {
   }
 
   .dropdownTarget {
+    overflow: auto;
+    padding: 3px 0; // Need padding at top and bottom in order to show the focus border for the notification
+
     &:focus-visible, &:focus {
       outline: none;
     }

package/rancher-components/RcDropdown/RcDropdownItem.vue

@@ -2,56 +2,17 @@
 /**
  * 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,
+  scrollIntoView,
+} = useDropdownItem();
 
 const handleClick = (e: MouseEvent) => {
   if (props.disabled) {
@@ -62,15 +23,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>
@@ -84,6 +36,7 @@ const handleActivate = (e: KeyboardEvent) => {
     @click.stop="handleClick"
     @keydown.enter.space="handleActivate"
     @keydown.up.down.prevent.stop="handleKeydown"
+    @focusin="scrollIntoView"
   >
     <slot name="before">
       <!--Empty slot content-->