Accessibility Implementation -Violations 1060 vue3

src/components/Global/Search.vue

@@ -2,16 +2,21 @@
   <div class="search-global">
     <BFormGroup
       :label="$t('global.form.search')"
-      :label-for="`searchInput-${_uid}`"
+      :aria-label="`search-bar-${label}`"
+      :label-for="`searchInput-${label}`"
       label-class="invisible"
       class="mb-2"
     >
-      <BInputGroup size="md" class="align-items-center">
+      <BInputGroup
+        :aria-label="`${$t('global.form.search')}-${label}`"
+        size="md"
+        class="align-items-center"
+      >
         <BInputGroupText class="group-text">
           <icon-search class="search-icon" />
         </BInputGroupText>
         <BFormInput
-          :id="`searchInput-${_uid}`"
+          :id="`searchInput-${label}`"
           ref="searchInput"
           v-model="filter"
           class="search-input"
@@ -55,6 +60,10 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  label: {
+    type: String,
+    default: '',
+  },
 });
 
 const filter = ref('');

src/components/Global/TableDateFilter.vue

@@ -5,8 +5,9 @@
         :label="$t('global.table.fromDate')"
         label-for="input-from-date"
         class="mr-3 my-0 w-100"
+        aria-label="from-date"
       >
-        <BInputGroup>
+        <BInputGroup aria-label="from-date-input">
           <BFormInput
             id="input-from-date"
             v-model="fromDate"
@@ -25,8 +26,9 @@
         :label="$t('global.table.toDate')"
         label-for="input-to-date"
         class="my-0 w-100"
+        aria-label="to-date"
       >
-        <BInputGroup>
+        <BInputGroup aria-label="to-date-input">
           <BFormInput
             id="input-to-date"
             v-model="toDate"

src/components/Global/UtilitiesFunction.js

@@ -0,0 +1,9 @@
+const utilitiesFunctions = () => {
+  const spaceFilter = (value) => {
+    return value.toLowerCase().replace(/\s+/g, '-');
+  };
+
+  return { spaceFilter };
+};
+
+export default utilitiesFunctions;

src/views/HardwareStatus/Inventory/InventoryFabricAdapters.vue

@@ -107,7 +107,7 @@
         <b-form-checkbox
           v-if="hasIdentifyLed(row.item.identifyLed)"
           v-model="row.item.identifyLed"
-          name="switch"
+          :name="'switch-' + row.item.id"
           switch
           :disabled="serverStatus"
           @change="toggleIdentifyLedValue(row.item)"
@@ -158,7 +158,7 @@ import useTableRowExpandComposable from '../../../components/Composables/useTabl
 import useDataFormatterGlobal from '../../../components/Composables/useDataFormatterGlobal';
 import useSearchFilterComposable from '../../../components/Composables/useSearchFilterComposable';
 import { useI18n } from 'vue-i18n';
-import { reactive, ref, computed, watch, onBeforeMount } from 'vue';
+import { reactive, ref, computed, watch, onBeforeMount, nextTick } from 'vue';
 import stores from '../../../store';
 import eventBus from '@/eventBus';
 import useToast from '@/components/Composables/useToastComposable';
@@ -188,37 +188,49 @@ const fields = reactive([
     label: '',
     tdClass: 'table-row-expand',
     sortable: false,
+    thAttr: { scope: 'col' },
+    tdAttr: { scope: null },
   },
   {
     key: 'name',
     label: t('pageInventory.table.name'),
     formatter: dataFormatter,
     sortable: true,
+    thAttr: { scope: 'col' },
+    tdAttr: { scope: null },
   },
   {
     key: 'health',
     label: t('pageInventory.table.health'),
     formatter: dataFormatter,
     sortable: true,
     tdClass: 'text-nowrap',
+    thAttr: { scope: 'col' },
+    tdAttr: { scope: null },
   },
   {
     key: 'status',
     label: t('pageUserManagement.table.status'),
     formatter: dataFormatter,
     sortable: true,
     tdClass: 'text-nowrap',
+    thAttr: { scope: 'col' },
+    tdAttr: { scope: null },
   },
   {
     key: 'locationNumber',
     label: t('pageInventory.table.locationNumber'),
     formatter: dataFormatter,
     sortable: true,
+    thAttr: { scope: 'col' },
+    tdAttr: { scope: null },
   },
   {
     key: 'identifyLed',
     label: t('pageInventory.table.identifyLed'),
     formatter: dataFormatter,
+    thAttr: { scope: 'col' },
+    tdAttr: { scope: null },
   },
 ]);
 
@@ -282,6 +294,20 @@ watch(
   },
 );
 
+watch(
+  () => fabricAdapters,
+  () => {
+    nextTick(() => {
+      document
+        .querySelectorAll('.b-table-sortable-column svg')
+        .forEach((svg) => {
+          svg.setAttribute('aria-hidden', 'true');
+        });
+    });
+  },
+  { deep: true },
+);
+
 function onFiltered(filteredItems) {
   searchTotalFilteredRows.value = filteredItems.length;
 }

src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue

@@ -104,7 +104,7 @@
         <b-form-checkbox
           v-if="hasIdentifyLed(row.item.identifyLed)"
           v-model="row.item.identifyLed"
-          name="switch"
+          :name="'switch-' + row.item.id"
           :disabled="serverStatus"
           switch
           @change="toggleIdentifyLedValue(row.item)"
@@ -156,7 +156,7 @@ import PageSection from '@/components/Global/PageSection.vue';
 import TableCellCount from '@/components/Global/TableCellCount.vue';
 import InfoTooltip from '@/components/Global/InfoTooltip.vue';
 import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
-import { reactive, ref, computed, watch, onBeforeMount } from 'vue';
+import { reactive, ref, computed, watch, onBeforeMount, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import useDataFormatterGlobal from '../../../components/Composables/useDataFormatterGlobal';
 import useTableRowExpandComposable from '../../../components/Composables/useTableRowExpandComposable';
@@ -190,37 +190,49 @@ const fields = reactive([
     key: 'expandRow',
     label: '',
     tdClass: 'table-row-expand',
+    thAttr: { scope: 'col' },
+    tdAttr: { scope: null },
   },
   {
     key: 'name',
     label: t('pageInventory.table.name'),
     formatter: dataFormatter,
     sortable: true,
+    thAttr: { scope: 'col' },
+    tdAttr: { scope: null },
   },
   {
     key: 'health',
     label: t('pageInventory.table.health'),
     formatter: dataFormatter,
     sortable: true,
     tdClass: 'text-nowrap',
+    thAttr: { scope: 'col' },
+    tdAttr: { scope: null },
   },
   {
     key: 'status',
     label: t('pageUserManagement.table.status'),
     formatter: dataFormatter,
     sortable: true,
     tdClass: 'text-nowrap',
+    thAttr: { scope: 'col' },
+    tdAttr: { scope: null },
   },
   {
     key: 'locationNumber',
     label: t('pageInventory.table.locationNumber'),
     formatter: dataFormatter,
     sortable: true,
+    thAttr: { scope: 'col' },
+    tdAttr: { scope: null },
   },
   {
     key: 'identifyLed',
     label: t('pageInventory.table.identifyLed'),
     formatter: dataFormatter,
+    thAttr: { scope: 'col' },
+    tdAttr: { scope: null },
   },
 ]);
 
@@ -285,6 +297,8 @@ const tableHeaders = computed(() => {
       label: t('pageInventory.table.partNumber'),
       formatter: dataFormatter,
       sortable: true,
+      thAttr: { scope: 'col' },
+      tdAttr: { scope: null },
     });
   }
   return tempFields;
@@ -302,6 +316,20 @@ watch(
   },
 );
 
+watch(
+  () => items,
+  () => {
+    nextTick(() => {
+      document
+        .querySelectorAll('.b-table-sortable-column svg')
+        .forEach((svg) => {
+          svg.setAttribute('aria-hidden', 'true');
+        });
+    });
+  },
+  { deep: true },
+);
+
 function onFiltered(filteredItems) {
   searchTotalFilteredRows.value = filteredItems.length;
 }

src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue

@@ -82,7 +82,7 @@
         <b-form-checkbox
           v-if="hasIdentifyLed(row.item.identifyLed)"
           v-model="row.item.identifyLed"
-          name="switch"
+          :name="'switch-' + row.item.id"
           switch
           @change="toggleIdentifyLedValue(row.item)"
         >
@@ -133,7 +133,7 @@
 import PageSection from '@/components/Global/PageSection.vue';
 import InfoTooltip from '@/components/Global/InfoTooltip.vue';
 import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
-import { reactive, ref, computed, onBeforeMount } from 'vue';
+import { reactive, ref, computed, onBeforeMount, watch, nextTick } from 'vue';
 import useDataFormatterGlobal from '../../../components/Composables/useDataFormatterGlobal';
 import useTableRowExpandComposable from '../../../components/Composables/useTableRowExpandComposable';
 import stores from '../../../store';
@@ -155,32 +155,44 @@ const fields = reactive([
     key: 'expandRow',
     label: '',
     tdClass: 'table-row-expand',
+    thAttr: { scope: 'col' },
+    tdAttr: { scope: null },
   },
   {
     key: 'name',
     label: t('pageInventory.table.name'),
     formatter: dataFormatter,
+    thAttr: { scope: 'col' },
+    tdAttr: { scope: null },
   },
   {
     key: 'health',
     label: t('pageInventory.table.health'),
     formatter: dataFormatter,
+    thAttr: { scope: 'col' },
+    tdAttr: { scope: null },
   },
   {
     key: 'status',
     label: t('pageUserManagement.table.status'),
     formatter: dataFormatter,
     tdClass: 'text-nowrap',
+    thAttr: { scope: 'col' },
+    tdAttr: { scope: null },
   },
   {
     key: 'locationNumber',
     label: t('pageInventory.table.locationNumber'),
     formatter: dataFormatter,
+    thAttr: { scope: 'col' },
+    tdAttr: { scope: null },
   },
   {
     key: 'identifyLed',
     label: t('pageInventory.table.identifyLed'),
     formatter: dataFormatter,
+    thAttr: { scope: 'col' },
+    tdAttr: { scope: null },
   },
 ]);
 
@@ -205,6 +217,20 @@ const items = computed(() => {
   }
 });
 
+watch(
+  () => items,
+  () => {
+    nextTick(() => {
+      document
+        .querySelectorAll('.b-table-sortable-column svg')
+        .forEach((svg) => {
+          svg.setAttribute('aria-hidden', 'true');
+        });
+    });
+  },
+  { deep: true },
+);
+
 function toggleIdentifyLedValue(row) {
   bmcStore
     .updateIdentifyLedValue({ uri: row.uri, identifyLed: row.identifyLed })