commit b53e086876138f065bd0d976432a7eb75d254cd6
author Dixsie Wolmers <dixsie@ibm.com> Tue Sep 08 14:13:38 2020 -0500
committer Derick Montague <derick.montague@ibm.com> Mon Oct 05 20:10:23 2020 +0000
tree 410f5d7947211ff93c295a9ea366be9ac4879cdb
parent 741f375e22d8e3df13e22a015b9fd4a7999f6903

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/views/Health/HardwareStatus/HardwareStatusTableStystem.vue

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: [