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

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/BadgeState/BadgeState.vue

@@ -63,60 +63,41 @@ export default defineComponent({
 </script>
 
 <template>
-  <span :class="['badge-state', bg]">
-    <i
-      v-if="icon"
-      class="icon"
-      :class="{[icon]: true, 'mr-5': !!msg}"
-    />{{ msg }}
-  </span>
+  <div style="display: flex;flex-direction: row;align-items: center;font-size: 12px;">
+    <div :class="{ [bg]: true }"></div>
+    <span style="margin-left: 5px;">{{ msg }}</span>
+    
+  </div>
 </template>
-
 <style lang="scss" scoped>
-  .badge-state {
-    align-items: center;
-    display: inline-flex;
-    padding: 2px 10px;
-    border: 1px solid transparent;
-    border-radius: 20px;
-
-    &.bg-info {
-      border-color: var(--info);
-    }
-
-    &.bg-error {
-      border-color: var(--error);
-    }
-
-    &.bg-warning {
-      border-color: var(--warning);
-    }
-
-    // Successful states are de-emphasized by using [text-]color instead of background-color
-    &.bg-success {
-      color: var(--success);
-      background: transparent;
-      border-color: var(--success);
-    }
-
-    // Added badge-disabled instead of bg-disabled since bg-disabled is used in other places with !important styling, an investigation is needed to make the naming consistent
-    &.badge-disabled {
-      color: var(--badge-state-disabled-text);
-      background-color: var( --badge-state-disabled-bg);
-      border: 1px solid var(--badge-state-disabled-border);
-    }
+  .bg-error {
+    width: 10px; /* 圆点的宽度 */
+    height: 10px; /* 圆点的高度 */
+    background-color: #DD0C17; /* 圆点的颜色 */
+    border-radius: 50%; /* 设置为圆形 */
   }
-</style>
-<style lang="scss">
-  // TODO: #6005
-  // Investigate why this is here.. I don't think that styles for sortable table should belong here
-  .sortable-table TD .badge-state {
-    @include clip;
-    display: inline-block;
-    max-width: 100%;
-    position: relative;
-    max-width: 110px;
-    font-size: .85em;
-    vertical-align: middle;
+  .bg-darker {
+    width: 10px; /* 圆点的宽度 */
+    height: 10px; /* 圆点的高度 */
+    background-color: #DD0C17; /* 圆点的颜色 */
+    border-radius: 50%; /* 设置为圆形 */
+  }
+  .bg-success {
+    width: 10px; /* 圆点的宽度 */
+    height: 10px; /* 圆点的高度 */
+    background-color: #95F204 !important; /* 圆点的颜色 */
+    border-radius: 50%; /* 设置为圆形 */
+  }
+  .bg-warning {
+    width: 10px; /* 圆点的宽度 */
+    height: 10px; /* 圆点的高度 */
+    background-color: #DAC342; /* 圆点的颜色 */
+    border-radius: 50%; /* 设置为圆形 */
+  }
+  .bg-info {
+    width: 10px; /* 圆点的宽度 */
+    height: 10px; /* 圆点的高度 */
+    background-color: #1890FF; /* 圆点的颜色 */
+    border-radius: 50%; /* 设置为圆形 */
   }
 </style>

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,35 @@ 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;
-    }
+
+      let labelStr = this.label
+
+      if (labelStr === 'waiting for api to be available') {
+        labelStr = '等待api可用'
+      } else if (labelStr === 'Cluster agent is not connected') {
+        labelStr = '集群agent未连接'
+      }
+
+      return !(typeof labelStr === 'string') ? stringify(labelStr) : undefined;
+    },
   },
   methods: { nlToBr }
 });
@@ -66,8 +98,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 +112,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 +131,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 +152,7 @@ export default defineComponent({
         <i
           data-testid="banner-close"
           class="icon icon-close closer-icon"
+          :alt="t('generic.banners.altCloseBanner')"
         />
       </div>
     </div>
@@ -133,6 +173,7 @@ $icon-size: 24px;
   margin: 0px 0px 20px 0px;
   position: relative;
   width: 100%;
+  min-height: 32px;
   color: var(--body-text);
 
   &__icon {
@@ -170,13 +211,15 @@ $icon-size: 24px;
   }
 
   &__content {
-    padding: 9px 10px; 
+    padding: 2px 10px; 
     transition: all 0.2s ease;
     line-height: 12px;
     width: 100%;
     border-left: solid $left-border-size transparent;
     display: flex;
     gap: 3px;
+    min-height: 32px;
+    align-items: center;
     word-wrap:break-word; 
     word-break:break-all; 
 
@@ -196,8 +239,8 @@ $icon-size: 24px;
     }
 
     .info & {
-      background: var(--info-banner-bg);
-      // background: #f2f2f2;
+      // background: var(--info-banner-bg);
+      background: #f2f2f2;
       border-color: var(--info);
     }
 

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