fix: sfscrollable add props for buttons aria labels (#2848)

* fix: add props for buttons aria labels * chore: add changeset notes
vuestorefront · Jun 23, 2023 · 93107ab · 93107ab
1 parent e3c66d5
commit 93107ab
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 0 deletions.
diff --git a/.changeset/sharp-scissors-heal.md b/.changeset/sharp-scissors-heal.md
@@ -0,0 +1,6 @@
+---
+'@storefront-ui/react': minor
+'@storefront-ui/vue': minor
+---
+
+Added props changing aria label for nav buttons in SfScrollable
diff --git a/apps/docs/components/components/scrollable.md b/apps/docs/components/components/scrollable.md
@@ -86,6 +86,8 @@ By default `SfScrollable` scroll by one page of items, but can be modified that
 | `prevDisabled` | `boolean`  |  |       |
 | `nextDisabled` | `boolean`  |  |       |
 | `isActiveIndexCentered` | `boolean`  |  |       |
+| `buttonPrevAriaLabel` | `string`  | `'Previous'` |       |
+| `buttonNextAriaLabel` | `string`  | `'Next'` |       |
 <!-- vue -->
 | `tag`       | `string`              | `'div'`        |                                    |
 <!-- end vue -->

diff --git a/apps/preview/next/pages/examples/SfScrollable.tsx b/apps/preview/next/pages/examples/SfScrollable.tsx
@@ -35,12 +35,28 @@ function Example() {
         propDefaultValue: '10',
         description: 'Only for demonstration purposes. Total number of items',
       },
+      {
+        type: 'text',
+        modelName: 'buttonPrevAriaLabel',
+        propType: 'string',
+        propDefaultValue: 'Previous',
+        description: 'Sets aria label for the previous button',
+      },
+      {
+        type: 'text',
+        modelName: 'buttonNextAriaLabel',
+        propType: 'string',
+        propDefaultValue: 'Next',
+        description: 'Sets aria label for the next button',
+      },
     ],
     {
       direction: SfScrollableDirection.horizontal,
       buttonsPlacement: SfScrollableButtonsPlacement.block,
       drag: undefined,
       totalItems: '20',
+      buttonPrevAriaLabel: 'Previous element',
+      buttonNextAriaLabel: 'Next element',
     },
   );
 
@@ -50,6 +66,8 @@ function Example() {
         drag={state.get.drag}
         direction={state.get.direction}
         buttonsPlacement={state.get.buttonsPlacement}
+        buttonPrevAriaLabel={state.get.buttonPrevAriaLabel}
+        buttonNextAriaLabel={state.get.buttonNextAriaLabel}
         className="items-center w-full"
       >
         {Array.from({ length: Number(state.get.totalItems || 10) }, (_, i) => (

diff --git a/apps/preview/nuxt/pages/examples/SfScrollable.vue b/apps/preview/nuxt/pages/examples/SfScrollable.vue
@@ -4,6 +4,8 @@
       :drag="state.drag"
       :direction="state.direction"
       :buttons-placement="state.buttonsPlacement"
+      :button-prev-aria-label="state.buttonPrevAriaLabel"
+      :button-next-aria-label="state.buttonNextAriaLabel"
       class="w-full items-center"
     >
       <div
@@ -54,12 +56,28 @@ const { controlsAttrs, state } = prepareControls(
       propDefaultValue: '10',
       description: 'Only for demonstration purposes. Total number of items',
     },
+    {
+      type: 'text',
+      modelName: 'buttonPrevAriaLabel',
+      propType: 'string',
+      propDefaultValue: 'Previous',
+      description: 'Sets aria label for the previous button',
+    },
+    {
+      type: 'text',
+      modelName: 'buttonNextAriaLabel',
+      propType: 'string',
+      propDefaultValue: 'Next',
+      description: 'Sets aria label for the next button',
+    },
   ],
   {
     direction: ref(SfScrollableDirection.horizontal),
     buttonsPlacement: ref(SfScrollableButtonsPlacement.block),
     drag: ref(),
     totalItems: ref('20'),
+    buttonPrevAriaLabel: ref('Previous element'),
+    buttonNextAriaLabel: ref('Next element'),
   },
 );
 </script>
diff --git a/packages/sfui/frameworks/react/components/SfScrollable/SfScrollable.tsx b/packages/sfui/frameworks/react/components/SfScrollable/SfScrollable.tsx
@@ -34,6 +34,8 @@ const SfScrollable = polymorphicForwardRef<typeof defaultScrollableTag, SfScroll
       wrapperClassName,
       prevDisabled,
       nextDisabled,
+      buttonPrevAriaLabel = 'Previous',
+      buttonNextAriaLabel = 'Next',
       style,
       children,
       slotPreviousButton,
@@ -88,6 +90,7 @@ const SfScrollable = polymorphicForwardRef<typeof defaultScrollableTag, SfScroll
             size: 'lg',
             disabled: prevDisabled,
             slotPrefix: <SfIconChevronLeft />,
+            ariaLabel: buttonPrevAriaLabel,
             className: classNames(
               'hidden md:block !ring-neutral-500 !text-neutral-500 disabled:!ring-disabled-300 disabled:!text-disabled-500',
               classNameButton,
@@ -109,6 +112,7 @@ const SfScrollable = polymorphicForwardRef<typeof defaultScrollableTag, SfScroll
             size: 'lg',
             disabled: nextDisabled,
             slotPrefix: <SfIconChevronRight />,
+            ariaLabel: buttonNextAriaLabel,
             className: classNames(
               'hidden md:block !ring-neutral-500 !text-neutral-500 disabled:!ring-disabled-300 disabled:!text-disabled-500',
               classNameButton,

diff --git a/packages/sfui/frameworks/react/components/SfScrollable/types.ts b/packages/sfui/frameworks/react/components/SfScrollable/types.ts
@@ -8,5 +8,7 @@ export interface SfScrollableProps extends UseScrollableOptions, PropsWithChildr
   slotNextButton?: ReactElement;
   prevDisabled?: boolean;
   nextDisabled?: boolean;
+  buttonPrevAriaLabel?: string;
+  buttonNextAriaLabel?: string;
   buttonsPlacement?: `${SfScrollableButtonsPlacement}`;
 }
diff --git a/packages/sfui/frameworks/vue/components/SfScrollable/SfScrollable.vue b/packages/sfui/frameworks/vue/components/SfScrollable/SfScrollable.vue
@@ -59,6 +59,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  buttonPrevAriaLabel: {
+    type: String,
+    default: 'Previous',
+  },
+  buttonNextAriaLabel: {
+    type: String,
+    default: 'Next',
+  },
 });
 const emit = defineEmits<{
   (e: 'onDragStart', data: SfScrollableOnDragStartData): void;
@@ -112,6 +120,7 @@ const isHorizontal = computed(() => props.direction === SfScrollableDirection.ho
       ]"
       v-bind="getPrevButtonProps"
       :disabled="prevDisabled"
+      :aria-label="buttonPrevAriaLabel"
     >
       <SfIconChevronLeft />
     </SfButton>
@@ -150,6 +159,7 @@ const isHorizontal = computed(() => props.direction === SfScrollableDirection.ho
       ]"
       v-bind="getNextButtonProps"
       :disabled="nextDisabled"
+      :aria-label="buttonNextAriaLabel"
     >
       <SfIconChevronRight />
     </SfButton>