Fixed icon or text only button accessibility
- Add sr-only element to icon only buttons
- Removed title from text only buttons
Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: Ica57dec70401c04a9d7506306a406fe394e52113
diff --git a/src/views/AccessControl/ClientSessions/ClientSessions.vue b/src/views/AccessControl/ClientSessions/ClientSessions.vue
index f15c63c..1921c86 100644
--- a/src/views/AccessControl/ClientSessions/ClientSessions.vue
+++ b/src/views/AccessControl/ClientSessions/ClientSessions.vue
@@ -73,6 +73,7 @@
:value="action.value"
:title="action.title"
:row-data="row.item"
+ :btn-icon-only="false"
:data-test-id="`sessionLogs-button-deleteRow-${row.index}`"
@click-table-action="onTableRowAction($event, row.item)"
></table-row-action>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
index 29a6679..2fdcb2e 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue
@@ -13,12 +13,12 @@
<b-button
variant="link"
data-test-id="hardwareStatus-button-expandBmc"
- :aria-label="expandRowLabel"
:title="expandRowLabel"
class="btn-icon-only"
@click="toggleRowDetails(row)"
>
<icon-chevron />
+ <span class="sr-only">{{ expandRowLabel }}</span>
</b-button>
</template>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
index 231f7c6..2bf11f62 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue
@@ -13,12 +13,12 @@
<b-button
variant="link"
data-test-id="hardwareStatus-button-expandChassis"
- :aria-label="expandRowLabel"
:title="expandRowLabel"
class="btn-icon-only"
@click="toggleRowDetails(row)"
>
<icon-chevron />
+ <span class="sr-only">{{ expandRowLabel }}</span>
</b-button>
</template>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
index 70df346..ca9e949 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableDimmSlot.vue
@@ -35,12 +35,12 @@
<b-button
variant="link"
data-test-id="hardwareStatus-button-expandDimms"
- :aria-label="expandRowLabel"
:title="expandRowLabel"
class="btn-icon-only"
@click="toggleRowDetails(row)"
>
<icon-chevron />
+ <span class="sr-only">{{ expandRowLabel }}</span>
</b-button>
</template>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
index e16495b..10b14a4 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableFans.vue
@@ -35,12 +35,12 @@
<b-button
variant="link"
data-test-id="hardwareStatus-button-expandFans"
- :aria-label="expandRowLabel"
:title="expandRowLabel"
class="btn-icon-only"
@click="toggleRowDetails(row)"
>
<icon-chevron />
+ <span class="sr-only">{{ expandRowLabel }}</span>
</b-button>
</template>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
index 7b4e5a1..3de6919 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTablePowerSupplies.vue
@@ -35,12 +35,12 @@
<b-button
variant="link"
data-test-id="hardwareStatus-button-expandPowerSupplies"
- :aria-label="expandRowLabel"
:title="expandRowLabel"
class="btn-icon-only"
@click="toggleRowDetails(row)"
>
<icon-chevron />
+ <span class="sr-only">{{ expandRowLabel }}</span>
</b-button>
</template>
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
index 6e2ebda..2f956a9 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableProcessors.vue
@@ -34,12 +34,12 @@
<b-button
variant="link"
data-test-id="hardwareStatus-button-expandProcessors"
- :aria-label="expandRowLabel"
:title="expandRowLabel"
class="btn-icon-only"
@click="toggleRowDetails(row)"
>
<icon-chevron />
+ <span class="sr-only">{{ expandRowLabel }}</span>
</b-button>
</template>
<!-- Health -->
diff --git a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
index a89dacf..d408701 100644
--- a/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
+++ b/src/views/Health/HardwareStatus/HardwareStatusTableStystem.vue
@@ -13,12 +13,12 @@
<b-button
variant="link"
data-test-id="hardwareStatus-button-expandSystem"
- :aria-label="expandRowLabel"
:title="expandRowLabel"
class="btn-icon-only"
@click="toggleRowDetails(row)"
>
<icon-chevron />
+ <span class="sr-only">{{ expandRowLabel }}</span>
</b-button>
</template>