diff options
author | Dixsie Wolmers <dixsie@ibm.com> | 2020-09-08 22:13:38 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-10-05 23:10:23 +0300 |
commit | b53e086876138f065bd0d976432a7eb75d254cd6 (patch) | |
tree | 410f5d7947211ff93c295a9ea366be9ac4879cdb /src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue | |
parent | 741f375e22d8e3df13e22a015b9fd4a7999f6903 (diff) | |
download | webui-vue-b53e086876138f065bd0d976432a7eb75d254cd6.tar.xz |
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
Diffstat (limited to 'src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue')
-rw-r--r-- | src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue | 9 |
1 files changed, 6 insertions, 3 deletions
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: [ |