Add label to table checkboxes
- Span with class sr-only added to table checkboxes
- Verified passed DAP
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: If6dff636762e6cc70c2f5b345827aa1385a31c97
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 5c03e39..3e2a09c 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -68,6 +68,8 @@
"fromDate": "From date",
"items": "%{count} items",
"itemsPerPage": "Items per page",
+ "selectAll": "Select all",
+ "selectItem": "Select item",
"selectedItems":"%{filterCount} of %{count} items",
"toDate": "To date",
"viewAll": "View all"
diff --git a/src/views/AccessControl/Ldap/TableRoleGroups.vue b/src/views/AccessControl/Ldap/TableRoleGroups.vue
index 5104c23..41ab3b1 100644
--- a/src/views/AccessControl/Ldap/TableRoleGroups.vue
+++ b/src/views/AccessControl/Ldap/TableRoleGroups.vue
@@ -49,14 +49,18 @@
:indeterminate="tableHeaderCheckboxIndeterminate"
:disabled="!isServiceEnabled"
@change="onChangeHeaderCheckbox($refs.table)"
- />
+ >
+ <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+ </b-form-checkbox>
</template>
<template #cell(checkbox)="row">
<b-form-checkbox
v-model="row.rowSelected"
:disabled="!isServiceEnabled"
@change="toggleSelectRow($refs.table, row.index)"
- />
+ >
+ <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+ </b-form-checkbox>
</template>
<!-- table actions column -->
diff --git a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
index d57bc22..b341001 100644
--- a/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
+++ b/src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue
@@ -45,14 +45,18 @@
data-test-id="localUserManagement-checkbox-tableHeaderCheckbox"
:indeterminate="tableHeaderCheckboxIndeterminate"
@change="onChangeHeaderCheckbox($refs.table)"
- />
+ >
+ <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+ </b-form-checkbox>
</template>
<template #cell(checkbox)="row">
<b-form-checkbox
v-model="row.rowSelected"
data-test-id="localUserManagement-checkbox-toggleSelectRow"
@change="toggleSelectRow($refs.table, row.index)"
- />
+ >
+ <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+ </b-form-checkbox>
</template>
<!-- table actions column -->
diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue
index 0c079ba..c620c2b 100644
--- a/src/views/Health/EventLogs/EventLogs.vue
+++ b/src/views/Health/EventLogs/EventLogs.vue
@@ -70,14 +70,18 @@
data-test-id="eventLogs-checkbox-selectAll"
:indeterminate="tableHeaderCheckboxIndeterminate"
@change="onChangeHeaderCheckbox($refs.table)"
- />
+ >
+ <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+ </b-form-checkbox>
</template>
<template #cell(checkbox)="row">
<b-form-checkbox
v-model="row.rowSelected"
:data-test-id="`eventLogs-checkbox-selectRow-${row.index}`"
@change="toggleSelectRow($refs.table, row.index)"
- />
+ >
+ <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+ </b-form-checkbox>
</template>
<!-- Severity column -->
diff --git a/src/views/Health/Sensors/Sensors.vue b/src/views/Health/Sensors/Sensors.vue
index e1cea82..c9da6ab 100644
--- a/src/views/Health/Sensors/Sensors.vue
+++ b/src/views/Health/Sensors/Sensors.vue
@@ -61,13 +61,17 @@
v-model="tableHeaderCheckboxModel"
:indeterminate="tableHeaderCheckboxIndeterminate"
@change="onChangeHeaderCheckbox($refs.table)"
- />
+ >
+ <span class="sr-only">{{ $t('global.table.selectAll') }}</span>
+ </b-form-checkbox>
</template>
<template #cell(checkbox)="row">
<b-form-checkbox
v-model="row.rowSelected"
@change="toggleSelectRow($refs.table, row.index)"
- />
+ >
+ <span class="sr-only">{{ $t('global.table.selectItem') }}</span>
+ </b-form-checkbox>
</template>
<template #cell(status)="{ value }">