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/components/Global/ButtonBackToTop.vue b/src/components/Global/ButtonBackToTop.vue
index 95e7404..9160c7b 100644
--- a/src/components/Global/ButtonBackToTop.vue
+++ b/src/components/Global/ButtonBackToTop.vue
@@ -5,10 +5,10 @@
:class="{ 'show-btn': showButton }"
variant="secondary"
:title="$t('global.ariaLabel.scrollToTop')"
- :aria-label="$t('global.ariaLabel.scrollToTop')"
@click="scrollToTop"
>
<icon-up-to-top />
+ <span class="sr-only">{{ $t('global.ariaLabel.scrollToTop') }}</span>
</b-button>
</template>
diff --git a/src/components/Global/FormFile.vue b/src/components/Global/FormFile.vue
index eaed445..4457a31 100644
--- a/src/components/Global/FormFile.vue
+++ b/src/components/Global/FormFile.vue
@@ -23,8 +23,11 @@
class="px-2 ml-auto"
:disabled="disabled"
@click="file = null"
- ><icon-close :title="$t('global.fileUpload.clearSelectedFile')"
- /></b-button>
+ ><icon-close :title="$t('global.fileUpload.clearSelectedFile')" /><span
+ class="sr-only"
+ >{{ $t('global.fileUpload.clearSelectedFile') }}</span
+ >
+ </b-button>
</div>
</div>
</template>
diff --git a/src/components/Global/InfoTooltip.vue b/src/components/Global/InfoTooltip.vue
index 5d60450..c91109d 100644
--- a/src/components/Global/InfoTooltip.vue
+++ b/src/components/Global/InfoTooltip.vue
@@ -4,9 +4,9 @@
variant="link"
class="btn-tooltip btn-icon-only"
:title="title"
- :aria-label="$t('global.ariaLabel.tooltip')"
>
<icon-tooltip />
+ <span class="sr-only">{{ $t('global.ariaLabel.tooltip') }}</span>
</b-button>
</template>
diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue
index 969a15d..d2c0d4a 100644
--- a/src/components/Global/InputPasswordToggle.vue
+++ b/src/components/Global/InputPasswordToggle.vue
@@ -2,7 +2,6 @@
<div class="input-password-toggle-container">
<slot></slot>
<b-button
- :aria-label="togglePasswordLabel"
:title="togglePasswordLabel"
variant="link"
class="input-action-btn btn-icon-only"
@@ -11,6 +10,7 @@
>
<icon-view-off v-if="isVisible" />
<icon-view v-else />
+ <span class="sr-only">{{ togglePasswordLabel }}</span>
</b-button>
</div>
</template>
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index 6029f4b..ac8f9bf 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -25,11 +25,11 @@
v-if="filter"
variant="link"
class="btn-icon-only input-action-btn"
- :aria-label="$t('global.ariaLabel.clearSearch')"
:title="$t('global.ariaLabel.clearSearch')"
@click="onClearSearch"
>
<icon-close />
+ <span class="sr-only">{{ $t('global.ariaLabel.clearSearch') }}</span>
</b-button>
</b-input-group>
</b-form-group>
diff --git a/src/components/Global/TableRowAction.vue b/src/components/Global/TableRowAction.vue
index 5b2c4a9..9d853bc 100644
--- a/src/components/Global/TableRowAction.vue
+++ b/src/components/Global/TableRowAction.vue
@@ -6,11 +6,11 @@
:download="download"
:href="href"
:title="title"
- :aria-label="title"
>
<slot name="icon">
{{ $t('global.action.export') }}
</slot>
+ <span v-if="btnIconOnly" class="sr-only">{{ title }}</span>
</b-link>
<b-link
v-else-if="value === 'download'"
@@ -27,15 +27,15 @@
<b-button
v-else
variant="link"
- class="btn-icon-only"
- :aria-label="title"
- :title="title"
+ :class="{ 'btn-icon-only': btnIconOnly }"
:disabled="!enabled"
+ :title="btnIconOnly ? title : !title"
@click="$emit('click-table-action', value)"
>
<slot name="icon">
{{ title }}
</slot>
+ <span v-if="btnIconOnly" class="sr-only">{{ title }}</span>
</b-button>
</span>
</template>
@@ -70,6 +70,10 @@
type: String,
default: '',
},
+ btnIconOnly: {
+ type: Boolean,
+ default: true,
+ },
},
computed: {
dataForExport() {