From fa408aeb20ca3fc0c88a750bf4717529c3b909a5 Mon Sep 17 00:00:00 2001 From: mfaris9 Date: Mon, 11 May 2026 14:52:44 -0400 Subject: [PATCH 1/4] fix(a11y): TRAC-251 updated accessibility features --- CHANGELOG.md | 2 +- assets/scss/layouts/footer/_footer.scss | 2 ++ config.json | 2 +- templates/components/common/body.html | 4 ++-- 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 64728df262..81b1eb8413 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## Draft -- Update 'Ship to' copy for multi address orders [#2655](https://github.com/bigcommerce/cornerstone/pull/2655) + ## 6.19.1 (04-09-2026) - Update stencil-utils versionto 6.23.0 [#2638](https://github.com/bigcommerce/cornerstone/pull/2638) diff --git a/assets/scss/layouts/footer/_footer.scss b/assets/scss/layouts/footer/_footer.scss index 2138b9a1eb..61b15edf6f 100644 --- a/assets/scss/layouts/footer/_footer.scss +++ b/assets/scss/layouts/footer/_footer.scss @@ -112,6 +112,8 @@ a { color: stencilColor("color-textSecondary"); text-decoration: none; + display: inline-block; + padding: 4px 0; &:hover { color: stencilColor("color-textSecondary--hover"); diff --git a/config.json b/config.json index 8bc687cb59..c7b1391a84 100644 --- a/config.json +++ b/config.json @@ -206,7 +206,7 @@ "carousel-arrow-color--hover": "#474747", "carousel-arrow-bgColor": "#ffffff", "carousel-arrow-borderColor": "#ffffff", - "carousel-play-pause-button-textColor": "#8f8f8f", + "carousel-play-pause-button-textColor": "#444444", "carousel-play-pause-button-textColor--hover": "#474747", "carousel-play-pause-button-bgColor": "#ffffff", "carousel-play-pause-button-borderColor": "#ffffff", diff --git a/templates/components/common/body.html b/templates/components/common/body.html index e8f69e8f0e..044d956627 100644 --- a/templates/components/common/body.html +++ b/templates/components/common/body.html @@ -1,8 +1,8 @@ -
+
{{#block "hero"}} {{/block}}
{{#block "page"}} {{/block}}
{{> components/common/modal/modal}} {{> components/common/alert/alert-modal}} -
+ From bfc8f70b323bd4db9d2b7d1c3ff01556183517f9 Mon Sep 17 00:00:00 2001 From: mfaris9 Date: Mon, 11 May 2026 15:02:11 -0400 Subject: [PATCH 2/4] Add PR link to changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 81b1eb8413..0e6f9a6fbb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## Draft - + - Updated accessibility features [2656](https://github.com/bigcommerce/cornerstone/pull/2656) ## 6.19.1 (04-09-2026) - Update stencil-utils versionto 6.23.0 [#2638](https://github.com/bigcommerce/cornerstone/pull/2638) From 06d1172c0c7194a350e91c71299f9be4cf2ab21c Mon Sep 17 00:00:00 2001 From: mfaris9 Date: Mon, 11 May 2026 17:49:30 -0400 Subject: [PATCH 3/4] Update per reviewer feedback: revert
change, add spacing(quarter), and update other 8F8F8F colors for contrast --- assets/scss/layouts/footer/_footer.scss | 2 +- config.json | 16 ++++++++-------- templates/components/common/body.html | 4 ++-- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/assets/scss/layouts/footer/_footer.scss b/assets/scss/layouts/footer/_footer.scss index 61b15edf6f..65baf78236 100644 --- a/assets/scss/layouts/footer/_footer.scss +++ b/assets/scss/layouts/footer/_footer.scss @@ -113,7 +113,7 @@ color: stencilColor("color-textSecondary"); text-decoration: none; display: inline-block; - padding: 4px 0; + padding: spacing("quarter") 0; &:hover { color: stencilColor("color-textSecondary--hover"); diff --git a/config.json b/config.json index c7b1391a84..b83b858069 100644 --- a/config.json +++ b/config.json @@ -179,7 +179,7 @@ "button--default-color": "#666666", "button--default-colorHover": "#333333", "button--default-colorActive": "#000000", - "button--default-borderColor": "#8F8F8F", + "button--default-borderColor": "#777777", "button--default-borderColorHover": "#474747", "button--default-borderColorActive": "#757575", "button--primary-color": "#ffffff", @@ -194,7 +194,7 @@ "icon-color": "#757575", "icon-color-hover": "#999999", "button--icon-svg-color": "#757575", - "icon-ratingEmpty": "#8F8F8F", + "icon-ratingEmpty": "#777777", "icon-ratingFull": "#474747", "carousel-bgColor": "#ffffff", "carousel-title-color": "#444444", @@ -202,11 +202,11 @@ "carousel-dot-color": "#333333", "carousel-dot-color-active": "#757575", "carousel-dot-bgColor": "#ffffff", - "carousel-arrow-color": "#8f8f8f", + "carousel-arrow-color": "#777777", "carousel-arrow-color--hover": "#474747", "carousel-arrow-bgColor": "#ffffff", "carousel-arrow-borderColor": "#ffffff", - "carousel-play-pause-button-textColor": "#444444", + "carousel-play-pause-button-textColor": "#777777", "carousel-play-pause-button-textColor--hover": "#474747", "carousel-play-pause-button-bgColor": "#ffffff", "carousel-play-pause-button-borderColor": "#ffffff", @@ -219,7 +219,7 @@ "card--alternate-color--hover": "#ffffff", "form-label-font-color": "#666666", "input-font-color": "#666666", - "input-border-color": "#8F8F8F", + "input-border-color": "#777777", "input-border-color-active": "#474747", "input-bg-color": "#ffffff", "input-disabled-bg": "#ffffff", @@ -227,7 +227,7 @@ "select-arrow-color": "#757575", "checkRadio-color": "#333333", "checkRadio-backgroundColor": "#ffffff", - "checkRadio-borderColor": "#8f8f8f", + "checkRadio-borderColor": "#777777", "alert-backgroundColor": "#ffffff", "alert-color": "#333333", "alert-color-alt": "#ffffff", @@ -531,11 +531,11 @@ "carousel-dot-color": "#999999", "carousel-dot-color-active": "#f08383", "carousel-dot-bgColor": "#ffffff", - "carousel-arrow-color": "#8F8F8F", + "carousel-arrow-color": "#777777", "carousel-arrow-color--hover": "#474747", "carousel-arrow-bgColor": "#ffffff", "carousel-arrow-borderColor": "#ffffff", - "carousel-play-pause-button-textColor": "#8F8F8F", + "carousel-play-pause-button-textColor": "#777777", "carousel-play-pause-button-textColor--hover": "#474747", "carousel-play-pause-button-bgColor": "#ffffff", "carousel-play-pause-button-borderColor": "#ffffff", diff --git a/templates/components/common/body.html b/templates/components/common/body.html index 044d956627..e8f69e8f0e 100644 --- a/templates/components/common/body.html +++ b/templates/components/common/body.html @@ -1,8 +1,8 @@ -
+
{{#block "hero"}} {{/block}}
{{#block "page"}} {{/block}}
{{> components/common/modal/modal}} {{> components/common/alert/alert-modal}} -
+ From b4093db7d53410c73125e3e2fd842af9b31931c2 Mon Sep 17 00:00:00 2001 From: mfaris9 Date: Tue, 12 May 2026 10:28:49 -0400 Subject: [PATCH 4/4] Update per reviewer feedback: mad spacing sixth which correspons to 4px. --- assets/scss/layouts/footer/_footer.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/scss/layouts/footer/_footer.scss b/assets/scss/layouts/footer/_footer.scss index 65baf78236..b861f66267 100644 --- a/assets/scss/layouts/footer/_footer.scss +++ b/assets/scss/layouts/footer/_footer.scss @@ -113,7 +113,7 @@ color: stencilColor("color-textSecondary"); text-decoration: none; display: inline-block; - padding: spacing("quarter") 0; + padding: spacing("sixth") 0; &:hover { color: stencilColor("color-textSecondary--hover");