From 1cc40721a7e5e595e8ae8e5f779ec04d2f13e358 Mon Sep 17 00:00:00 2001
From: Iago Espinoza <iago1501@gmail.com>
Date: Fri, 3 Jul 2026 18:18:20 -0300
Subject: [PATCH 1/2] fix: add role="region" to stack layout div with
 aria-label for WCAG 2.2 compliance

The div rendered by stack-layout uses aria-label without an explicit
role. Per ARIA 1.2, aria-label is a prohibited attribute on elements
with the implicit role="generic" (the default for a div), which is a
WCAG 2.2 Level A (4.1.2 Name, Role, Value) violation flagged by an
external audit on the kohlerqa account. role="region" makes the
element a valid landmark that accepts an accessible name.
---
 CHANGELOG.md    | 2 ++
 react/index.tsx | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c538247..851e9f6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,8 @@ 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]
+### Fixed
+- Add `role="region"` to stack layout div with aria-label to comply with WCAG 2.2 Level A (4.1.2) and ARIA 1.2 specification
 
 ## [0.1.3] - 2025-08-11
   + ### Fixed
diff --git a/react/index.tsx b/react/index.tsx
index 0ab07e0..362d661 100644
--- a/react/index.tsx
+++ b/react/index.tsx
@@ -16,7 +16,7 @@ const StackLayout: StorefrontFunctionComponent<Props> = ({
   const handles = useCssHandles(CSS_HANDLES)
   const intl = useIntl()
   return (
-    <div className={`${handles.stackContainer} relative`} aria-label={arialabel ? arialabel : intl.formatMessage(
+    <div className={`${handles.stackContainer} relative`} role="region" aria-label={arialabel ? arialabel : intl.formatMessage(
       { id: 'store/stack-layout.aria-label' })}>
       {React.Children.toArray(children).map((child, idx) => {
 

From a6e973a1a02e88f60d707fe83ca6d6abd6a7e9f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vin=C3=ADcius=20Seixas?= <vinicius.seixas@vtex.com>
Date: Wed, 22 Jul 2026 14:05:02 -0300
Subject: [PATCH 2/2] fix: use role="group" instead of role="region" on stack
 layout div

role="region" is a landmark and would turn every stack container into a
region in the screen-reader landmark navigation, with a generic/duplicated
accessible name. role="group" also accepts aria-label and resolves the
ARIA 1.2 / WCAG 4.1.2 violation without introducing any landmark, matching
the existing pattern in slider-layout.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 CHANGELOG.md    | 2 +-
 react/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 851e9f6..4397e4b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 ### Fixed
-- Add `role="region"` to stack layout div with aria-label to comply with WCAG 2.2 Level A (4.1.2) and ARIA 1.2 specification
+- Add `role="group"` to stack layout div with aria-label to comply with WCAG 2.2 Level A (4.1.2) and ARIA 1.2 specification without introducing landmark navigation noise
 
 ## [0.1.3] - 2025-08-11
   + ### Fixed
diff --git a/react/index.tsx b/react/index.tsx
index 362d661..4c5c1b5 100644
--- a/react/index.tsx
+++ b/react/index.tsx
@@ -16,7 +16,7 @@ const StackLayout: StorefrontFunctionComponent<Props> = ({
   const handles = useCssHandles(CSS_HANDLES)
   const intl = useIntl()
   return (
-    <div className={`${handles.stackContainer} relative`} role="region" aria-label={arialabel ? arialabel : intl.formatMessage(
+    <div className={`${handles.stackContainer} relative`} role="group" aria-label={arialabel ? arialabel : intl.formatMessage(
       { id: 'store/stack-layout.aria-label' })}>
       {React.Children.toArray(children).map((child, idx) => {