Fix contrast feedback (#76) (#77)

Moved to `customize_controls_enqueue_scripts` action (instead of `customize_preview_init`)

functions.php

@@ -56,6 +56,7 @@ add_action( 'widgets_init', '\Aldine\Actions\widgets_init' );
 add_action( 'wp_enqueue_scripts', '\Aldine\Actions\enqueue_assets' );
 add_action( 'customize_register', '\Aldine\Customizer\customize_register' );
 add_action( 'customize_preview_init', '\Aldine\Customizer\customize_preview_js' );
+add_action( 'customize_controls_enqueue_scripts', '\Aldine\Customizer\enqueue_color_contrast_validator' );
 
 // Catalog page: Network admin controls
 add_action( 'admin_enqueue_scripts', '\Aldine\Admin\admin_scripts' );

inc/customizer/namespace.php

@@ -12,7 +12,7 @@ use PressbooksMix\Assets;
 /**
  * Add postMessage support for site title and description for the Theme Customizer.
  *
- * @param WP_Customize_Manager $wp_customize Theme Customizer object.
+ * @param \WP_Customize_Manager $wp_customize Theme Customizer object.
  */
 function customize_register( \WP_Customize_Manager $wp_customize ) {
 	$wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
@@ -169,18 +169,30 @@ function customize_preview_js() {
 	$assets->setSrcDirectory( 'assets' )->setDistDirectory( 'dist' );
 
 	wp_enqueue_script( 'aldine/customizer', $assets->getPath( 'scripts/customizer.js' ), [ 'customize-preview' ], false, null );
-	// TODO @codingStandardsIgnoreStart
-	// wp_enqueue_script( 'wcag-validate-customizer-color-contrast', get_template_directory_uri() . '/lib/customizer-validate-wcag-color-contrast/customizer-validate-wcag-color-contrast.js', [ 'customize-controls' ] );
+}
+
+/**
+ * @see https://github.com/soderlind/customizer-validate-wcag-color-contrast
+ */
+function enqueue_color_contrast_validator() {
+	$handle = 'wcag-validate-customizer-color-contrast';
+
+	wp_enqueue_script(
+		$handle,
+		get_template_directory_uri() . '/lib/customizer-validate-wcag-color-contrast/customizer-validate-wcag-color-contrast.js',
+		[ 'customize-controls' ]
+	);
+
+	$exports = [
+		'validate_color_contrast' => [
+			'pb_network_color_primary_fg' => [ 'pb_network_color_primary' ],
+			'pb_network_color_accent_fg' => [ 'pb_network_color_accent' ],
+		],
+	];
 
-	// $exports = [
-	// 	'validate_color_contrast' => [
-	// 		'pb_network_color_primary_fg' => [ 'pb_network_color_primary' ],
-	// 		'pb_network_color_accent_fg' => [ 'pb_network_color_accent' ],
-	// 	],
-	// ];
-	// wp_scripts()->add_data(
-	// 	'wcag-validate-customizer-color-contrast',
-	// 	'data',
-	// 	sprintf( 'var _validateWCAGColorContrastExports = %s;', wp_json_encode( $exports ) )
-	// ); // @codingStandardsIgnoreEnd
+	wp_scripts()->add_data(
+		$handle,
+		'data',
+		sprintf( 'var _validateWCAGColorContrastExports = %s;', wp_json_encode( $exports ) )
+	);
 }

package.json

@@ -46,8 +46,8 @@
     "start": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "rmdist": "rimraf dist",
     "lint": "npm run -s lint:scripts && npm run -s lint:styles",
-    "lint:scripts": "node_modules/eslint/bin/eslint.js \"assets/scripts/*.js\"",
-    "lint:styles": "node_modules/stylelint/bin/stylelint.js \"assets/styles/**/*.scss\" --syntax scss",
+    "lint:scripts": "cross-env NODE_ENV=development node_modules/eslint/bin/eslint.js \"assets/scripts/*.js\"",
+    "lint:styles": "cross-env NODE_ENV=development node_modules/stylelint/bin/stylelint.js \"assets/styles/**/*.scss\" --syntax scss",
     "test": "npm run -s lint"
   },
   "engines": {