Merge pull request #65 from jean-1314/master

Add aria-label attributes to slider control buttons
shhdgit · Sep 17, 2020 · 0bc5a5e · 0bc5a5e
2 parents 2505e46 + 493f04a
commit 0bc5a5e
Showing 1 changed file with 12 additions and 4 deletions.
diff --git a/src/slider.vue b/src/slider.vue
@@ -31,11 +31,11 @@
       />
     </div>
     <template v-if="controlBtn">
-      <button class="slider-btn slider-btn-left" @click.stop="prev">
-        <i class="slider-icon slider-icon-left" />
+      <button class="slider-btn slider-btn-left" :aria-label="prevBtnLabel" @click.stop="prev">
+        <i class="slider-icon slider-icon-left" aria-hidden="true"/>
       </button>
-      <button class="slider-btn slider-btn-right" @click.stop="next">
-        <i class="slider-icon slider-icon-right" />
+      <button class="slider-btn slider-btn-right" :aria-label="nextBtnLabel" @click.stop="next">
+        <i class="slider-icon slider-icon-right" aria-hidden="true"/>
       </button>
     </template>
   </div>
@@ -104,6 +104,14 @@ export default {
       type: Function,
       default: () => true,
     },
+    prevBtnLabel: {
+      type: String,
+      default: 'Previous slide',
+    },
+    nextBtnLabel: {
+      type: String,
+      default: 'Next slide',
+    },
   },
   data() {
     return {