fix: add role="group" to flex layout div with aria-label for WCAG 2.2 compliance (#75)

* fix: add role="region" to flex layout div with aria-label for WCAG 2.2 compliance

Adds role="region" attribute to the flex layout div that contains aria-label to comply with:
- WCAG 2.2 Level A criterion 4.1.2 (Name, Role, Value)
- ARIA 1.2 specification (aria-label is prohibited on elements with implicit role="generic")

The role="region" landmark is semantically appropriate for layout sections and allows proper use of aria-label as an accessible name.

* fix: restore full CHANGELOG.md history

Previous commit accidentally truncated the changelog. This commit restores all historical entries while keeping the new accessibility fix entry in [Unreleased].

* fix: restore complete CHANGELOG.md with all historical entries

Complete fix restoring missing last line "- `flex-row` and `flex-col` blocks."

* fix: use role="group" instead of role="region" on flex layout div

role="region" is a landmark; since flex-row is a high-frequency, often
nested block, it produced many identically-named region landmarks
("Section row"), polluting screen-reader landmark navigation. role="group"
also accepts aria-label and resolves the ARIA 1.2 / WCAG 4.1.2 violation
without introducing any landmark. Matches the existing pattern in
slider-layout. Also restores the trailing newline in CHANGELOG.md.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

---------

Co-authored-by: Vinícius Seixas <vinicius.seixas@vtex.com>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: 3 people

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="group"` to flex 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.21.5] - 2025-07-24
 + ### Fixed

react/FlexLayout.tsx

@@ -35,7 +35,7 @@ const FlexLayout: StorefrontFunctionComponent<Props> = props => {
   const wrappedContent = shouldUseContainer ? <Container>{content}</Container> : content
 
   return (
-    <div className={handles.flexRow} id={htmlId} aria-label={arialabel ? arialabel : intl.formatMessage(
+    <div className={handles.flexRow} id={htmlId} role="group" aria-label={arialabel ? arialabel : intl.formatMessage(
       { id: 'store/flex-layout.flexLayout-row.aria-label' }, { sectionId: htmlId ?? 'row'})}>
       {wrappedContent}
     </div>