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