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

Add VoiceOver accessibility to contrast-checker #14649

Merged
merged 6 commits into from
Apr 4, 2019
Merged

Add VoiceOver accessibility to contrast-checker #14649

Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
184e174
Added VoiceOver to contrast-checker
Mar 26, 2019
548a772
Wrap speak in UseEffect
Mar 27, 2019
607a6c4
import and useEffect attribute updated
Mar 28, 2019
7fccc66
Simplify message in VoiceOver
Mar 29, 2019
70d1d7a
If condition not needed as both messages same now
AmartyaU Mar 29, 2019
b26f63a
Update index.js
gziolo Apr 3, 2019
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
9 changes: 9 additions & 0 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 @@ -6,8 +6,10 @@ import tinycolor from 'tinycolor2';
/**
* WordPress dependencies
*/
import { speak } from '@wordpress/a11y';
import { __ } from '@wordpress/i18n';
import { Notice } from '@wordpress/components';
import { useEffect } from '@wordpress/element';

function ContrastChecker( {
backgroundColor,
Expand All @@ -34,6 +36,13 @@ function ContrastChecker( {
const msg = tinyBackgroundColor.getBrightness() < tinyTextColor.getBrightness() ?
__( 'This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.' ) :
__( 'This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.' );
useEffect( () => {
if ( tinyBackgroundColor.getBrightness() < tinyTextColor.getBrightness() ) {
speak( __( 'This color combination may be hard for people to read.' ) );
gziolo marked this conversation as resolved.
Show resolved Hide resolved
} else {
speak( __( 'This color combination may be hard for people to read.' ) );
}
}, [ backgroundColor, textColor ] );
return (
<div className="editor-contrast-checker block-editor-contrast-checker">
<Notice status="warning" isDismissible={ false }>
Expand Down