From b53e086876138f065bd0d976432a7eb75d254cd6 Mon Sep 17 00:00:00 2001
From: Dixsie Wolmers <dixsie@ibm.com>
Date: Tue, 8 Sep 2020 14:13:38 -0500
Subject: 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
---
 src/components/Mixins/TableRowExpandMixin.js            | 17 +++++++++++++++++
 src/locales/en-US.json                                  |  2 ++
 .../HardwareStatus/HardwareStatusTableBmcManager.vue    |  9 ++++++---
 .../HardwareStatus/HardwareStatusTableChassis.vue       |  9 ++++++---
 .../HardwareStatus/HardwareStatusTableDimmSlot.vue      | 13 ++++++++++---
 .../Health/HardwareStatus/HardwareStatusTableFans.vue   | 13 ++++++++++---
 .../HardwareStatus/HardwareStatusTablePowerSupplies.vue | 13 ++++++++++---
 .../HardwareStatus/HardwareStatusTableProcessors.vue    | 15 +++++++++++----
 .../HardwareStatus/HardwareStatusTableStystem.vue       |  9 ++++++---
 9 files changed, 78 insertions(+), 22 deletions(-)
 create mode 100644 src/components/Mixins/TableRowExpandMixin.js

diff --git a/src/components/Mixins/TableRowExpandMixin.js b/src/components/Mixins/TableRowExpandMixin.js
new file mode 100644
index 00000000..fad63c61
--- /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 b730b817..0015abc7 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 a5f57112..91aeac78 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 PageSection from '@/components/Global/PageSection';
 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 eb4c000a..8fdcbfde 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 PageSection from '@/components/Global/PageSection';
 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 ec7c1637..b72a6cc2 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 TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin
 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 98e2fb5e..f35ab9d2 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 TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin
 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 0eb2f608..51b579ed 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 TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin
 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 5a27cca7..6b2648b5 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 TableSortMixin from '@/components/Mixins/TableSortMixin';
 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 4bcab516..724f1c8a 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 PageSection from '@/components/Global/PageSection';
 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: [
-- 
cgit v1.2.3