dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-test.10

package/components/form/WorkloadPorts.vue

@@ -280,145 +280,163 @@ export default {
         'show-ipam': showIpam,
       }"
     >
-      <div class="service-type">
-        <LabeledSelect
-          v-model:value="row._serviceType"
-          :mode="mode"
-          :label="t('workload.container.ports.createService')"
-          :options="serviceTypes"
-          :disabled="canNotAccessService"
-          :tooltip="serviceTypeTooltip"
-          @update:value="queueUpdate"
-        />
-      </div>
-
-      <div class="portName">
-        <LabeledInput
-          ref="name"
-          v-model:value="row.name"
-          :mode="mode"
-          :label="t('workload.container.ports.name')"
-          @update:value="queueUpdate"
-        />
-      </div>
+    
+      <div class="row mt-20">
+        <div
+          v-if="!row._showHost && row._serviceType !== 'LoadBalancer' && row._serviceType !== 'NodePort'"
+          class="add-host col"
+        >
+          <button
+            :disabled="mode==='view'"
+            type="button"
+            class="btn btn-sm role-tertiary"
+            @click="row._showHost = true"
+          >
+            {{ t('workloadPorts.addHost') }}
+          </button>
+        </div>
 
-      <div class="port">
-        <LabeledInput
-          v-model:value.number="row.containerPort"
-          :mode="mode"
-          type="number"
-          min="1"
-          max="65535"
-          placeholder="e.g. 8080"
-          :label="t('workload.container.ports.containerPort')"
-          :required="row._serviceType === 'LoadBalancer' "
-          @update:value="queueUpdate"
-        />
-      </div>
+        <div
+          v-if="showRemove"
+          class="remove"
+        >
+          <button
+            type="button"
+            class="btn role-link"
+            @click="remove(idx)"
+          >
+            {{ t('workloadPorts.remove') }}
+          </button>
+        </div>
 
-      <div class="protocol col">
-        <LabeledSelect
-          v-model:value="row.protocol"
-          :mode="mode"
-          :options="workloadPortOptions"
-          :multiple="false"
-          :label="t('workload.container.ports.protocol')"
-          @update:value="queueUpdate"
-        />
       </div>
 
-      <div
-        v-if="row._showHost"
-        class="targetPort"
-      >
-        <LabeledInput
-          ref="port"
-          v-model:value.number="row.hostPort"
-          :mode="mode"
-          type="number"
-          min="1"
-          max="65535"
-          placeholder="e.g. 80"
-          :label="t('workload.container.ports.hostPort')"
-          @update:value="queueUpdate"
-        />
+      <div class="row">
+        <div class="service-type col span-6">
+          <LabeledSelect
+            v-model:value="row._serviceType"
+            :mode="mode"
+            :label="t('workload.container.ports.createService')"
+            :options="serviceTypes"
+            :disabled="canNotAccessService"
+            :tooltip="serviceTypeTooltip"
+            @update:value="queueUpdate"
+          />
+        </div>
+    
+        <div class="portName col span-6">
+          <LabeledInput
+            ref="name"
+            v-model:value="row.name"
+            :mode="mode"
+            :label="t('workload.container.ports.name')"
+            @update:value="queueUpdate"
+          />
+        </div>
       </div>
 
-      <div
-        v-if="row._showHost"
-        class="hostip"
-      >
-        <LabeledInput
-          ref="port"
-          v-model:value="row.hostIP"
-          :mode="mode"
-          placeholder="e.g. 1.1.1.1"
-          :label="t('workload.container.ports.hostIP')"
-          @update:value="queueUpdate"
-        />
+      <div class="row">
+        <div class="port col span-6">
+          <LabeledInput
+            v-model:value.number="row.containerPort"
+            :mode="mode"
+            type="number"
+            min="1"
+            max="65535"
+            placeholder="e.g. 8080"
+            :label="t('workload.container.ports.containerPort')"
+            :required="row._serviceType === 'LoadBalancer' "
+            @update:value="queueUpdate"
+          />
+        </div>
+    
+        <div class="protocol col span-6">
+          <LabeledSelect
+            v-model:value="row.protocol"
+            :mode="mode"
+            :options="workloadPortOptions"
+            :multiple="false"
+            :label="t('workload.container.ports.protocol')"
+            @update:value="queueUpdate"
+          />
+        </div>
       </div>
 
-      <div
-        v-if="!row._showHost && row._serviceType !== 'LoadBalancer' && row._serviceType !== 'NodePort'"
-        class="add-host"
-      >
-        <button
-          :disabled="mode==='view'"
-          type="button"
-          class="btn btn-sm role-tertiary"
-          @click="row._showHost = true"
+      <div class="row">
+        <div
+          v-if="row._showHost"
+          class="targetPort col span-6"
         >
-          {{ t('workloadPorts.addHost') }}
-        </button>
-      </div>
-
-      <div v-if="row._serviceType === 'LoadBalancer' || row._serviceType === 'NodePort'">
-        <LabeledInput
-          ref="port"
-          v-model:value.number="row._listeningPort"
-          type="number"
-          :mode="mode"
-          :label="t('workload.container.ports.listeningPort')"
-          :required="row._serviceType === 'LoadBalancer' "
-          @update:value="queueUpdate"
-        />
-      </div>
-
-      <div v-if="showIpam && row._serviceType === 'LoadBalancer' && row.protocol === 'TCP'">
-        <div v-if="idx === ipamIndex">
-          <LabeledSelect
-            v-model:value="row._ipam"
+          <LabeledInput
+            ref="port"
+            v-model:value.number="row.hostPort"
             :mode="mode"
-            :options="ipamOptions"
-            :label="t('servicesPage.harvester.ipam.label')"
-            :disabled="mode === 'edit'"
+            type="number"
+            min="1"
+            max="65535"
+            placeholder="e.g. 80"
+            :label="t('workload.container.ports.hostPort')"
             @update:value="queueUpdate"
           />
         </div>
-        <div v-else>
-          <LabeledSelect
-            v-model:value="rows[ipamIndex]._ipam"
+    
+        <div
+          v-if="row._showHost"
+          class="hostip col span-6"
+        >
+          <LabeledInput
+            ref="port"
+            v-model:value="row.hostIP"
             :mode="mode"
-            :options="ipamOptions"
-            :label="t('servicesPage.harvester.ipam.label')"
-            :disabled="true"
+            placeholder="e.g. 1.1.1.1"
+            :label="t('workload.container.ports.hostIP')"
             @update:value="queueUpdate"
           />
         </div>
       </div>
 
-      <div
-        v-if="showRemove"
-        class="remove"
-      >
-        <button
-          type="button"
-          class="btn role-link"
-          @click="remove(idx)"
+      <div class="row">
+        <div
+          v-if="row._serviceType === 'LoadBalancer' || row._serviceType === 'NodePort'"
+          class="col"
         >
-          {{ t('workloadPorts.remove') }}
-        </button>
+          <LabeledInput
+            ref="port"
+            v-model:value.number="row._listeningPort"
+            type="number"
+            :mode="mode"
+            :label="t('workload.container.ports.listeningPort')"
+            :required="row._serviceType === 'LoadBalancer' "
+            @update:value="queueUpdate"
+          />
+        </div>
       </div>
+
+      <div class="row">
+        <div v-if="showIpam && row._serviceType === 'LoadBalancer' && row.protocol === 'TCP'">
+          <div v-if="idx === ipamIndex">
+            <LabeledSelect
+              v-model:value="row._ipam"
+              :mode="mode"
+              :options="ipamOptions"
+              :label="t('servicesPage.harvester.ipam.label')"
+              :disabled="mode === 'edit'"
+              @update:value="queueUpdate"
+            />
+          </div>
+          <div v-else>
+            <LabeledSelect
+              v-model:value="rows[ipamIndex]._ipam"
+              :mode="mode"
+              :options="ipamOptions"
+              :label="t('servicesPage.harvester.ipam.label')"
+              :disabled="true"
+              @update:value="queueUpdate"
+            />
+          </div>
+        </div>
+      </div>
+
     </div>
     <div
       v-if="showAdd"
@@ -447,11 +465,11 @@ $checkbox: 75;
   }
 }
 .ports-headers, .ports-row{
-  display: grid;
-  grid-template-columns: 28% 28% 15% 10% 75px 0.5fr;
-  grid-column-gap: $column-gutter;
-  margin-bottom: 10px;
-  align-items: center;
+  // display: grid;
+  // grid-template-columns: 28% 28% 15% 10% 75px 0.5fr;
+  // grid-column-gap: $column-gutter;
+  // margin-bottom: 20px;
+  // align-items: center;
   & .port{
     display: flex;
     justify-content: space-between;
@@ -475,6 +493,7 @@ $checkbox: 75;
 }
 
 .add-host {
+  margin-right: 20px;
   justify-self: center;
 }
 
@@ -492,6 +511,7 @@ $checkbox: 75;
 
 .remove BUTTON {
   padding: 0px;
+  min-width: auto;
 }
 
 .ports-row INPUT {

package/components/form/__tests__/ArrayList.test.ts

@@ -80,6 +80,38 @@ describe('the ArrayList', () => {
     expect(arrayListButtons).toHaveLength(0);
   });
 
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', async() => {
+    const value = ['string 0', 'string 1', 'string 2'];
+
+    const wrapper = mount(ArrayList, {
+      props: {
+        value:      ['string 0', 'string 1', 'string 2'],
+        mode:       _EDIT,
+        showHeader: true,
+        a11yLabel:  'some-a11y-label',
+        title:      'some-title'
+      },
+    });
+
+    const mainContainer = wrapper.find('.array-list-main-container');
+    const colHeaderGroup = wrapper.find('.array-list-header-group');
+    const valueGroup = wrapper.find('[data-testid="array-list-box0"]');
+    const firstValueInput = wrapper.find('[data-testid="array-list-input-0"]');
+    const rowRemove = wrapper.find('[data-testid="array-list-remove-item-0"]');
+    const rowAdd = wrapper.find('[data-testid="array-list-button"]');
+
+    expect(wrapper.vm.rows[0]).toStrictEqual({ value: value[0] });
+
+    expect(mainContainer.attributes('role')).toBe('group');
+    expect(mainContainer.attributes('aria-label')).toBe('some-title');
+    expect(colHeaderGroup.attributes('role')).toBe('group');
+    expect(colHeaderGroup.find('label').text()).toBe('Value');
+    expect(valueGroup.attributes('role')).toBe('group');
+    expect(firstValueInput.attributes('aria-label')).toBe('some-a11y-label %generic.ariaLabel.genericRow%');
+    expect(rowRemove.attributes('aria-label')).toBe('%generic.ariaLabel.remove%');
+    expect(rowAdd.attributes('aria-label')).toBe('%generic.ariaLabel.genericAddRow%');
+  });
+
   describe('onPaste', () => {
     it('should emit value with updated row text', () => {
       const text = 'test';

package/components/form/__tests__/ColorInput.test.ts

@@ -24,4 +24,39 @@ describe('colorInput.vue', () => {
     expect(colorWrapper.classes()).not.toContain('disabled');
     expect(Object.keys(colorInput.attributes())).not.toContain('disabled');
   });
+
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', () => {
+    const label = 'some-label';
+    const describeById = 'some-id';
+
+    const wrapper = shallowMount(ColorInput, {
+      props: { label },
+      attrs: { 'aria-describedby': describeById }
+    });
+
+    const colorInput = wrapper.find('input');
+    const ariaDisabled = colorInput.attributes('aria-disabled');
+    const ariaLabel = colorInput.attributes('aria-label');
+    const ariaDescribedBy = colorInput.attributes('aria-describedby');
+
+    expect(ariaDisabled).toBe('false');
+    expect(ariaLabel).toBe(label);
+    expect(ariaDescribedBy).toBe(describeById);
+  });
+
+  it('a11y: adding aria-label ($attrs) from parent should override label-based aria-label', () => {
+    const inputLabel = 'some-label';
+    const overrideLabel = 'some-override-label';
+
+    const wrapper = shallowMount(ColorInput, {
+      props: { label: inputLabel },
+      attrs: { 'aria-label': overrideLabel }
+    });
+
+    const colorInput = wrapper.find('input');
+    const ariaLabel = colorInput.attributes('aria-label');
+
+    expect(ariaLabel).toBe(overrideLabel);
+    expect(ariaLabel).not.toBe(inputLabel);
+  });
 });

package/components/form/__tests__/KeyValue.test.ts

@@ -176,4 +176,40 @@ describe('component: KeyValue', () => {
     expect(firstKeyInput.element.value).toBe('testkey1');
     expect(firstValueInput.element.value).toBe('testvalue1');
   });
+
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', async() => {
+    const value = [{ key: 'testkey1', value: 'testvalue1' }];
+
+    const wrapper = mount(KeyValue, {
+      props: {
+        value,
+        mode:           'edit',
+        valueMultiline: false,
+        asMap:          false,
+        readAllowed:    true
+      }
+    });
+
+    const mainContainer = wrapper.find('.kv-container');
+    const keyGroup = wrapper.find('.kv-item.key');
+    const valueGroup = wrapper.find('.kv-item.value');
+    const firstKeyInput = wrapper.find('[data-testid="input-kv-item-key-0"]');
+    const firstValueInput = wrapper.find('[data-testid="input-kv-item-value-0"]');
+    const rowRemove = wrapper.find('[data-testid="remove-column-0"] button');
+    const rowAdd = wrapper.find('[data-testid="add_row_item_button"]');
+    const readKeyValueFromFile = wrapper.find('[data-testid="read_all_key_value_button"]');
+
+    expect(wrapper.vm.rows[0].key).toBe(value[0].key);
+    expect(wrapper.vm.rows[0].value).toBe(value[0].value);
+
+    expect(mainContainer.attributes('aria-label')).toBe('%generic.ariaLabel.keyValue%');
+    expect(mainContainer.attributes('role')).toBe('grid');
+    expect(keyGroup.attributes('role')).toBe('gridcell');
+    expect(valueGroup.attributes('role')).toBe('gridcell');
+    expect(firstKeyInput.attributes('aria-label')).toBe('%generic.ariaLabel.key%');
+    expect(firstValueInput.attributes('aria-label')).toBe('%generic.ariaLabel.value%');
+    expect(rowRemove.attributes('aria-label')).toBe('%generic.ariaLabel.remove%');
+    expect(rowAdd.attributes('aria-label')).toBe('%generic.ariaLabel.addKeyValue%');
+    expect(readKeyValueFromFile.attributes('aria-label')).toBe('%generic.ariaLabel.readKeyValue%');
+  });
 });

package/components/form/__tests__/LabeledSelect.test.ts

@@ -168,9 +168,9 @@ describe('component: LabeledSelect', () => {
 
       await wrapper.trigger('click');
 
-      const dropdownOpen = wrapper.find('.vs--open');
+      const dropdownOpen = wrapper.vm.isOpen;
 
-      expect(dropdownOpen.exists()).toBe(isOpen);
+      expect(dropdownOpen).toBe(isOpen);
     });
   });
 
@@ -208,10 +208,87 @@ describe('component: LabeledSelect', () => {
       const wrapper = mount(ParentComponent);
 
       // https://test-utils.vuejs.org/guide/essentials/event-handling#Asserting-the-arguments-of-the-event
+      await wrapper.trigger('click');
       await wrapper.find('input').trigger('focus');
       await wrapper.find('.vs__dropdown-option').trigger('click');
 
       expect(wrapper.vm.$data.myValue).toStrictEqual(expectation);
     });
   });
+
+  it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', async() => {
+    const label = 'Foo';
+    const value = 'foo';
+    const ariaDescribedById = 'some-described-by-id';
+    const itemLabel = 'some-label';
+
+    const wrapper = mount(LabeledSelect, {
+      props: {
+        value,
+        label:   itemLabel,
+        options: [
+          { label, value },
+        ],
+        required: true
+      },
+      attrs: { 'aria-describedby': ariaDescribedById }
+    });
+
+    const labeledSelectContainer = wrapper.find('.labeled-select');
+    const ariaExpanded = labeledSelectContainer.attributes('aria-expanded');
+    const ariaDescribedBy = labeledSelectContainer.attributes('aria-describedby');
+    const ariaRequired = labeledSelectContainer.attributes('aria-required');
+    const containerId = labeledSelectContainer.attributes('id');
+    const labelFor = wrapper.find('label').attributes('for');
+
+    const vSelectInput = wrapper.find('.v-select');
+
+    expect(ariaExpanded).toBe('false');
+    expect(ariaDescribedBy).toBe(ariaDescribedById);
+    expect(ariaRequired).toBe('true');
+    expect(containerId).toBe(wrapper.vm.labeledSelectLabelId);
+    expect(labelFor).toBe(wrapper.vm.labeledSelectLabelId);
+
+    // make sure it's hardcoded to a "neutral" value so that
+    // in the current architecture of the component
+    // screen readers won't pick up the default "Select option" aria-label
+    // from the library
+    expect(vSelectInput.attributes('aria-label')).toBe('-');
+  });
+
+  it('pressing space key while focused on search should not prevent event propagation', async() => {
+    const value = 'value-1';
+    const options = [
+      { label: 'label-1', value: 'value-1' },
+      { label: 'label-2', value: 'value-2' },
+    ];
+
+    const wrapper = mount(LabeledSelect, {
+      props: {
+        value,
+        label:      'some-label',
+        options,
+        searchable: true,
+        loading:    false,
+      }
+    });
+
+    const mockEvent = { preventDefault: jest.fn() };
+    const spyFocus = jest.spyOn(wrapper.vm, 'focusSearch');
+    const spyPreventDefault = jest.spyOn(mockEvent, 'preventDefault');
+
+    const input = wrapper.find('.labeled-select');
+
+    // open labeled-select first
+    await input.trigger('keydown.enter');
+
+    // mimic pressing space on search box inside v-select
+    const search = input.find('input');
+
+    await search.trigger('keydown.space', mockEvent);
+
+    // eslint-disable-next-line
+    expect(spyFocus).toHaveBeenCalled();
+    expect(spyPreventDefault).not.toHaveBeenCalled();
+  });
 });