Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

W-14337923: Fix a11y color contrasts #1534

Merged
merged 5 commits into from
Nov 10, 2023
Merged

W-14337923: Fix a11y color contrasts #1534

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0d78d43
fix a11y color contrasts
alexvuong Nov 9, 2023
d54a4d4
add changelog
alexvuong Nov 9, 2023
7d1c3e4
minor fix
alexvuong Nov 10, 2023
e9fbb4f
Merge branch 'develop' into fix/a11y-color-contrast-issues
alexvuong Nov 10, 2023
95e68cd
add more constrast for search bg and border
alexvuong Nov 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/template-retail-react-app/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
## v2.2.0-dev (Nov 3, 2023)
- (A11y) Ensure active user interface components have sufficient contrast [#1534](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1534)

## v2.1.0 (Nov 3, 2023)

- Support Storefront Preview
Expand Down
5 changes: 1 addition & 4 deletions packages/template-retail-react-app/app/pages/product-list/partials/color-refinements.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,7 @@ const ColorRefinements = ({filter, toggleFilter, selectedFilters}) => {
<Center
{...styles.swatchButton}
marginRight={0}
border={
value.label.toLowerCase() === 'white' &&
'1px solid black'
}
border="1px solid black"
>
<Box
marginRight={0}
Expand Down
1 change: 1 addition & 0 deletions packages/template-retail-react-app/app/theme/components/base/checkbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export default {
},
control: {
marginTop: '2px',
borderColor: 'gray.500',
_checked: {
backgroundColor: 'blue.600',
borderColor: 'blue.600',
Expand Down
8 changes: 7 additions & 1 deletion packages/template-retail-react-app/app/theme/components/base/input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,17 @@ export default {
}
},
variants: {
outline: {
field: {
borderColor: 'gray.500'
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gray 500 is the minimum value of blue colors that satisfies the constrast ratio 3:1 against #ffffff background
image

}
},
filled: {
// we use filled variant for
// search input
field: {
backgroundColor: 'gray.50',
borderColor: 'gray.500',
backgroundColor: 'gray.100',
_focus: {
backgroundColor: 'white'
},
Expand Down
3 changes: 2 additions & 1 deletion packages/template-retail-react-app/app/theme/foundations/shadows.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,6 @@
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
*/
export default {
top: '0px -1px 3px rgba(0, 0, 0, 0.1), 0px -1px 2px rgba(0, 0, 0, 0.06)'
top: '0px -1px 3px rgba(0, 0, 0, 0.1), 0px -1px 2px rgba(0, 0, 0, 0.06)',
outline: '0 0 0 3px var(--chakra-colors-blue-500)'
Copy link
Collaborator Author

@alexvuong alexvuong Nov 9, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Blue 500 is the minimum value of blue colors that satisfies the contrast ratio 3: 1 against #ffffff background
image

}
Loading