From 80f19d6a84d753c775767f5380f344cc5cdc209f Mon Sep 17 00:00:00 2001 From: Iago Espinoza Date: Fri, 3 Jul 2026 17:44:17 -0300 Subject: [PATCH 1/3] 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. --- CHANGELOG.md | 161 ++----------------------------------------- react/FlexLayout.tsx | 2 +- 2 files changed, 5 insertions(+), 158 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9d01a7c..9356497 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 flex layout div with aria-label to comply with WCAG 2.2 Level A (4.1.2) and ARIA 1.2 specification ## [0.21.5] - 2025-07-24 + ### Fixed @@ -36,161 +38,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [0.21.0] - 2023-03-28 ### Added -- German translation. - -## [0.20.1] - 2022-09-01 - -### Fixed - -- Fixed FlexLayout schema - -## [0.20.0] - 2022-08-04 -### Added - -- New prop `"htmlId"` that adds an html id on `flexRow` and it can be changed from Site Editor. This enables the possibility to access a section from page using links. - -## [0.19.0] - 2021-09-24 -### Added - -- I18n Bg. - -### Fixed - -- I18n Bs and Es. - -## [0.18.0] - 2021-08-17 - -### Added - -- I18n pseudo language to implement in-context tool. - -### Fixed - -- Crowdin configuration file. - -## [0.17.0] - 2021-05-05 - -### Added - -- I18n It, Fr, Ko and Nl translations. - -### Fixed - -- Crowdin configuration file. -- Changelog. - -## [0.16.0] - 2021-03-03 - - -### Added - -- I18n Ro and Jp. - -### Fixed - -- Crowdin configuration file. - -## [0.15.2] - 2020-12-08 - -### Fixed -- Fix broken and wrong links in the docs. - -## [0.15.1] - 2020-08-31 -### Removed -- Lots of obsolete warnings. - -## [0.15.0] - 2020-05-04 -### Added -- Prop `experimentalHideEmptyCols`. - -## [0.14.0] - 2020-01-27 -### Added -- `flexRowContent` CSS handle. - -## [0.13.1] - 2019-12-03 -### Fixed -- Documentation structure - -## [0.13.0] - 2019-12-03 - -## [0.12.1] - 2019-10-25 - -## [0.12.0] - 2019-10-04 -### Added -- `border`, `borderWidth` and `borderColor` props to `Row` and `Col`. - -## [0.11.0] - 2019-10-03 -### Added -- Support for [`responsive-values`](https://github.com/vtex-apps/responsive-values) to `Row` and `Col` props. - -## [0.10.1] - 2019-09-19 -### Fixed -- Cleaned up dependencies that should be `devDependencies`. - -## [0.10.0] - 2019-09-04 - -## [0.9.0] - 2019-09-02 -### Added -- CSS handle `flexColChild`. - -## [0.8.0] - 2019-08-30 -### Added -- Create `colJustify` prop, to choose justify token when sizing is auto. - -## [0.7.3] - 2019-08-28 -## [0.7.2] - 2019-07-26 -### Changed -- Use vtex.device-detector for device detection. - -## [0.7.1] - 2019-06-27 -### Fixed -- Build assets with new builder hub. - -## [0.7.0] - 2019-06-19 -### Added -- Prop `colSizing` on Row, to allow the sizes of the columns to be based on content. - -## [0.6.1] - 2019-06-06 -### Fixed -- Fixed issue that causes syntax error on IE11, due to the use of ES6 features. - -## [0.6.0] - 2019-06-03 -### Added -- Props `horizontalAlign` and `preventHorizontalStretch` to Row. - -## [0.5.1] - 2019-05-23 -### Fixed -- Fixed missing `id` from schemas. - -## [0.5.0] - 2019-05-23 -### Added -- Props `colGap`, `rowGap`, to add spacing between columns and rows. -- Prop `preserveLayoutOnMobile`, to refrain from breaking columns into rows on small screens. -- **Col:** Props `width`, `marginLeft/Right`, `paddingLeft/Right`, and `preventVerticalStretch`. -- **Row:** Props `marginTop/Bottom`, `paddingTop/Bottom`, `preventHorizontalStretch`, and `preventVerticalStretch`. - -## [0.4.2] - 2019-04-26 - -### Fixed -- App translations - -## [0.4.1] - 2019-04-10 -### Changed -- Point `flex-layout.row` to `FlexLayout`, and expose `Row` entrypoint. - -## [0.4.0] - 2019-04-10 -### Added -- Add schema in `Col` and `Row`. - -## [0.3.0] - 2019-04-10 -### Added -- Add `blockClass` prop to row and col. - -## [0.2.0] - 2019-04-10 -### Changed -- Changed from `flex-row` and `flex-col` to `flex-layout.row` and `flex-layout.col`, respectively. - -## [0.1.0] -### Added -- `flex-row` and `flex-col` blocks. +- `htmlId` property in `flex-layout.row` and `flex-layout.col`. +- Change configuration screen for `flex-layout.row` and `flex-layout.col`. diff --git a/react/FlexLayout.tsx b/react/FlexLayout.tsx index a8fe586..6916eda 100644 --- a/react/FlexLayout.tsx +++ b/react/FlexLayout.tsx @@ -35,7 +35,7 @@ const FlexLayout: StorefrontFunctionComponent = props => { const wrappedContent = shouldUseContainer ? {content} : content return ( -
{wrappedContent}
From 5690a2da3302e39431ab4740618887816875fe1f Mon Sep 17 00:00:00 2001 From: Iago Espinoza Date: Fri, 3 Jul 2026 17:47:49 -0300 Subject: [PATCH 2/3] 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]. --- CHANGELOG.md | 159 ++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 157 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9356497..4d5b997 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -38,6 +38,161 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [0.21.0] - 2023-03-28 ### Added +- German translation. -- `htmlId` property in `flex-layout.row` and `flex-layout.col`. -- Change configuration screen for `flex-layout.row` and `flex-layout.col`. +## [0.20.1] - 2022-09-01 + +### Fixed + +- Fixed FlexLayout schema + +## [0.20.0] - 2022-08-04 +### Added + +- New prop `"htmlId"` that adds an html id on `flexRow` and it can be changed from Site Editor. This enables the possibility to access a section from page using links. + +## [0.19.0] - 2021-09-24 +### Added + +- I18n Bg. + +### Fixed + +- I18n Bs and Es. + +## [0.18.0] - 2021-08-17 + +### Added + +- I18n pseudo language to implement in-context tool. + +### Fixed + +- Crowdin configuration file. + +## [0.17.0] - 2021-05-05 + +### Added + +- I18n It, Fr, Ko and Nl translations. + +### Fixed + +- Crowdin configuration file. +- Changelog. + +## [0.16.0] - 2021-03-03 + + +### Added + +- I18n Ro and Jp. + +### Fixed + +- Crowdin configuration file. + +## [0.15.2] - 2020-12-08 + +### Fixed +- Fix broken and wrong links in the docs. + +## [0.15.1] - 2020-08-31 +### Removed +- Lots of obsolete warnings. + +## [0.15.0] - 2020-05-04 +### Added +- Prop `experimentalHideEmptyCols`. + +## [0.14.0] - 2020-01-27 +### Added +- `flexRowContent` CSS handle. + +## [0.13.1] - 2019-12-03 +### Fixed +- Documentation structure + +## [0.13.0] - 2019-12-03 + +## [0.12.1] - 2019-10-25 + +## [0.12.0] - 2019-10-04 +### Added +- `border`, `borderWidth` and `borderColor` props to `Row` and `Col`. + +## [0.11.0] - 2019-10-03 +### Added +- Support for [`responsive-values`](https://github.com/vtex-apps/responsive-values) to `Row` and `Col` props. + +## [0.10.1] - 2019-09-19 +### Fixed +- Cleaned up dependencies that should be `devDependencies`. + +## [0.10.0] - 2019-09-04 + +## [0.9.0] - 2019-09-02 +### Added +- CSS handle `flexColChild`. + +## [0.8.0] - 2019-08-30 +### Added +- Create `colJustify` prop, to choose justify token when sizing is auto. + +## [0.7.3] - 2019-08-28 + +## [0.7.2] - 2019-07-26 +### Changed +- Use vtex.device-detector for device detection. + +## [0.7.1] - 2019-06-27 +### Fixed +- Build assets with new builder hub. + +## [0.7.0] - 2019-06-19 +### Added +- Prop `colSizing` on Row, to allow the sizes of the columns to be based on content. + +## [0.6.1] - 2019-06-06 +### Fixed +- Fixed issue that causes syntax error on IE11, due to the use of ES6 features. + +## [0.6.0] - 2019-06-03 +### Added +- Props `horizontalAlign` and `preventHorizontalStretch` to Row. + +## [0.5.1] - 2019-05-23 +### Fixed +- Fixed missing `id` from schemas. + +## [0.5.0] - 2019-05-23 +### Added +- Props `colGap`, `rowGap`, to add spacing between columns and rows. +- Prop `preserveLayoutOnMobile`, to refrain from breaking columns into rows on small screens. +- **Col:** Props `width`, `marginLeft/Right`, `paddingLeft/Right`, and `preventVerticalStretch`. +- **Row:** Props `marginTop/Bottom`, `paddingTop/Bottom`, `preventHorizontalStretch`, and `preventVerticalStretch`. + +## [0.4.2] - 2019-04-26 + +### Fixed +- App translations + +## [0.4.1] - 2019-04-10 +### Changed +- Point `flex-layout.row` to `FlexLayout`, and expose `Row` entrypoint. + +## [0.4.0] - 2019-04-10 +### Added +- Add schema in `Col` and `Row`. + +## [0.3.0] - 2019-04-10 +### Added +- Add `blockClass` prop to row and col. + +## [0.2.0] - 2019-04-10 +### Changed +- Changed from `flex-row` and `flex-col` to `flex-layout.row` and `flex-layout.col`, respectively. + +## [0.1.0] +### Added +- `flex-row` and `flex-col` blocks. \ No newline at end of file From 717fe2d63ab4d2d3afcb2fdb9c9afef629af770e Mon Sep 17 00:00:00 2001 From: Iago Espinoza Date: Fri, 3 Jul 2026 17:49:36 -0300 Subject: [PATCH 3/3] fix: restore complete CHANGELOG.md with all historical entries Complete fix restoring missing last line "- `flex-row` and `flex-col` blocks."