Fix hardware status expand button accessiblity
- Aria label added to provide screen readers context for button action
- Title added to chevron icon to display label on hover
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: Ib8c0cef36d7aa61e0b4b0ac7fdabffb7e8a0a17a
diff --git a/src/components/Mixins/TableRowExpandMixin.js b/src/components/Mixins/TableRowExpandMixin.js
new file mode 100644
index 0000000..fad63c6
--- /dev/null
+++ b/src/components/Mixins/TableRowExpandMixin.js
@@ -0,0 +1,17 @@
+const TableRowExpandMixin = {
+ data() {
+ return {
+ expandRowLabel: this.$t('global.table.expandTableRow')
+ };
+ },
+ methods: {
+ toggleRowDetails(row) {
+ row.toggleDetails();
+ row.detailsShowing
+ ? (this.expandRowLabel = this.$t('global.table.expandTableRow'))
+ : (this.expandRowLabel = this.$t('global.table.collapseTableRow'));
+ }
+ }
+};
+
+export default TableRowExpandMixin;
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index b730b81..0015abc 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -62,8 +62,10 @@
"informational": "Informational"
},
"table": {
+ "collapseTableRow": "Collapse table row",
"emptyMessage": "No items available",
"emptySearchMessage": "No items match the search query",
+ "expandTableRow": "Expand table row",
"fromDate": "From date",
"items": "%{count} items",
"itemsPerPage": "Items per page",
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
index a5f5711..91aeac7 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
@@ -12,9 +12,10 @@
<b-button
variant="link"
data-test-id="hardwareStatus-button-expandBmc"
- @click="row.toggleDetails"
+ :aria-label="expandRowLabel"
+ @click="toggleRowDetails(row)"
>
- <icon-chevron />
+ <icon-chevron :title="expandRowLabel" />
</b-button>
</template>
@@ -138,11 +139,13 @@
import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
import StatusIcon from '@/components/Global/StatusIcon';
+
+import TableRowExpandMixin from '@/components/Mixins/TableRowExpandMixin';
import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
export default {
components: { IconChevron, PageSection, StatusIcon },
- mixins: [TableDataFormatterMixin],
+ mixins: [TableRowExpandMixin, TableDataFormatterMixin],
data() {
return {
fields: [
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
index eb4c000..8fdcbfd 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
@@ -12,9 +12,10 @@
<b-button
variant="link"
data-test-id="hardwareStatus-button-expandChassis"
- @click="row.toggleDetails"
+ :aria-label="expandRowLabel"
+ @click="toggleRowDetails(row)"
>
- <icon-chevron />
+ <icon-chevron :title="expandRowLabel" />
</b-button>
</template>
@@ -67,11 +68,13 @@
import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
import StatusIcon from '@/components/Global/StatusIcon';
+
+import TableRowExpandMixin from '@/components/Mixins/TableRowExpandMixin';
import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
export default {
components: { IconChevron, PageSection, StatusIcon },
- mixins: [TableDataFormatterMixin],
+ mixins: [TableRowExpandMixin, TableDataFormatterMixin],
data() {
return {
fields: [
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
index ec7c163..b72a6cc 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
@@ -34,9 +34,10 @@
<b-button
variant="link"
data-test-id="hardwareStatus-button-expandDimms"
- @click="row.toggleDetails"
+ :aria-label="expandRowLabel"
+ @click="toggleRowDetails(row)"
>
- <icon-chevron />
+ <icon-chevron :title="expandRowLabel" />
</b-button>
</template>
@@ -74,10 +75,16 @@
import TableSortMixin from '@/components/Mixins/TableSortMixin';
import Search from '@/components/Global/Search';
import SearchFilterMixin from '@/components/Mixins/SearchFilterMixin';
+import TableRowExpandMixin from '@/components/Mixins/TableRowExpandMixin';
export default {
components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
- mixins: [TableDataFormatterMixin, TableSortMixin, SearchFilterMixin],
+ mixins: [
+ TableRowExpandMixin,
+ TableDataFormatterMixin,
+ TableSortMixin,
+ SearchFilterMixin
+ ],
data() {
return {
fields: [
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
index 98e2fb5..f35ab9d 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
@@ -34,9 +34,10 @@
<b-button
variant="link"
data-test-id="hardwareStatus-button-expandFans"
- @click="row.toggleDetails"
+ :aria-label="expandRowLabel"
+ @click="toggleRowDetails(row)"
>
- <icon-chevron />
+ <icon-chevron :title="expandRowLabel" />
</b-button>
</template>
@@ -73,10 +74,16 @@
import TableSortMixin from '@/components/Mixins/TableSortMixin';
import Search from '@/components/Global/Search';
import SearchFilterMixin from '@/components/Mixins/SearchFilterMixin';
+import TableRowExpandMixin from '@/components/Mixins/TableRowExpandMixin';
export default {
components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
- mixins: [TableDataFormatterMixin, TableSortMixin, SearchFilterMixin],
+ mixins: [
+ TableRowExpandMixin,
+ TableDataFormatterMixin,
+ TableSortMixin,
+ SearchFilterMixin
+ ],
data() {
return {
fields: [
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
index 0eb2f60..51b579e 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
@@ -34,9 +34,10 @@
<b-button
variant="link"
data-test-id="hardwareStatus-button-expandPowerSupplies"
- @click="row.toggleDetails"
+ :aria-label="expandRowLabel"
+ @click="toggleRowDetails(row)"
>
- <icon-chevron />
+ <icon-chevron :title="expandRowLabel" />
</b-button>
</template>
@@ -96,10 +97,16 @@
import TableSortMixin from '@/components/Mixins/TableSortMixin';
import Search from '@/components/Global/Search';
import SearchFilterMixin from '@/components/Mixins/SearchFilterMixin';
+import TableRowExpandMixin from '@/components/Mixins/TableRowExpandMixin';
export default {
components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
- mixins: [TableDataFormatterMixin, TableSortMixin, SearchFilterMixin],
+ mixins: [
+ TableRowExpandMixin,
+ TableDataFormatterMixin,
+ TableSortMixin,
+ SearchFilterMixin
+ ],
data() {
return {
fields: [
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
index 5a27cca..6b2648b 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
@@ -33,9 +33,10 @@
<b-button
variant="link"
data-test-id="hardwareStatus-button-expandProcessors"
- @click="row.toggleDetails"
+ :aria-label="expandRowLabel"
+ @click="toggleRowDetails(row)"
>
- <icon-chevron />
+ <icon-chevron :title="expandRowLabel" />
</b-button>
</template>
<!-- Health -->
@@ -103,10 +104,16 @@
import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
import Search from '@/components/Global/Search';
import SearchFilterMixin from '@/components/Mixins/SearchFilterMixin';
+import TableRowExpandMixin from '@/components/Mixins/TableRowExpandMixin';
export default {
- components: { PageSection, IconChevron, TableCellCount, StatusIcon, Search },
- mixins: [TableDataFormatterMixin, TableSortMixin, SearchFilterMixin],
+ components: { IconChevron, PageSection, StatusIcon, Search, TableCellCount },
+ mixins: [
+ TableRowExpandMixin,
+ TableDataFormatterMixin,
+ TableSortMixin,
+ SearchFilterMixin
+ ],
data() {
return {
fields: [
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
index 4bcab51..724f1c8 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
@@ -12,9 +12,10 @@
<b-button
variant="link"
data-test-id="hardwareStatus-button-expandSystem"
- @click="row.toggleDetails"
+ :aria-label="expandRowLabel"
+ @click="toggleRowDetails(row)"
>
- <icon-chevron />
+ <icon-chevron :title="expandRowLabel" />
</b-button>
</template>
@@ -79,11 +80,13 @@
import IconChevron from '@carbon/icons-vue/es/chevron--down/20';
import StatusIcon from '@/components/Global/StatusIcon';
+
+import TableRowExpandMixin from '@/components/Mixins/TableRowExpandMixin';
import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
export default {
components: { IconChevron, PageSection, StatusIcon },
- mixins: [TableDataFormatterMixin],
+ mixins: [TableRowExpandMixin, TableDataFormatterMixin],
data() {
return {
fields: [