addd opt to change aria-label

.github/workflows/pull-request.yml

@@ -32,7 +32,7 @@ jobs:
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: 'echo "::set-output name=dir::$(yarn cache dir)"'
-      - uses: actions/cache@v1
+      - uses: actions/cache@v4
         id: yarn-cache
         with:
           path: '${{ steps.yarn-cache-dir-path.outputs.dir }}'
@@ -54,7 +54,7 @@ jobs:
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: 'echo "::set-output name=dir::$(yarn cache dir)"'
-      - uses: actions/cache@v1
+      - uses: actions/cache@v4
         id: yarn-cache
         with:
           path: '${{ steps.yarn-cache-dir-path.outputs.dir }}'

CHANGELOG.md

@@ -5,10 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
- ## [Unreleased]
+## [Unreleased]
+  + ### Fixed
++ - option for client to pass aria-label as a variable
 
 ## [0.1.2] - 2025-03-10
 
+
 + ### Added
 + - aria-label property for stack layout
 

docs/README.md

@@ -30,6 +30,7 @@ This means `flex-layout.row#viewone` will appear on the bottom, `flex-layout.row
 | -------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
 | `blockClass`   | `string` | Allows to pass a custom name to be added to component CSS classes.                                                                                                                      | `null`        |
 | `zIndexOffset` | `number` | An offset to be passed to the zIndex of the children of the stack layout. If you pass `3`, the first children will have `zIndex` of 3, and the next layer will have `zIndex` of 4, and so on. | `0`           |
+| `arialabel` | `string` | A value to customize the aria-label property | `null`           |
 
 ## Customization
 

react/index.tsx

@@ -4,17 +4,19 @@ import { useCssHandles, applyModifiers } from 'vtex.css-handles'
 const CSS_HANDLES = ['stackContainer', 'stackItem'] as const
 
 interface Props {
-  zIndexOffset?: number
+  zIndexOffset?: number,
+  arialabel?: string
 }
 
 const StackLayout: StorefrontFunctionComponent<Props> = ({
   children,
-  zIndexOffset = 0
+  zIndexOffset = 0,
+  arialabel
 }) => {
   const handles = useCssHandles(CSS_HANDLES)
   const intl = useIntl()
   return (
-    <div className={`${handles.stackContainer} relative`} aria-label={intl.formatMessage(
+    <div className={`${handles.stackContainer} relative`} aria-label={arialabel ? arialabel : intl.formatMessage(
       { id: 'store/stack-layout.aria-label' })}>
       {React.Children.toArray(children).map((child, idx) => {