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

Jump to bottom

Add preference to switch between AA & AAA levels for color-contrast checks #41363

Open
wants to merge 8 commits into
base: trunk
Choose a base branch
from
Open

Add preference to switch between AA & AAA levels for color-contrast checks #41363

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a1493c8
Use luminance instead of brightness
aristath May 26, 2022
6ca8c9b
Add a strictColorContrastChecks feature
aristath May 26, 2022
6c420b1
Improve help text
aristath May 27, 2022
8c9f361
Improve help text to show the currently checked level
aristath May 27, 2022
edf28c5
tweak checks & regen snapshot
aristath May 27, 2022
b4b5538
use useSelect
aristath Jun 20, 2022
8e24ba2
Update colord to v2.9.3 consistently everywhere
aristath Dec 1, 2023
2fc63ec
Added changelog entry
aristath Dec 1, 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
20 changes: 10 additions & 10 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions packages/block-editor/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
18 changes: 15 additions & 3 deletions packages/block-editor/src/components/contrast-checker/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 { useSelect } from '@wordpress/data';
import { store as preferencesStore } from '@wordpress/preferences';

extend( [ namesPlugin, a11yPlugin ] );

Expand All @@ -27,6 +29,16 @@ function ContrastChecker( {
} ) {
const currentBackgroundColor = backgroundColor || fallbackBackgroundColor;

const { strictContrastCheck } = useSelect(
( select ) => ( {
strictContrastCheck: select( preferencesStore ).get(
'core/edit-post',
Copy link
Contributor

@talldan talldan Dec 4, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

When preferences are saved they're grouped into objects like this:

{
    'core': {
         // preferences shared across editors (there aren't any at the moment)
    },
    'core/edit-post': {
        // preferences that are only for the post editor
    },
    'core/edit-site': {
       // preferences that are only for the site editor
    }
}

So you'd need to decide what the right value here should be. A problem is that this is in the 'block-editor' package which is used across both the post and site editor, so having 'core/edit-post' hardcoded doesn't seem like the right option.

I think it would be good to have the strictContrastCheck passed in as a prop to the component rather than have the preference built-in to solve that. You'd then have more control over whether to use 'core', 'core/edit-post' or 'core/edit-site' as the place to save the preference value.

'strictColorContrastChecks'
),
} ),
[]
);

// Must have a background color.
if ( ! currentBackgroundColor ) {
return null;
Expand All @@ -52,9 +64,9 @@ function ContrastChecker( {
];
const colordBackgroundColor = colord( currentBackgroundColor );
const backgroundColorHasTransparency = colordBackgroundColor.alpha() < 1;
const backgroundColorBrightness = colordBackgroundColor.brightness();
const backgroundColorLuminance = colordBackgroundColor.luminance();
const isReadableOptions = {
level: 'AA',
level: strictContrastCheck ? 'AAA' : 'AA',
size:
isLargeText || ( isLargeText !== false && fontSize >= 24 )
? 'large'
Expand Down Expand Up @@ -82,7 +94,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".
__(
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/blocks/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion packages/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
14 changes: 13 additions & 1 deletion packages/edit-post/src/components/preferences-modal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -76,6 +76,10 @@ export default function EditPostPreferencesModal() {
closeGeneralSidebar();
};

const colorContrastCheckAAA = useSelect( ( select ) => {
const { isFeatureActive } = select( editPostStore );
return isFeatureActive( 'strictColorContrastChecks' );
}, [] );
Comment on lines +79 to +82
Copy link
Contributor

Choose a reason for hiding this comment

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

This can be selected from the preferences store instead of using isFeatureActive (which I think is deprecated, or should be deprecated).

const sections = useMemo(
() => [
{
Expand Down Expand Up @@ -152,6 +156,14 @@ export default function EditPostPreferencesModal() {
label={ __( 'Display block breadcrumbs' ) }
/>
) }
<EnableFeature
Copy link
Member

Choose a reason for hiding this comment

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

I mentioned in another issue that it'd make sense to introduce a new Accessibility panel to the settings modal instead of folding everything into appearance.

Copy link
Member

Choose a reason for hiding this comment

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

Here: #41041 (comment)

Copy link
Member Author

Choose a reason for hiding this comment

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

Is this something that would block this PR? I believe that if at some point we introduce an a11y panel, then we can move that option there (if and when that happens)

Copy link
Member

Choose a reason for hiding this comment

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

It shouldn't block this, just connecting the dots since it's been mentioned in a few PRs adding features but hasn't gotten much attention.

featureName="strictColorContrastChecks"
help={ sprintf(
'Switches the color contrast checker to be comply with WCAG AAA guidelines instead of WCAG AA. Currently checking for: %s.',
colorContrastCheckAAA ? 'AAA' : 'AA'
) }
label={ __( 'Strict color-contrast checker' ) }
/>
</PreferencesModalSection>
</>
),
Expand Down
1 change: 1 addition & 0 deletions packages/edit-post/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ export function initializeEditor(
showIconLabels: false,
showListViewByDefault: false,
themeStyles: true,
strictColorContrastChecks: false,
welcomeGuide: true,
welcomeGuideTemplate: true,
} );
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Loading