Skip to content

A11y: ensure contrast compliance for Blau skin #1360

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

Closed
AnaMontes11 wants to merge 7 commits into from
Closed

A11y: ensure contrast compliance for Blau skin #1360

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9c43deb
Update blau.tsx
AnaMontes11 May 5, 2025
fc5ca28
a11y blau improvements
AnaMontes11 May 6, 2025
6c8e489
Merge branch 'master' into new-blau-a11y
yceballost May 7, 2025
022d98c
inputBorder and warning fixed
AnaMontes11 May 7, 2025
5ad0091
Update main.js
yceballost May 8, 2025
1ede92a
Update main.js
yceballost May 8, 2025
98ef67e
comment review
AnaMontes11 May 9, 2025
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
5 changes: 1 addition & 4 deletions .github/actions/audit-accessibility/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const startStorybook = () => {
storybookServer.listen(port, () => {
console.log(`Serving static storybook at: http://localhost:${port}`);
resolve({
getStoryUrl: (id) => `http://localhost:${port}/iframe.html?viewMode=story&id=${id}`,
getStoryUrl: (id) => `http://localhost:${port}/iframe.html?viewMode=story&id=${id}&skin=Blau`,
closeStorybook: () => {
console.log('Stopping static storybook server');
storybookServer.close();
Expand Down Expand Up @@ -81,12 +81,9 @@ const audit = async (browser, url, disabledRules = []) => {
// ignored because we use invented autocomplete values to workaround related chrome issues
'autocomplete-valid',
// ignored because disabled input fields have a low contrast by design spec
'color-contrast',
// https://jira.tid.es/browse/WEB-612
'scrollable-region-focusable',
// https://jira.tid.es/browse/WEB-616
'role-img-alt',
// https://jira.tid.es/browse/WEB-627
'button-name',
...disabledRules,
])
Expand Down
112 changes: 57 additions & 55 deletions src/skins/blau.tsx
View file
Open in desktop
Comment thread
yceballost marked this conversation as resolved.
Comment thread
yceballost marked this conversation as resolved.
Original file line number Diff line number Diff line change
Expand Up @@ -20,56 +20,58 @@ export const palette = {
blauYellow10: '#FFF6E9',
blauYellow40: '#FFC364',
blauYellow60: '#F09500',
blauYellow65: '#D28200',
blauYellow70: '#996614',
blauGreen: '#30D300',
blauGreen10: '#EAFBE5',
blauGreen30: '#97E980',
blauGreen70: '#1D7F00',
blauRed: '#F64417',
blauRed: '#D12937',
blauRed10: '#FEECE8',
blauRed20: '#FCC7B9',
blauRed30: '#FA9E87',
blauRed40: '#F97C5D',
blauRed70: '#C93712',
grey1: '#F5F9FA',
grey2: '#E7E7E7',
grey3: '#B8B8B8',
grey4: '#A0A0A0',
grey5: '#808285',
grey1: '#F6F6F6',
grey2: '#F2F2F2',
grey3: '#DDDDDD',
grey4: '#8A8C90',
grey5: '#666666',
grey6: '#000000',
white: '#FFFFFF',
darkModeBlack: '#191919',
darkModeGrey: '#242424',
darkModeGrey6: '#313235',
darkModeGrey5: '#6D7D88',
darkModeGrey6: '#252525',
};

export const getBlauSkin: GetKnownSkin = () => {
const skin: KnownSkin = {
name: BLAU_SKIN,
colors: {
background: palette.white,
backgroundAlternative: palette.blauBluePrimary20,
backgroundBrand: palette.blauBluePrimary,
backgroundBrandSecondary: palette.blauBluePrimary,
appBarBackground: palette.white,
background: palette.white,
backgroundContainer: palette.white,
backgroundContainerError: palette.blauRed10,
backgroundContainerHover: applyAlpha(palette.blauBlueSecondary, 0.05),
backgroundContainerPressed: applyAlpha(palette.blauBlueSecondary, 0.08),
backgroundContainerBrand: palette.blauBluePrimary,
backgroundContainerBrand: palette.blauBlueSecondary,
backgroundContainerBrandHover: applyAlpha(palette.darkModeBlack, 0.2),
backgroundContainerBrandPressed: applyAlpha(palette.darkModeBlack, 0.4),
backgroundContainerBrandOverInverse: palette.blauBlueSecondary,
backgroundContainerBrandOverInverse: palette.blauBlueSecondary60,
backgroundContainerAlternative: palette.blauBluePrimary20,
backgroundOverlay: applyAlpha(palette.blauBlueSecondary, 0.75),
backgroundSkeleton: palette.grey2,
backgroundSkeleton: palette.grey3,
backgroundSkeletonInverse: palette.blauBlueSecondary,
navigationBarBackground: palette.blauBluePrimary,
backgroundAlternative: palette.blauBluePrimary20,
backgroundBrandTop: palette.blauBluePrimary,
backgroundBrandBottom: palette.blauBluePrimary,
appBarBackground: palette.white,
navigationBarBackground: palette.blauBluePrimary,
skeletonWave: palette.grey2,
borderLow: palette.grey1,
border: palette.grey2,
border: palette.grey3,
borderHigh: palette.grey5,
borderSelected: palette.blauBlueSecondary60,
coverBackgroundHover: applyAlpha(palette.darkModeBlack, 0.25),
Expand Down Expand Up @@ -108,28 +110,28 @@ export const getBlauSkin: GetKnownSkin = () => {
textLinkSnackbar: palette.blauPurple30,
textActivated: palette.blauBlueSecondary,
textBrand: palette.blauBluePrimary,
inputBorder: palette.grey5,
Comment thread
yceballost marked this conversation as resolved.
control: palette.grey5,
inputBorder: palette.grey4,
control: palette.grey4,
controlActivated: palette.blauBlueSecondary,
controlInverse: palette.blauBluePrimary30,
controlActivatedInverse: palette.white,
controlError: palette.blauRed,
barTrack: palette.grey2,
barTrackInverse: applyAlpha(palette.grey6, 0.2),
barTrack: palette.grey3,
barTrackInverse: applyAlpha(palette.white, 0.5),
Copy link
Copy Markdown
Contributor

@yceballost yceballost May 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

this color works worse than grey6, why did you make this change?
image

Copy link
Copy Markdown
Contributor Author

@AnaMontes11 AnaMontes11 May 12, 2025

Choose a reason for hiding this comment

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

To maintain parity with the other brands, I thought this worked better in my opinion—but I’ll roll it back.

loadingBar: palette.blauBlueSecondary,
loadingBarBackground: palette.blauBlueSecondary10,
loadingBarBackground: palette.blauBlueSecondary20,
toggleAndroidInactive: palette.grey2,
toggleAndroidBackgroundActive: palette.blauBlueSecondary10,
toggleAndroidBackgroundActive: palette.blauBlueSecondary30,
iosControlKnob: palette.white,
controlKnobInverse: palette.blauBlueSecondary,
divider: palette.grey2,
divider: palette.grey3,
dividerInverse: applyAlpha(palette.white, 0.2),
navigationBarDivider: palette.blauBluePrimary,
badge: palette.blauRed,
feedbackErrorBackground: palette.blauRed,
feedbackInfoBackground: palette.grey6,
brand: palette.blauBluePrimary,
brandHigh: palette.blauBlueSecondary,
brandHigh: palette.blauBlueSecondary60,
inverse: palette.white,
neutralHigh: palette.grey6,
neutralMedium: palette.grey5,
Expand All @@ -143,15 +145,15 @@ export const getBlauSkin: GetKnownSkin = () => {
error: palette.blauRed,
textError: palette.blauRed,
textErrorInverse: palette.white,
success: palette.blauGreen,
warning: palette.blauYellow,
success: palette.blauGreen70,
warning: palette.blauYellow65,
promo: palette.blauPurple,
highlight: palette.blauBluePrimary,
successLow: palette.blauGreen10,
warningLow: palette.blauYellow10,
errorLow: palette.blauRed10,
promoLow: palette.blauPurple10,
brandLow: palette.blauBlueSecondary10,
brandLow: palette.blauBluePrimary20,
successHigh: palette.blauGreen70,
warningHigh: palette.blauYellow70,
errorHigh: palette.blauRed70,
Expand All @@ -160,38 +162,38 @@ export const getBlauSkin: GetKnownSkin = () => {
warningHighInverse: palette.blauYellow70,
errorHighInverse: palette.blauRed70,
promoHighInverse: palette.blauPurple,
textNavigationBarPrimary: palette.white,
textNavigationBarSecondary: palette.blauBlueSecondary20,
textNavigationSearchBarHint: palette.blauBlueSecondary20,
textNavigationSearchBarText: palette.white,
textNavigationBarPrimary: palette.grey6,
textNavigationBarSecondary: palette.grey6,
textNavigationSearchBarHint: palette.grey6,
textNavigationSearchBarText: palette.grey6,
textAppBar: palette.grey5,
textAppBarSelected: palette.blauBlueSecondary60,
customTabsBackground: palette.blauBluePrimary,
tagTextPromo: palette.blauPurple,
tagTextActive: palette.blauBluePrimary,
tagTextActive: palette.blauBlueSecondary,
tagTextInactive: palette.grey5,
tagTextInfo: palette.blauBluePrimary,
tagTextInfo: palette.blauBlueSecondary,
tagTextSuccess: palette.blauGreen70,
tagTextWarning: palette.blauYellow70,
tagTextError: palette.blauRed70,
tagBackgroundPromo: palette.blauPurple10,
tagBackgroundActive: palette.blauBlueSecondary10,
tagBackgroundActive: palette.blauBluePrimary20,
tagBackgroundInactive: palette.grey1,
tagBackgroundInfo: palette.blauBlueSecondary10,
tagBackgroundInfo: palette.blauBluePrimary20,
tagBackgroundSuccess: palette.blauGreen10,
tagBackgroundWarning: palette.blauYellow10,
tagBackgroundError: palette.blauRed10,
tagTextPromoInverse: palette.blauPurple,
tagTextActiveInverse: palette.blauBluePrimary,
tagTextActiveInverse: palette.blauBlueSecondary,
tagTextInactiveInverse: palette.grey5,
tagTextInfoInverse: palette.blauBluePrimary,
tagTextInfoInverse: palette.blauBlueSecondary,
tagTextSuccessInverse: palette.blauGreen70,
tagTextWarningInverse: palette.blauYellow70,
tagTextErrorInverse: palette.blauRed70,
tagBackgroundPromoInverse: palette.blauPurple10,
tagBackgroundActiveInverse: palette.blauBlueSecondary10,
tagBackgroundActiveInverse: palette.blauBluePrimary20,
tagBackgroundInactiveInverse: palette.grey1,
tagBackgroundInfoInverse: palette.blauBlueSecondary10,
tagBackgroundInfoInverse: palette.blauBluePrimary20,
tagBackgroundSuccessInverse: palette.blauGreen10,
tagBackgroundWarningInverse: palette.blauYellow10,
tagBackgroundErrorInverse: palette.blauRed10,
Expand Down Expand Up @@ -228,13 +230,13 @@ export const getBlauSkin: GetKnownSkin = () => {
buttonDangerBackground: palette.blauRed,
buttonDangerBackgroundPressed: palette.blauRed70,
buttonDangerBackgroundHover: palette.blauRed70,
buttonLinkDangerBackgroundPressed: applyAlpha(palette.blauPurple, 0.3),
buttonLinkDangerBackgroundPressed: applyAlpha(palette.blauRed, 0.3),
buttonLinkDangerBackgroundInverse: applyAlpha(palette.white, 0),
buttonLinkDangerBackgroundInversePressed: applyAlpha(palette.blauPurple, 0.3),
buttonLinkBackgroundPressed: applyAlpha(palette.blauPurple, 0.3),
buttonLinkBackgroundInversePressed: applyAlpha(palette.blauPurple, 0.3),
buttonPrimaryBackground: palette.blauBlueSecondary,
buttonPrimaryBackgroundInverse: palette.blauBluePrimary,
buttonPrimaryBackgroundInverse: palette.blauBlueSecondary,
buttonPrimaryBackgroundPressed: palette.blauBlueSecondary60,
buttonPrimaryBackgroundHover: palette.blauBlueSecondary60,
buttonPrimaryBackgroundInversePressed: palette.blauBlueSecondary60,
Expand All @@ -255,25 +257,25 @@ export const getBlauSkin: GetKnownSkin = () => {
textButtonSecondaryInversePressed: palette.grey2,
textLink: palette.blauPurple30,
textLinkInverse: palette.blauPurple30,
textLinkDanger: palette.blauRed,
textLinkDanger: palette.blauRed40,
textLinkSnackbar: palette.blauPurple30,
textActivated: palette.blauBlueSecondary,
textActivated: palette.blauBluePrimary,
textBrand: palette.blauBluePrimary,
inputBorder: palette.grey5,
control: palette.darkModeGrey6,
inputBorder: palette.darkModeGrey5,
control: palette.grey4,
controlActivated: palette.blauBlueSecondary,
controlInverse: palette.darkModeGrey6,
controlInverse: palette.grey5,
controlActivatedInverse: palette.blauBlueSecondary,
controlError: palette.blauRed,
barTrack: palette.darkModeGrey6,
barTrackInverse: palette.darkModeGrey6,
barTrack: palette.grey5,
barTrackInverse: palette.grey5,
loadingBar: palette.blauBluePrimary,
loadingBarBackground: palette.darkModeGrey,
toggleAndroidInactive: palette.grey5,
toggleAndroidBackgroundActive: palette.blauBlueSecondary30,
loadingBarBackground: palette.grey5,
toggleAndroidInactive: palette.grey3,
toggleAndroidBackgroundActive: palette.blauBluePrimary30,
iosControlKnob: palette.grey2,
controlKnobInverse: palette.grey2,
divider: applyAlpha(palette.white, 0.05),
divider: applyAlpha(palette.white, 0.09),
dividerInverse: applyAlpha(palette.white, 0.05),
navigationBarDivider: palette.darkModeBlack,
badge: palette.blauRed,
Expand All @@ -283,8 +285,8 @@ export const getBlauSkin: GetKnownSkin = () => {
brandHigh: applyAlpha(palette.white, 0.05),
inverse: palette.grey2,
neutralHigh: palette.grey2,
neutralMedium: palette.grey5,
neutralMediumInverse: palette.grey5,
neutralMedium: palette.grey4,
neutralMediumInverse: palette.grey4,
neutralLow: palette.darkModeGrey6,
neutralLowAlternative: palette.darkModeGrey6,
textPrimary: palette.grey2,
Expand Down Expand Up @@ -320,7 +322,7 @@ export const getBlauSkin: GetKnownSkin = () => {
customTabsBackground: palette.darkModeBlack,
tagTextPromo: palette.blauPurple30,
tagTextActive: palette.blauBluePrimary,
tagTextInactive: palette.grey5,
tagTextInactive: palette.grey4,
tagTextInfo: palette.blauBluePrimary,
tagTextSuccess: palette.blauGreen30,
tagTextWarning: palette.blauYellow40,
Expand All @@ -334,7 +336,7 @@ export const getBlauSkin: GetKnownSkin = () => {
tagBackgroundError: palette.darkModeGrey6,
tagTextPromoInverse: palette.blauPurple30,
tagTextActiveInverse: palette.blauBluePrimary,
tagTextInactiveInverse: palette.grey5,
tagTextInactiveInverse: palette.grey4,
tagTextInfoInverse: palette.blauBluePrimary,
tagTextSuccessInverse: palette.blauGreen30,
tagTextWarningInverse: palette.blauYellow40,
Expand Down
Loading