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