Align button icons

- Fixes button icon and text alignment
- App header buttons to be addressed separately
- Button documentation will be addressed in separate commit
- Aligns form input buttons: datepicker, clear search, and password toggle
- Moves title from icon to button for icon only buttons
- Aligns validation icon with  form input buttons

Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: Ie28d7d7dd7303ab6bf1897d1fa569e1580cc2f9d

5 files changed, 62 insertions, 81 deletions

diff --git a/src/components/Global/InfoTooltip.vue b/src/components/Global/InfoTooltip.vue
index f3cb7f12..5d604503 100644
--- a/src/components/Global/InfoTooltip.vue
+++ b/src/components/Global/InfoTooltip.vue
@@ -1,6 +1,11 @@
 <template>
-  <b-button v-b-tooltip variant="link" class="btn-tooltip" :title="title">
-    <span class="sr-only">{{ $t('global.ariaLabel.tooltip') }}</span>
+  <b-button
+    v-b-tooltip
+    variant="link"
+    class="btn-tooltip btn-icon-only"
+    :title="title"
+    :aria-label="$t('global.ariaLabel.tooltip')"
+  >
     <icon-tooltip />
   </b-button>
 </template>
diff --git a/src/components/Global/InputPasswordToggle.vue b/src/components/Global/InputPasswordToggle.vue
index bf3e4ca5..2119f8c6 100644
--- a/src/components/Global/InputPasswordToggle.vue
+++ b/src/components/Global/InputPasswordToggle.vue
@@ -2,22 +2,15 @@
   <div class="input-password-toggle-container">
     <slot></slot>
     <b-button
-      :aria-label="$t('global.ariaLabel.showPassword')"
+      :aria-label="togglePasswordLabel"
+      :title="togglePasswordLabel"
       variant="link"
-      class="input-action-btn"
+      class="input-action-btn btn-icon-only"
       :class="{ isVisible: isVisible }"
       @click="toggleVisibility"
     >
-      <icon-view-off
-        v-if="isVisible"
-        aria-hidden="true"
-        :title="$t('global.ariaLabel.hidePassword')"
-      />
-      <icon-view
-        v-else
-        aria-hidden="true"
-        :title="$t('global.ariaLabel.showPassword')"
-      />
+      <icon-view-off v-if="isVisible" />
+      <icon-view v-else />
     </b-button>
   </div>
 </template>
@@ -32,6 +25,7 @@ export default {
   data() {
     return {
       isVisible: false,
+      togglePasswordLabel: this.$t('global.ariaLabel.showPassword'),
     };
   },
   methods: {
@@ -44,6 +38,10 @@ export default {
       if (inputEl.nodeName === 'INPUT') {
         inputEl.type = this.isVisible ? 'text' : 'password';
       }
+
+      this.isVisible
+        ? (this.togglePasswordLabel = this.$t('global.ariaLabel.hidePassword'))
+        : (this.togglePasswordLabel = this.$t('global.ariaLabel.showPassword'));
     },
   },
 };
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index c259df91..d472c0c9 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -23,10 +23,12 @@
         <b-button
           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 :title="$t('global.ariaLabel.clearSearch')" />
+          <icon-close />
         </b-button>
       </b-input-group>
     </b-form-group>
@@ -77,16 +79,4 @@ export default {
   z-index: 4;
   stroke: gray('400');
 }
-
-.btn {
-  position: absolute;
-  right: 0;
-  top: 0;
-  padding: 0.4rem 1rem;
-  z-index: 4;
-  svg {
-    margin-left: 0;
-    vertical-align: sub;
-  }
-}
 </style>
diff --git a/src/components/Global/TableDateFilter.vue b/src/components/Global/TableDateFilter.vue
index 73b2b832..00c04ab0 100644
--- a/src/components/Global/TableDateFilter.vue
+++ b/src/components/Global/TableDateFilter.vue
@@ -23,32 +23,26 @@
               {{ $t('global.form.dateMustBeBefore', { date: toDate }) }}
             </template>
           </b-form-invalid-feedback>
-          <template #append>
-            <b-form-datepicker
-              v-model="fromDate"
-              class="input-action"
-              button-only
-              right
-              :max="toDate"
-              :hide-header="true"
-              :locale="locale"
-              :label-help="
-                $t('global.calendar.useCursorKeysToNavigateCalendarDates')
-              "
-              button-variant="link"
-              aria-controls="input-from-date"
-            >
-              <template #button-content>
-                <icon-calendar
-                  :title="$t('global.calendar.openDatePicker')"
-                  aria-hidden="true"
-                />
-                <span class="sr-only">{{
-                  $t('global.calendar.openDatePicker')
-                }}</span>
-              </template>
-            </b-form-datepicker>
-          </template>
+          <b-form-datepicker
+            v-model="fromDate"
+            class="btn-datepicker btn-icon-only"
+            button-only
+            right
+            :max="toDate"
+            :hide-header="true"
+            :locale="locale"
+            :label-help="
+              $t('global.calendar.useCursorKeysToNavigateCalendarDates')
+            "
+            :aria-label="$t('global.calendar.selectDate')"
+            :title="$t('global.calendar.selectDate')"
+            button-variant="link"
+            aria-controls="input-from-date"
+          >
+            <template #button-content>
+              <icon-calendar />
+            </template>
+          </b-form-datepicker>
         </b-input-group>
       </b-form-group>
       <b-form-group
@@ -73,32 +67,26 @@
               {{ $t('global.form.dateMustBeAfter', { date: fromDate }) }}
             </template>
           </b-form-invalid-feedback>
-          <template #append>
-            <b-form-datepicker
-              v-model="toDate"
-              class="input-action"
-              button-only
-              right
-              :min="fromDate"
-              :hide-header="true"
-              :locale="locale"
-              :label-help="
-                $t('global.calendar.useCursorKeysToNavigateCalendarDates')
-              "
-              button-variant="link"
-              aria-controls="input-to-date"
-            >
-              <template #button-content>
-                <icon-calendar
-                  :title="$t('global.calendar.openDatePicker')"
-                  aria-hidden="true"
-                />
-                <span class="sr-only">{{
-                  $t('global.calendar.openDatePicker')
-                }}</span>
-              </template>
-            </b-form-datepicker>
-          </template>
+          <b-form-datepicker
+            v-model="toDate"
+            class="btn-datepicker btn-icon-only"
+            button-only
+            right
+            :min="fromDate"
+            :hide-header="true"
+            :locale="locale"
+            :label-help="
+              $t('global.calendar.useCursorKeysToNavigateCalendarDates')
+            "
+            :aria-label="$t('global.calendar.openDatePicker')"
+            :title="$t('global.calendar.openDatePicker')"
+            button-variant="link"
+            aria-controls="input-to-date"
+          >
+            <template #button-content>
+              <icon-calendar />
+            </template>
+          </b-form-datepicker>
         </b-input-group>
       </b-form-group>
     </b-col>
diff --git a/src/components/Global/TableRowAction.vue b/src/components/Global/TableRowAction.vue
index a12ae801..94ef6ce4 100644
--- a/src/components/Global/TableRowAction.vue
+++ b/src/components/Global/TableRowAction.vue
@@ -2,7 +2,7 @@
   <span>
     <b-link
       v-if="value === 'export'"
-      class="align-bottom btn-link py-0"
+      class="align-bottom btn-icon-only py-0 btn-link"
       :download="download"
       :href="href"
       :title="title"
@@ -15,7 +15,7 @@
     <b-button
       v-else
       variant="link"
-      class="py-0"
+      class="btn-icon-only"
       :aria-label="title"
       :title="title"
       :disabled="!enabled"