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/HardwareStatusTableProcessors.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/HardwareStatusTableProcessors.vue')
-rw-r--r-- | src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue | 15 |
1 files changed, 11 insertions, 4 deletions
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: [ |