fix(a11y): add aria label to icon button

Author: acamachoappomni

src/calendar/icon-button.vue

@@ -1,6 +1,7 @@
 <template>
   <button
     type="button"
+    :aria-label="ariaLabel"
     :disabled="disabled"
     :class="[
       `${prefixClass}-btn ${prefixClass}-btn-text ${prefixClass}-btn-icon-${type}`,
@@ -17,6 +18,7 @@
 <script>
 export default {
   props: {
+    ariaLabel: String,
     type: String,
     disabled: Boolean,
   },

src/calendar/table-date.vue

@@ -3,24 +3,16 @@
     <div :class="`${prefixClass}-calendar-header`">
       <icon-button
         type="double-left"
+        :aria-label="locale.prevYear"
         :disabled="isDisabledArrows('last-year')"
         @click="handleIconDoubleLeftClick"
       ></icon-button>
       <icon-button
         type="left"
+        :aria-label="locale.prevMonth"
         :disabled="isDisabledArrows('last-month')"
         @click="handleIconLeftClick"
       ></icon-button>
-      <icon-button
-        type="double-right"
-        :disabled="isDisabledArrows('next-year')"
-        @click="handleIconDoubleRightClick"
-      ></icon-button>
-      <icon-button
-        type="right"
-        :disabled="isDisabledArrows('next-month')"
-        @click="handleIconRightClick"
-      ></icon-button>
       <span :class="`${prefixClass}-calendar-header-label`">
         <button
           v-for="item in yearMonth"
@@ -34,6 +26,18 @@
           {{ item.label }}
         </button>
       </span>
+      <icon-button
+        type="right"
+        :aria-label="locale.nextMonth"
+        :disabled="isDisabledArrows('next-month')"
+        @click="handleIconRightClick"
+      ></icon-button>
+      <icon-button
+        type="double-right"
+        :aria-label="locale.nextYear"
+        :disabled="isDisabledArrows('next-year')"
+        @click="handleIconDoubleRightClick"
+      ></icon-button>
     </div>
     <div :class="`${prefixClass}-calendar-content`">
       <table :class="`${prefixClass}-table ${prefixClass}-table-date`">
@@ -159,6 +163,9 @@ export default {
       });
       return chunk(arr, 7);
     },
+    locale() {
+      return this.getLocale();
+    },
   },
   methods: {
     isDisabledArrows(type) {

src/calendar/table-month.vue

@@ -3,14 +3,10 @@
     <div :class="`${prefixClass}-calendar-header`">
       <icon-button
         type="double-left"
+        :aria-label="locale.prev"
         :disabled="isDisabledArrows('last-year')"
         @click="handleIconDoubleLeftClick"
       ></icon-button>
-      <icon-button
-        type="double-right"
-        :disabled="isDisabledArrows('next-year')"
-        @click="handleIconDoubleRightClick"
-      ></icon-button>
       <span :class="`${prefixClass}-calendar-header-label`">
         <button
           type="button"
@@ -20,6 +16,12 @@
           {{ calendarYear }}
         </button>
       </span>
+      <icon-button
+        type="double-right"
+        :aria-label="locale.next"
+        :disabled="isDisabledArrows('next-year')"
+        @click="handleIconDoubleRightClick"
+      ></icon-button>
     </div>
     <div :class="`${prefixClass}-calendar-content`">
       <table :class="`${prefixClass}-table ${prefixClass}-table-month`" @click="handleClick">
@@ -82,6 +84,9 @@ export default {
       });
       return chunk(months, 3);
     },
+    locale() {
+      return this.getLocale();
+    },
   },
   methods: {
     isDisabledArrows(type) {

src/calendar/table-year.vue

@@ -3,19 +3,21 @@
     <div :class="`${prefixClass}-calendar-header`">
       <icon-button
         type="double-left"
+        :aria-label="locale.prev"
         :disabled="isDisabledArrows('last-decade')"
         @click="handleIconDoubleLeftClick"
       ></icon-button>
-      <icon-button
-        type="double-right"
-        :disabled="isDisabledArrows('next-decade')"
-        @click="handleIconDoubleRightClick"
-      ></icon-button>
       <span :class="`${prefixClass}-calendar-header-label`">
         <span>{{ firstYear }}</span>
         <span :class="`${prefixClass}-calendar-decade-separator`"></span>
         <span>{{ lastYear }}</span>
       </span>
+      <icon-button
+        type="double-right"
+        :aria-label="locale.next"
+        :disabled="isDisabledArrows('next-decade')"
+        @click="handleIconDoubleRightClick"
+      ></icon-button>
     </div>
     <div :class="`${prefixClass}-calendar-content`">
       <table :class="`${prefixClass}-table ${prefixClass}-table-year`" @click="handleClick">
@@ -39,11 +41,15 @@
 import IconButton from './icon-button';
 import { chunk } from '../util/base';
 import { setYear } from '../util/date';
+import { getLocale } from '../locale';
 
 export default {
   name: 'TableYear',
   components: { IconButton },
   inject: {
+    getLocale: {
+      default: () => getLocale,
+    },
     prefixClass: {
       default: 'mx',
     },
@@ -80,6 +86,9 @@ export default {
       const last = arr => arr[arr.length - 1];
       return last(last(this.years));
     },
+    locale() {
+      return this.getLocale();
+    },
   },
   methods: {
     isDisabledArrows(type) {

src/locale/en.js

@@ -5,6 +5,12 @@ const lang = {
   yearFormat: 'YYYY',
   monthFormat: 'MMM',
   monthBeforeYear: true,
+  next: 'Next Page',
+  prev: 'Previous Page',
+  nextYear: 'Next Year',
+  prevMonth: 'Previous Month',
+  nextMonth: 'Next Month',
+  prevYear: 'Previous Year',
 };
 
 export default lang;

src/style/index.scss

@@ -154,15 +154,8 @@
   line-height: 34px;
   text-align: center;
   overflow: hidden;
-}
-
-.#{$namespace}-btn-icon-left,
-.#{$namespace}-btn-icon-double-left {
-  float: left;
-}
-.#{$namespace}-btn-icon-right,
-.#{$namespace}-btn-icon-double-right {
-  float: right;
+  display: flex;
+  justify-content: space-between;
 }
 
 .#{$namespace}-calendar-header-label {
@@ -200,6 +193,9 @@
       color: $disabled-color;
       background-color: $disabled-background-color;
     }
+    &.focus {
+      outline: -webkit-focus-ring-color auto 1px;
+    }
   }
 }