Merge pull request #419 from ismail9k/feat-add-title-for-pagination-b…

…uttons Feat add title attribute for pagination and navigation buttons
ismail9k · Nov 6, 2024 · e45cf9d · e45cf9d
2 parents 8384fe3 + c8553f5
commit e45cf9d
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 82 deletions.
diff --git a/docs/config.md b/docs/config.md
@@ -26,27 +26,31 @@
 Used to render the carousel items. You can use either the default slot or wrap element in `slides` slot.
 
 ```vue
-<Carousel>
-  <template #slides>
-    <Slide v-for="slide in 10" :key="slide">
-      ...
-    </Slide>
-  </template>
-</Carousel>
+<template>
+  <Carousel>
+    <template #slides>
+      <Slide v-for="slide in 10" :key="slide">
+        ...
+      </Slide>
+    </template>
+  </Carousel>
+</template>
 ```
 
 ### Addons
 
 Used to add display carousel addons components.
 
 ```vue
-<Carousel>
-  ...
-  <template #addons>
-    <Navigation />
-    <Pagination />
-  </template>
-</Carousel>
+<template>
+  <Carousel>
+    ...
+    <template #addons>
+      <Navigation />
+      <Pagination />
+    </template>
+  </Carousel>
+</template>
 ```
 
 ### Slots Attributes
@@ -59,41 +63,32 @@ Used to add display carousel addons components.
 
 #### Example
 
-```vue {6,7,8}
-<Carousel>
-  <Slide v-for="slide in slides" :key="slide">
-    <div class="carousel__item">{{ slide }}</div>
-  </Slide>
-
-  <template #addons="{ slidesCount }">
-    <Navigation v-if="slidesCount > 1" />
-  </template>
-</Carousel>
+```vue {7,8,9}
+<template>
+  <Carousel>
+    <Slide v-for="slide in slides" :key="slide">
+      <div class="carousel__item">{{ slide }}</div>
+    </Slide>
+  
+    <template #addons="{ slidesCount }">
+      <Navigation v-if="slidesCount > 1" />
+    </template>
+  </Carousel>
+</template>
 ```
 
 ### I18n
 
-Avaialbe keys:
-
-| Key                   | Defaults                               |
-| --------------------- | -------------------------------------- |
-| `ariaNextSlide`       | "Navigate to next slide"               |
-| `ariaPreviousSlide`   | "Navigate to previous slide"           |
-| `ariaNavigateToSlide` | "Navigate to slide {slideNumber}"      |
-| `ariaGallery`         | "Gallery"                              |
-| `itemXofY`            | "Item {currentSlide} of {slidesCount}" |
-| `iconArrowUp`         | "Arrow pointing upwards"               |
-| `iconArrowDown`       | "Arrow pointing downwards"             |
-| `iconArrowRight`      | "Arrow pointing to the right"          |
-| `iconArrowLeft`       | "Arrow pointing to the left"           |
-
-
-<script>
-import Badge from './.vitepress/components/Badge.vue';
-
-export default {
-  components: {
-   Badge,
-  }
-}
-</script>
+Available keys:
+
+| Key                   | Defaults                               | Description                                                                |
+| --------------------- | -------------------------------------- | -------------------------------------------------------------------------- |
+| `ariaNextSlide`       | "Navigate to next slide"               | Sets title and aria-label for the “Next” navigation button.                |
+| `ariaPreviousSlide`   | "Navigate to previous slide"           | Sets title and aria-label for the “Previous” navigation button.            |
+| `ariaNavigateToSlide` | "Navigate to slide {slideNumber}"      | Sets title and aria-label for pagination buttons to select a slide.        |
+| `ariaGallery`         | "Gallery"                              | Used as the aria-label for the main carousel element, indicating purpose.  |
+| `itemXofY`            | "Item {currentSlide} of {slidesCount}" | Provides screen readers with the current slide’s position in the sequence. |
+| `iconArrowUp`         | "Arrow pointing upwards"               | Sets title and aria-label for the upward-pointing arrow SVG icon.          |
+| `iconArrowDown`       | "Arrow pointing downwards"             | Sets title and aria-label for the downward-pointing arrow SVG icon.        |
+| `iconArrowRight`      | "Arrow pointing to the right"          | Sets title and aria-label for the right-pointing arrow SVG icon.           |
+| `iconArrowLeft`       | "Arrow pointing to the left"           | Sets title and aria-label for the left-pointing arrow SVG icon.            |
diff --git a/docs/dev.md b/docs/dev.md
diff --git a/src/components/Navigation.ts b/src/components/Navigation.ts
@@ -27,6 +27,7 @@ const Navigation = (props: any, { slots, attrs }: any) => {
         attrs?.class,
       ],
       'aria-label': i18n['ariaPreviousSlide'],
+      title: i18n['ariaPreviousSlide'],
       onClick: nav.prev,
     },
     slotPrev?.() || h(Icon, { name: isRTL ? 'arrowRight' : 'arrowLeft' })
@@ -41,6 +42,7 @@ const Navigation = (props: any, { slots, attrs }: any) => {
         attrs?.class,
       ],
       'aria-label': i18n['ariaNextSlide'],
+      title: i18n['ariaNextSlide'],
       onClick: nav.next,
     },
     slotNext?.() || h(Icon, { name: isRTL ? 'arrowLeft' : 'arrowRight' })

diff --git a/src/components/Pagination.ts b/src/components/Pagination.ts
@@ -22,15 +22,17 @@ const Pagination = () => {
 
   const children: Array<VNode> = []
   for (let slide = minSlide.value; slide < maxSlide.value + 1; slide++) {
+    const buttonLabel = i18nFormatter(config.i18n['ariaNavigateToSlide'], {
+      slideNumber: slide + 1,
+    })
     const button = h('button', {
       type: 'button',
       class: {
         'carousel__pagination-button': true,
         'carousel__pagination-button--active': isActive(slide),
       },
-      'aria-label': i18nFormatter(config.i18n['ariaNavigateToSlide'], {
-        slideNumber: slide + 1,
-      }),
+      'aria-label': buttonLabel,
+      title: buttonLabel,
       onClick: () => nav.slideTo(slide),
     })
     const item = h('li', { class: 'carousel__pagination-item', key: slide }, button)