From a1493c816101f2c33cdd3c07281b8d725c5fc000 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Thu, 26 May 2022 09:38:48 +0300 Subject: [PATCH 1/8] Use luminance instead of brightness --- .../block-editor/src/components/contrast-checker/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/contrast-checker/index.js b/packages/block-editor/src/components/contrast-checker/index.js index 98b4a6fb1afdf..2a64ea727c128 100644 --- a/packages/block-editor/src/components/contrast-checker/index.js +++ b/packages/block-editor/src/components/contrast-checker/index.js @@ -52,7 +52,7 @@ function ContrastChecker( { ]; const colordBackgroundColor = colord( currentBackgroundColor ); const backgroundColorHasTransparency = colordBackgroundColor.alpha() < 1; - const backgroundColorBrightness = colordBackgroundColor.brightness(); + const backgroundColorLuminance = colordBackgroundColor.luminance(); const isReadableOptions = { level: 'AA', size: @@ -82,7 +82,7 @@ function ContrastChecker( { continue; } message = - backgroundColorBrightness < colordTextColor.brightness() + backgroundColorLuminance < colordTextColor.luminance() ? sprintf( // translators: %s is a type of text color, e.g., "text color" or "link color". __( From 6ca8c9b622eef375bffb26aeaf3dba65c2870c25 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Thu, 26 May 2022 10:33:01 +0300 Subject: [PATCH 2/8] Add a strictColorContrastChecks feature --- .../block-editor/src/components/contrast-checker/index.js | 8 +++++++- .../edit-post/src/components/preferences-modal/index.js | 7 +++++++ packages/edit-post/src/index.js | 1 + 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/contrast-checker/index.js b/packages/block-editor/src/components/contrast-checker/index.js index 2a64ea727c128..986f688e86471 100644 --- a/packages/block-editor/src/components/contrast-checker/index.js +++ b/packages/block-editor/src/components/contrast-checker/index.js @@ -11,6 +11,8 @@ import { colord, extend } from 'colord'; import { __, sprintf } from '@wordpress/i18n'; import { Notice } from '@wordpress/components'; import { speak } from '@wordpress/a11y'; +import { select } from '@wordpress/data'; +import { store as preferencesStore } from '@wordpress/preferences'; extend( [ namesPlugin, a11yPlugin ] ); @@ -50,11 +52,15 @@ function ContrastChecker( { description: __( 'link color' ), }, ]; + const strictContrastCheck = select( preferencesStore ).get( + 'core/edit-post', + 'strictColorContrastChecks' + ); const colordBackgroundColor = colord( currentBackgroundColor ); const backgroundColorHasTransparency = colordBackgroundColor.alpha() < 1; const backgroundColorLuminance = colordBackgroundColor.luminance(); const isReadableOptions = { - level: 'AA', + level: strictContrastCheck ? 'AAA' : 'AA', size: isLargeText || ( isLargeText !== false && fontSize >= 24 ) ? 'large' diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js index c08dda81f8e59..1251b485317ec 100644 --- a/packages/edit-post/src/components/preferences-modal/index.js +++ b/packages/edit-post/src/components/preferences-modal/index.js @@ -152,6 +152,13 @@ export default function EditPostPreferencesModal() { label={ __( 'Display block breadcrumbs' ) } /> ) } + ), diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js index fe967eeeed337..1d232a59834a5 100644 --- a/packages/edit-post/src/index.js +++ b/packages/edit-post/src/index.js @@ -58,6 +58,7 @@ export function initializeEditor( showIconLabels: false, showListViewByDefault: false, themeStyles: true, + strictColorContrastChecks: false, welcomeGuide: true, welcomeGuideTemplate: true, } ); From 6c420b1a0efee529277e86cc606208261fc24040 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Fri, 27 May 2022 09:57:08 +0300 Subject: [PATCH 3/8] Improve help text --- packages/edit-post/src/components/preferences-modal/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js index 1251b485317ec..838d2b48fb53c 100644 --- a/packages/edit-post/src/components/preferences-modal/index.js +++ b/packages/edit-post/src/components/preferences-modal/index.js @@ -155,7 +155,7 @@ export default function EditPostPreferencesModal() { From 8c9f361ce3870d5182d64b332ae32def936c1c8c Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Fri, 27 May 2022 10:24:32 +0300 Subject: [PATCH 4/8] Improve help text to show the currently checked level --- .../src/components/preferences-modal/index.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js index 838d2b48fb53c..4d0583490abb6 100644 --- a/packages/edit-post/src/components/preferences-modal/index.js +++ b/packages/edit-post/src/components/preferences-modal/index.js @@ -2,7 +2,7 @@ * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { useViewportMatch } from '@wordpress/compose'; import { useSelect, useDispatch } from '@wordpress/data'; import { useMemo } from '@wordpress/element'; @@ -76,6 +76,13 @@ export default function EditPostPreferencesModal() { closeGeneralSidebar(); }; + const colorContrastCheckedLevel = useSelect( ( select ) => { + const { isFeatureActive } = select( editPostStore ); + const strictColorContrastChecksEnabled = isFeatureActive( + 'strictColorContrastChecks' + ); + return strictColorContrastChecksEnabled ? 'AAA' : 'AA'; + }, [] ); const sections = useMemo( () => [ { @@ -154,8 +161,9 @@ export default function EditPostPreferencesModal() { ) } From edf28c57f0d58aca2a2b2cbc9142f9942049a0bb Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Fri, 27 May 2022 10:34:38 +0300 Subject: [PATCH 5/8] tweak checks & regen snapshot --- .../edit-post/src/components/preferences-modal/index.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js index 4d0583490abb6..b7e5d167a16f7 100644 --- a/packages/edit-post/src/components/preferences-modal/index.js +++ b/packages/edit-post/src/components/preferences-modal/index.js @@ -76,12 +76,9 @@ export default function EditPostPreferencesModal() { closeGeneralSidebar(); }; - const colorContrastCheckedLevel = useSelect( ( select ) => { + const colorContrastCheckAAA = useSelect( ( select ) => { const { isFeatureActive } = select( editPostStore ); - const strictColorContrastChecksEnabled = isFeatureActive( - 'strictColorContrastChecks' - ); - return strictColorContrastChecksEnabled ? 'AAA' : 'AA'; + return isFeatureActive( 'strictColorContrastChecks' ); }, [] ); const sections = useMemo( () => [ @@ -163,7 +160,7 @@ export default function EditPostPreferencesModal() { featureName="strictColorContrastChecks" help={ sprintf( 'Switches the color contrast checker to be comply with WCAG AAA guidelines instead of WCAG AA. Currently checking for: %s.', - colorContrastCheckedLevel + colorContrastCheckAAA ? 'AAA' : 'AA' ) } label={ __( 'Strict color-contrast checker' ) } /> From b4b5538d46c78bb1ea43707dd7d86dc9c9e45d15 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Mon, 20 Jun 2022 12:49:11 +0300 Subject: [PATCH 6/8] use useSelect --- .../src/components/contrast-checker/index.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/contrast-checker/index.js b/packages/block-editor/src/components/contrast-checker/index.js index 986f688e86471..4d9d1d312358a 100644 --- a/packages/block-editor/src/components/contrast-checker/index.js +++ b/packages/block-editor/src/components/contrast-checker/index.js @@ -11,7 +11,7 @@ import { colord, extend } from 'colord'; import { __, sprintf } from '@wordpress/i18n'; import { Notice } from '@wordpress/components'; import { speak } from '@wordpress/a11y'; -import { select } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; import { store as preferencesStore } from '@wordpress/preferences'; extend( [ namesPlugin, a11yPlugin ] ); @@ -29,6 +29,16 @@ function ContrastChecker( { } ) { const currentBackgroundColor = backgroundColor || fallbackBackgroundColor; + const { strictContrastCheck } = useSelect( + ( select ) => ( { + strictContrastCheck: select( preferencesStore ).get( + 'core/edit-post', + 'strictColorContrastChecks' + ), + } ), + [] + ); + // Must have a background color. if ( ! currentBackgroundColor ) { return null; @@ -52,10 +62,6 @@ function ContrastChecker( { description: __( 'link color' ), }, ]; - const strictContrastCheck = select( preferencesStore ).get( - 'core/edit-post', - 'strictColorContrastChecks' - ); const colordBackgroundColor = colord( currentBackgroundColor ); const backgroundColorHasTransparency = colordBackgroundColor.alpha() < 1; const backgroundColorLuminance = colordBackgroundColor.luminance(); From 8e24ba22629d16f2511d4987cae7d896473f4822 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Fri, 1 Dec 2023 10:39:39 +0200 Subject: [PATCH 7/8] Update colord to v2.9.3 consistently everywhere --- package-lock.json | 20 ++++++++++---------- packages/block-editor/package.json | 2 +- packages/block-library/package.json | 2 +- packages/blocks/package.json | 2 +- packages/components/package.json | 2 +- packages/edit-site/package.json | 2 +- 6 files changed, 15 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index 94a60889e63cc..b55e9ee2e5cee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54517,7 +54517,7 @@ "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.7.0", + "colord": "^2.9.3", "deepmerge": "^4.3.0", "diff": "^4.0.2", "dom-scroll-into-view": "^1.2.1", @@ -54612,7 +54612,7 @@ "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.7.0", + "colord": "^2.9.3", "escape-html": "^1.0.3", "fast-average-color": "^9.1.1", "fast-deep-equal": "^3.1.3", @@ -54680,7 +54680,7 @@ "@wordpress/private-apis": "file:../private-apis", "@wordpress/shortcode": "file:../shortcode", "change-case": "^4.1.2", - "colord": "^2.7.0", + "colord": "^2.9.3", "fast-deep-equal": "^3.1.3", "hpq": "^1.3.0", "is-plain-object": "^5.0.0", @@ -54777,7 +54777,7 @@ "@wordpress/warning": "file:../warning", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.7.0", + "colord": "^2.9.3", "date-fns": "^2.28.0", "deepmerge": "^4.3.0", "dom-scroll-into-view": "^1.2.1", @@ -55320,7 +55320,7 @@ "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.9.2", + "colord": "^2.9.3", "deepmerge": "^4.3.0", "fast-deep-equal": "^3.1.3", "is-plain-object": "^5.0.0", @@ -69985,7 +69985,7 @@ "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.7.0", + "colord": "^2.9.3", "deepmerge": "^4.3.0", "diff": "^4.0.2", "dom-scroll-into-view": "^1.2.1", @@ -70053,7 +70053,7 @@ "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.7.0", + "colord": "^2.9.3", "escape-html": "^1.0.3", "fast-average-color": "^9.1.1", "fast-deep-equal": "^3.1.3", @@ -70100,7 +70100,7 @@ "@wordpress/private-apis": "file:../private-apis", "@wordpress/shortcode": "file:../shortcode", "change-case": "^4.1.2", - "colord": "^2.7.0", + "colord": "^2.9.3", "fast-deep-equal": "^3.1.3", "hpq": "^1.3.0", "is-plain-object": "^5.0.0", @@ -70172,7 +70172,7 @@ "@wordpress/warning": "file:../warning", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.7.0", + "colord": "^2.9.3", "date-fns": "^2.28.0", "deepmerge": "^4.3.0", "dom-scroll-into-view": "^1.2.1", @@ -70555,7 +70555,7 @@ "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.9.2", + "colord": "^2.9.3", "deepmerge": "^4.3.0", "fast-deep-equal": "^3.1.3", "is-plain-object": "^5.0.0", diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json index ec17341369382..295af6572126c 100644 --- a/packages/block-editor/package.json +++ b/packages/block-editor/package.json @@ -66,7 +66,7 @@ "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.7.0", + "colord": "^2.9.3", "deepmerge": "^4.3.0", "diff": "^4.0.2", "dom-scroll-into-view": "^1.2.1", diff --git a/packages/block-library/package.json b/packages/block-library/package.json index f989e586ec7b8..7c325dcc4bde1 100644 --- a/packages/block-library/package.json +++ b/packages/block-library/package.json @@ -63,7 +63,7 @@ "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.7.0", + "colord": "^2.9.3", "escape-html": "^1.0.3", "fast-average-color": "^9.1.1", "fast-deep-equal": "^3.1.3", diff --git a/packages/blocks/package.json b/packages/blocks/package.json index 961cb338d7337..b1a52be00c644 100644 --- a/packages/blocks/package.json +++ b/packages/blocks/package.json @@ -44,7 +44,7 @@ "@wordpress/private-apis": "file:../private-apis", "@wordpress/shortcode": "file:../shortcode", "change-case": "^4.1.2", - "colord": "^2.7.0", + "colord": "^2.9.3", "fast-deep-equal": "^3.1.3", "hpq": "^1.3.0", "is-plain-object": "^5.0.0", diff --git a/packages/components/package.json b/packages/components/package.json index 25ddcf603fb32..bf7bb23bd5364 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -62,7 +62,7 @@ "@wordpress/warning": "file:../warning", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.7.0", + "colord": "^2.9.3", "date-fns": "^2.28.0", "deepmerge": "^4.3.0", "dom-scroll-into-view": "^1.2.1", diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json index 2ff4f10c084a8..bd22c6b825935 100644 --- a/packages/edit-site/package.json +++ b/packages/edit-site/package.json @@ -69,7 +69,7 @@ "@wordpress/wordcount": "file:../wordcount", "change-case": "^4.1.2", "classnames": "^2.3.1", - "colord": "^2.9.2", + "colord": "^2.9.3", "deepmerge": "^4.3.0", "fast-deep-equal": "^3.1.3", "is-plain-object": "^5.0.0", From 2fc63eca2a39c100717b884010ab35c2356c038f Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Fri, 1 Dec 2023 10:46:31 +0200 Subject: [PATCH 8/8] Added changelog entry --- packages/block-editor/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index b53b86140f5a3..e3ff07d4d705b 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased +- Added option to allow switching between AA/AAA color-constrast checks ([41363](https://github.com/WordPress/gutenberg/pull/41363)). + ## 12.15.0 (2023-11-29) ## 12.14.0 (2023-11-16)