diff --git a/.changeset/sharp-scissors-heal.md b/.changeset/sharp-scissors-heal.md new file mode 100644 index 0000000000..665322611b --- /dev/null +++ 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 index a7a3a108c1..4b87957796 100644 --- 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'` | | | `tag` | `string` | `'div'` | | diff --git a/apps/preview/next/pages/examples/SfScrollable.tsx b/apps/preview/next/pages/examples/SfScrollable.tsx index 476d494cd9..825bca57d3 100644 --- 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 index 12c8e4499e..8b28550522 100644 --- 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" >
diff --git a/packages/sfui/frameworks/react/components/SfScrollable/SfScrollable.tsx b/packages/sfui/frameworks/react/components/SfScrollable/SfScrollable.tsx index d639e863ec..222343b22c 100644 --- 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, + 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, + 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 index 2b468a97aa..f939ca99e0 100644 --- 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 index 22d4c56dcc..a4e1971382 100644 --- 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" > @@ -150,6 +159,7 @@ const isHorizontal = computed(() => props.direction === SfScrollableDirection.ho ]" v-bind="getNextButtonProps" :disabled="nextDisabled" + :aria-label="buttonNextAriaLabel" >