Add font size logic to ContrastChecker component; Add test cases; (#8059

) Contrast checker included logic to differentiate between large and small text. The logic is dependent on font size, so it makes sense to have for normal cases logic that uses the font size inside ContrastChecker checker. But because the logic is not just dependent on font size (e.g: if the text is bold for the same font size the contrast may be valid) we allow users of the component to still rely on isLargeText prop and decide by them selfs if the text they contain is considered large or not.
WordPress · Jul 20, 2018 · 201be4b · 201be4b
1 parent 767ef1e
commit 201be4b
Show file tree

Hide file tree

Showing 4 changed files with 154 additions and 3 deletions.
diff --git a/core-blocks/paragraph/index.js b/core-blocks/paragraph/index.js
@@ -251,10 +251,10 @@ class ParagraphBlock extends Component {
 						textColor={ textColor.value }
 						backgroundColor={ backgroundColor.value }
 						{ ...{
+							fontSize,
 							fallbackBackgroundColor,
 							fallbackTextColor,
 						} }
-						isLargeText={ fontSize >= 18 }
 					/>
 				</InspectorControls>
 				<RichText

diff --git a/editor/components/contrast-checker/index.js b/editor/components/contrast-checker/index.js
@@ -14,7 +14,14 @@ import { Notice } from '@wordpress/components';
  */
 import './style.scss';
 
-function ContrastChecker( { backgroundColor, textColor, isLargeText, fallbackBackgroundColor, fallbackTextColor } ) {
+function ContrastChecker( {
+	backgroundColor,
+	fallbackBackgroundColor,
+	fallbackTextColor,
+	fontSize,
+	isLargeText,
+	textColor,
+} ) {
 	if ( ! ( backgroundColor || fallbackBackgroundColor ) || ! ( textColor || fallbackTextColor ) ) {
 		return null;
 	}
@@ -25,7 +32,7 @@ function ContrastChecker( { backgroundColor, textColor, isLargeText, fallbackBac
 	if ( hasTransparency || tinycolor.isReadable(
 		tinyBackgroundColor,
 		tinyTextColor,
-		{ level: 'AA', size: ( isLargeText ? 'large' : 'small' ) }
+		{ level: 'AA', size: ( isLargeText || ( isLargeText !== false && fontSize >= 18 ) ? 'large' : 'small' ) }
 	) ) {
 		return null;
 	}

diff --git a/editor/components/contrast-checker/test/__snapshots__/index.js.snap b/editor/components/contrast-checker/test/__snapshots__/index.js.snap
@@ -77,3 +77,79 @@ exports[`ContrastChecker should render messages when the textColor is valid, but
   </div>
 </ContrastChecker>
 `;
+
+exports[`ContrastChecker should take into consideration the font size passed 1`] = `
+<ContrastChecker
+  backgroundColor="#C44B4B"
+  fontSize={17}
+  textColor="#000000"
+>
+  <div
+    className="editor-contrast-checker"
+  >
+    <Notice
+      isDismissible={false}
+      status="warning"
+    >
+      <div
+        className="notice notice-alt notice-warning"
+      >
+        <p>
+          This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+        </p>
+      </div>
+    </Notice>
+  </div>
+</ContrastChecker>
+`;
+
+exports[`ContrastChecker should take into consideration wherever text is large or not 1`] = `
+<ContrastChecker
+  backgroundColor="#C44B4B"
+  isLargeText={false}
+  textColor="#000000"
+>
+  <div
+    className="editor-contrast-checker"
+  >
+    <Notice
+      isDismissible={false}
+      status="warning"
+    >
+      <div
+        className="notice notice-alt notice-warning"
+      >
+        <p>
+          This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+        </p>
+      </div>
+    </Notice>
+  </div>
+</ContrastChecker>
+`;
+
+exports[`ContrastChecker should use isLargeText to make decisions if both isLargeText and fontSize props are passed 1`] = `
+<ContrastChecker
+  backgroundColor="#C44B4B"
+  fontSize={18}
+  isLargeText={false}
+  textColor="#000000"
+>
+  <div
+    className="editor-contrast-checker"
+  >
+    <Notice
+      isDismissible={false}
+      status="warning"
+    >
+      <div
+        className="notice notice-alt notice-warning"
+      >
+        <p>
+          This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.
+        </p>
+      </div>
+    </Notice>
+  </div>
+</ContrastChecker>
+`;
diff --git a/editor/components/contrast-checker/test/index.js b/editor/components/contrast-checker/test/index.js
@@ -88,6 +88,74 @@ describe( 'ContrastChecker', () => {
 		expect( componentWrapper ).toMatchSnapshot();
 	} );
 
+	test( 'should take into consideration wherever text is large or not', () => {
+		const componentWrapperSmallText = mount(
+			<ContrastChecker
+				backgroundColor="#C44B4B"
+				textColor="#000000"
+				isLargeText={ false }
+			/>
+		);
+
+		expect( componentWrapperSmallText ).toMatchSnapshot();
+
+		const componentWrapperLargeText = mount(
+			<ContrastChecker
+				backgroundColor="#C44B4B"
+				textColor="#000000"
+				isLargeText={ true }
+			/>
+		);
+
+		expect( componentWrapperLargeText.html() ).toBeNull();
+	} );
+
+	test( 'should take into consideration the font size passed', () => {
+		const componentWrapperSmallFontSize = mount(
+			<ContrastChecker
+				backgroundColor="#C44B4B"
+				textColor="#000000"
+				fontSize={ 17 }
+			/>
+		);
+
+		expect( componentWrapperSmallFontSize ).toMatchSnapshot();
+
+		const componentWrapperLargeText = mount(
+			<ContrastChecker
+				backgroundColor="#C44B4B"
+				textColor="#000000"
+				fontSize={ 18 }
+			/>
+		);
+
+		expect( componentWrapperLargeText.html() ).toBeNull();
+	} );
+
+	test( 'should use isLargeText to make decisions if both isLargeText and fontSize props are passed', () => {
+		const componentWrapper = mount(
+			<ContrastChecker
+				backgroundColor="#C44B4B"
+				textColor="#000000"
+				fontSize={ 17 }
+				isLargeText={ true }
+			/>
+		);
+
+		expect( componentWrapper.html() ).toBeNull();
+
+		const componentWrapperNoLargeText = mount(
+			<ContrastChecker
+				backgroundColor="#C44B4B"
+				textColor="#000000"
+				fontSize={ 18 }
+				isLargeText={ false }
+			/>
+		);
+
+		expect( componentWrapperNoLargeText ).toMatchSnapshot();
+	} );
+
 	test( 'should render null when the colors meet AA WCAG guidelines, with only fallback colors.', () => {
 		const componentWrapper = mount(
 			<ContrastChecker