diff options
9 files changed, 78 insertions, 22 deletions
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: [ |