feat(accessibility): use correct aria properties (#349)

* chore: build

* feat(accessibility): use correct aria properties

Based on [aXe](https://www.deque.com/axe/) recommendations, fix accessibility:
 - Use proper roles for the various components (ex: role="button" not needed on buttons).
 - Reorder navigation and pagination to better match the tabbing order.
 - Make navigation accessible by tabbing.
 - Change the HTML elements to better match [W3's recommended organization](https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html)

Author: AdminXVII

src/Carousel.vue

@@ -13,7 +13,6 @@
           'VueCarousel-inner',
           { 'VueCarousel-inner--center': isCenterModeEnabled }
         ]"
-        role="listbox"
         :style="{
           'transform': `translate(${currentOffset}px, 0)`,
           'transition': dragging ? 'none' : transitionStyle,
@@ -30,10 +29,6 @@
       </div>
     </div>
 
-    <slot name="pagination" v-if="paginationEnabled">
-      <pagination @paginationclick="goToPage($event, 'pagination')"/>
-    </slot>
-
     <slot name="navigation" v-if="navigationEnabled">
       <navigation
         v-if="isNavigationRequired"
@@ -43,6 +38,10 @@
         @navigationclick="handleNavigation"
       />
     </slot>
+
+    <slot name="pagination" v-if="paginationEnabled">
+      <pagination @paginationclick="goToPage($event, 'pagination')"/>
+    </slot>
   </section>
 </template>
 <script>

src/Navigation.vue

@@ -3,7 +3,7 @@
     <button
       type="button"
       aria-label="Previous page"
-      role="button"
+      :tabindex="canAdvanceBackward ? 0 : -1"
       class="VueCarousel-navigation-button VueCarousel-navigation-prev"
       v-on:click.prevent="triggerPageAdvance('backward')"
       v-bind:class="{ 'VueCarousel-navigation--disabled': !canAdvanceBackward }"
@@ -12,7 +12,7 @@
     <button
       type="button"
       aria-label="Next page"
-      role="button"
+      :tabindex="canAdvanceForward ? 0 : -1"
       class="VueCarousel-navigation-button VueCarousel-navigation-next"
       v-on:click.prevent="triggerPageAdvance()"
       v-bind:class="{ 'VueCarousel-navigation--disabled': !canAdvanceForward }"
@@ -94,6 +94,10 @@ export default {
   outline: none;
 }
 
+.VueCarousel-navigation-button:focus {
+  outline: 1px solid lightblue;
+}
+
 .VueCarousel-navigation-next {
   right: 0;
   transform: translateY(-50%) translateX(100%);

src/Pagination.vue

@@ -4,36 +4,28 @@
     class="VueCarousel-pagination"
     v-bind:class="{ [`VueCarousel-pagination--${paginationPositionModifierName}`]: paginationPositionModifierName }"
   >
-    <ul class="VueCarousel-dot-container" role="tablist">
-      <li
+    <div class="VueCarousel-dot-container" role="tablist" :style="`margin-top: ${carousel.paginationPadding * 2}px;`">
+      <button
+        v-for="(page, index) in paginationCount"
+        :key="`${page}_${index}`"
         class="VueCarousel-dot"
         aria-hidden="false"
-        role="presentation"
+        role="tab"
+        :title="`Item ${index}`"
+        :value="`Item ${index}`"
+        :aria-label="`Item ${index}`"
         :aria-selected="isCurrentDot(index) ? 'true' : 'false'"
         v-bind:class="{ 'VueCarousel-dot--active': isCurrentDot(index) }"
-        v-for="(page, index) in paginationCount"
-        :key="`${page}_${index}`"
         v-on:click="goToPage(index)"
         :style="`
           margin-${paginationPropertyBasedOnPosition}: ${carousel.paginationPadding * 2}px;
           padding: ${carousel.paginationPadding}px;
+          width: ${carousel.paginationSize}px;
+          height: ${carousel.paginationSize}px;
+          background-color: ${isCurrentDot(index) ? carousel.paginationActiveColor : carousel.paginationColor};
         `"
-      >
-        <button
-          type="button"
-          role="button"
-          aria-label="`Item ${index}`"
-          :title="`Item ${index}`"
-          class="VueCarousel-dot-button"
-          :tabindex="0"
-          :style="`
-            width: ${carousel.paginationSize}px;
-            height: ${carousel.paginationSize}px;
-            background: ${isCurrentDot(index) ? carousel.paginationActiveColor : carousel.paginationColor};
-            `"
-        ></button>
-      </li>
-    </ul>
+      ></button>
+    </div>
   </div>
 </template>
 
@@ -112,19 +104,16 @@ export default {
 .VueCarousel-dot {
   display: inline-block;
   cursor: pointer;
-}
-
-.VueCarousel-dot-button {
   appearance: none;
   border: none;
-  background-color: transparent;
+  background-clip: content-box;
+  box-sizing: content-box;
   padding: 0;
   border-radius: 100%;
   outline: none;
-  cursor: pointer;
 }
 
-.VueCarousel-dot-button:focus {
+.VueCarousel-dot:focus {
   outline: 1px solid lightblue;
 }
 </style>

src/Slide.vue

@@ -2,6 +2,8 @@
   <div
     class="VueCarousel-slide"
     tabindex="-1"
+    :aria-hidden="!isActive"
+    role="tabpanel"
     :class="{
       'VueCarousel-slide-active': isActive,
       'VueCarousel-slide-center': isCenter,