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] 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) => {