EPAM-169 WordPress community review fixes

package.json

@@ -5,7 +5,6 @@
     "watch": "webpack --watch --mode development"
   },
   "dependencies": {
-    "@siteimprove/accessibility-cms-components": "^0.2.2",
     "@siteimprove/alfa-act": "^0.101.0",
     "@siteimprove/alfa-jquery": "^0.78",
     "@siteimprove/alfa-json": "^0.101.0",

siteimprove-accessibility/assets/gutenberg.entry.js

@@ -1,4 +1,5 @@
-import { SinglePageReporting } from '@siteimprove/accessibility-cms-components';
+const SiteimproveAccessibilityCmsComponents =
+	window.SiteimproveAccessibilityCmsComponents;
 
 (function (wp) {
 	const {
@@ -47,7 +48,9 @@ import { SinglePageReporting } from '@siteimprove/accessibility-cms-components';
 				>
 					<AccessibilityCheckModal post={post} data={data} />
 
-					<SinglePageReporting data={data} />
+					<SiteimproveAccessibilityCmsComponents.SinglePageReporting
+						data={data}
+					/>
 				</PluginDocumentSettingPanel>
 
 				<PluginPrePublishPanel>

siteimprove-accessibility/assets/issues.entry.js

@@ -1,6 +1,4 @@
-import { renderScanIssueReporting } from '@siteimprove/accessibility-cms-components';
-
-/* global jQuery */
+/* global jQuery, SiteimproveAccessibilityCmsComponents */
 
 (async function ($) {
 	const pagesWithIssuesCallback = async function (params) {
@@ -16,7 +14,7 @@ import { renderScanIssueReporting } from '@siteimprove/accessibility-cms-compone
 	});
 
 	if (issues.length) {
-		renderScanIssueReporting(
+		SiteimproveAccessibilityCmsComponents.renderScanIssueReporting(
 			issues,
 			pagesWithIssuesCallback,
 			'siteimprove-scan-report'

siteimprove-accessibility/assets/reports.entry.js

@@ -1,7 +1,10 @@
-import { renderComplianceDashboard } from '@siteimprove/accessibility-cms-components';
+/* global SiteimproveAccessibilityCmsComponents */
 
 wp.apiFetch({ path: '/siteimprove-accessibility/daily-stats' }).then(
 	(stats) => {
-		renderComplianceDashboard(stats, 'siteimprove-daily-stats');
+		SiteimproveAccessibilityCmsComponents.renderComplianceDashboard(
+			stats,
+			'siteimprove-daily-stats'
+		);
 	}
 );

siteimprove-accessibility/assets/scan-panel.entry.js

@@ -3,12 +3,8 @@ import { JQuery as AlfaJQuery } from '@siteimprove/alfa-jquery';
 import * as AlfaJson from '@siteimprove/alfa-json';
 import AlfaRules from '@siteimprove/alfa-rules';
 import { Rules as AlfaRuleFilter } from '@siteimprove/alfa-test-utils';
-import {
-	renderSinglePageReporting,
-	getRuleMeta,
-} from '@siteimprove/accessibility-cms-components';
 
-/* global siteimproveAccessibilityScan, jQuery, requestAnimationFrame */
+/* global siteimproveAccessibilityScan, jQuery, SiteimproveAccessibilityCmsComponents, requestAnimationFrame */
 
 (function ($) {
 	'use strict';
@@ -50,7 +46,7 @@ import {
 						method: 'POST',
 						data: auditScan,
 					}).then(() => {
-						renderSinglePageReporting(
+						SiteimproveAccessibilityCmsComponents.renderSinglePageReporting(
 							{ failedItems: auditScan.scan_results },
 							'siteimprove-scan-results'
 						);
@@ -123,7 +119,10 @@ import {
 			if (outcome._outcome === 'failed') {
 				// process outcome stat
 				const rule = outcome.rule.uri.split('/').pop();
-				const conformance = getRuleMeta(rule).conformance;
+				const conformance =
+					SiteimproveAccessibilityCmsComponents.getRuleMeta(
+						rule
+					).conformance;
 				auditScan.scan_stats[rule] = auditScan.scan_stats[rule] || {
 					conformance,
 					occurrence: 0,

siteimprove-accessibility/readme.txt

@@ -3,7 +3,7 @@ Contributors: siteimprove
 Tags: accessibility, analytics, insights, spelling, seo
 Requires at least: 6.7
 Requires PHP: 8.0
-Tested up to: 6.7.2
+Tested up to: 6.8
 Stable tag: 1.0.0
 License: GPLv2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -55,8 +55,20 @@ The plugin may be used by anyone with a WordPress site without mandatory Siteimp
 
 = Where is my data stored? =
 
-Accessibility checks are local and are stored locally in your own WordPress database.
+Accessibility checks are local and data is stored locally in your own WordPress database.
 
+= What third-party/external services this plugin use? =
+
+The plugin uses SiteimproveAccessibilityCmsComponents library, loaded via CDN. It provides reusable React-based UI components for displaying issue details, issue lists, reports and more.
+These components are designed to be integrated across different CMS platforms, including WordPress, to ensure consistency and reduce the need for custom UI development.
+
+This plugin uses Pendo, to collect anonymous usage data such as which features of the plugin you are interacting with, but only with your explicit consent (e.g. when usage tracking is enabled in the plugin settings page).
+This data helps us improve the plugin by understanding how users interact with its features. No personal or sensitive information is ever collected or stored.
+More about Pendo: [privacy policy](https://www.pendo.io/legal/privacy-policy/).
+
+= Where can I find the development repository for this plugin? =
+
+The development happens on GitHub, and the repository is available at: [https://github.com/Siteimprove/cms-wp-alfa-plugin](https://github.com/Siteimprove/cms-wp-alfa-plugin).
 
 == Changelog ==
 

siteimprove-accessibility/siteimprove-accessibility.php

@@ -49,6 +49,7 @@
 define( 'SITEIMPROVE_ACCESSIBILITY_PLUGIN_NAME', 'siteimprove-accessibility' );
 define( 'SITEIMPROVE_ACCESSIBILITY_PLUGIN_ROOT_PATH', trailingslashit( __DIR__ ) );
 define( 'SITEIMPROVE_ACCESSIBILITY_PLUGIN_ROOT_URL', trailingslashit( plugin_dir_url( __FILE__ ) ) );
+define( 'SITEIMPROVE_CDN_URL', 'https://cdn.siteimprove.net/cms/' );
 
 /**
  * Main plugin class.
@@ -119,6 +120,10 @@ public function activate(): void {
 	 * @return void
 	 */
 	public function register_hooks(): void {
+		if ( ! current_user_can( get_option( self::OPTION_ALLOWED_USER_ROLE ) ) ) {
+			return;
+		}
+
 		$hook_registry = new Hook_Registry();
 		$hook_registry
 			->add( new Settings() )

siteimprove-accessibility/src/Admin/Gutenberg_Sidebar.php

@@ -4,7 +4,6 @@
 
 use Siteimprove\Accessibility\Core\Hook_Interface;
 use Siteimprove\Accessibility\Core\Usage_Tracking_Trait;
-use Siteimprove\Accessibility\Siteimprove_Accessibility;
 
 class Gutenberg_Sidebar implements Hook_Interface {
 
@@ -21,27 +20,27 @@ public function register_hooks(): void {
 	 * @return void
 	 */
 	public function enqueue_scripts(): void {
-		// Only relevant for users with necessary roles and for post and page editor.
+		// Only relevant for post and page editor.
 		$screen = get_current_screen();
-		if ( ! $this->has_access() || 'post' !== $screen->base || ( 'post' !== $screen->post_type && 'page' !== $screen->post_type ) ) {
+		if ( 'post' !== $screen->base || ( 'post' !== $screen->post_type && 'page' !== $screen->post_type ) ) {
 			return;
 		}
 
+		wp_enqueue_script(
+			'SiteimproveAccessibilityCmsComponents',
+			SITEIMPROVE_CDN_URL . 'siteimprove-accessibility-cms-components-latest.js',
+			array( 'react', 'react-dom' ),
+			SITEIMPROVE_ACCESSIBILITY_VERSION,
+			false
+		);
 		wp_enqueue_script(
 			'siteimprove-accessibility-gutenberg-sidebar',
 			SITEIMPROVE_ACCESSIBILITY_PLUGIN_ROOT_URL . 'assets/gutenberg.bundle.js',
-			array( 'wp-i18n', 'wp-plugins', 'wp-edit-post', 'wp-element', 'wp-components', 'wp-data', 'wp-api-fetch' ),
+			array( 'wp-i18n', 'wp-plugins', 'wp-edit-post', 'wp-element', 'wp-components', 'wp-data', 'wp-api-fetch', 'SiteimproveAccessibilityCmsComponents' ),
 			SITEIMPROVE_ACCESSIBILITY_VERSION,
 			false
 		);
 
 		$this->enqueue_usage_tracking_scripts();
 	}
-
-	/**
-	 * @return bool
-	 */
-	private function has_access(): bool {
-		return current_user_can( get_option( Siteimprove_Accessibility::OPTION_ALLOWED_USER_ROLE ) );
-	}
 }

siteimprove-accessibility/src/Admin/Issues_Page.php

@@ -34,10 +34,17 @@ public function enqueue_scripts(): void {
 		global $pagenow;
 
 		if ( $this->is_page_check_used && 'admin.php' === $pagenow && isset( $_GET['page'] ) && static::MENU_SLUG === $_GET['page'] ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+			wp_enqueue_script(
+				'SiteimproveAccessibilityCmsComponents',
+				SITEIMPROVE_CDN_URL . 'siteimprove-accessibility-cms-components-latest.js',
+				array( 'react', 'react-dom' ),
+				SITEIMPROVE_ACCESSIBILITY_VERSION,
+				true
+			);
 			wp_enqueue_script(
 				SITEIMPROVE_ACCESSIBILITY_PLUGIN_NAME,
 				SITEIMPROVE_ACCESSIBILITY_PLUGIN_ROOT_URL . 'assets/issues.bundle.js',
-				array( 'wp-api-fetch', 'react', 'react-dom', 'jquery' ),
+				array( 'wp-api-fetch', 'react', 'react-dom', 'jquery', 'SiteimproveAccessibilityCmsComponents' ),
 				SITEIMPROVE_ACCESSIBILITY_VERSION,
 				true
 			);

siteimprove-accessibility/src/Admin/Navigation.php

@@ -40,7 +40,7 @@ public function init_menu(): void {
 			$capability,
 			$issues_page::MENU_SLUG,
 			array( $issues_page, 'render_page' ),
-			plugins_url( 'siteimprove-accessibility/assets/img/si-icon.svg' ),
+			SITEIMPROVE_ACCESSIBILITY_PLUGIN_ROOT_URL . 'assets/img/si-icon.svg',
 		);
 
 		add_submenu_page(

siteimprove-accessibility/src/Admin/Reports_Page.php

@@ -27,10 +27,17 @@ public function enqueue_scripts(): void {
 		global $pagenow;
 
 		if ( 'admin.php' === $pagenow && isset( $_GET['page'] ) && static::MENU_SLUG === $_GET['page'] ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
+			wp_enqueue_script(
+				'SiteimproveAccessibilityCmsComponents',
+				SITEIMPROVE_CDN_URL . 'siteimprove-accessibility-cms-components-latest.js',
+				array( 'react', 'react-dom' ),
+				SITEIMPROVE_ACCESSIBILITY_VERSION,
+				true
+			);
 			wp_enqueue_script(
 				SITEIMPROVE_ACCESSIBILITY_PLUGIN_NAME,
 				SITEIMPROVE_ACCESSIBILITY_PLUGIN_ROOT_URL . 'assets/reports.bundle.js',
-				array( 'wp-api-fetch', 'react', 'react-dom' ),
+				array( 'wp-api-fetch', 'react', 'react-dom', 'SiteimproveAccessibilityCmsComponents' ),
 				SITEIMPROVE_ACCESSIBILITY_VERSION,
 				true
 			);

siteimprove-accessibility/src/Admin/Scan_Panel.php

@@ -28,6 +28,13 @@ public function enqueue_scripts(): void {
 			return;
 		}
 
+		wp_enqueue_script(
+			'SiteimproveAccessibilityCmsComponents',
+			SITEIMPROVE_CDN_URL . 'siteimprove-accessibility-cms-components-latest.js',
+			array( 'react', 'react-dom' ),
+			SITEIMPROVE_ACCESSIBILITY_VERSION,
+			false
+		);
 		wp_enqueue_script(
 			SITEIMPROVE_ACCESSIBILITY_PLUGIN_NAME,
 			SITEIMPROVE_ACCESSIBILITY_PLUGIN_ROOT_URL . 'assets/scan-panel.bundle.js',

siteimprove-accessibility/src/Core/Database.php

@@ -65,9 +65,9 @@ public function install(): void {
 	public function uninstall(): void {
 		global $wpdb;
 
-		$wpdb->query( sprintf( 'DROP TABLE IF EXISTS %s%s;', $wpdb->prefix, 'siteimprove_accessibility_occurrences' ) ); // phpcs:ignore WordPress.DB.DirectDatabaseQuery
-		$wpdb->query( sprintf( 'DROP TABLE IF EXISTS %s%s;', $wpdb->prefix, 'siteimprove_accessibility_rules' ) ); // phpcs:ignore WordPress.DB.DirectDatabaseQuery
-		$wpdb->query( sprintf( 'DROP TABLE IF EXISTS %s%s;', $wpdb->prefix, 'siteimprove_accessibility_scans' ) ); // phpcs:ignore WordPress.DB.DirectDatabaseQuery
-		$wpdb->query( sprintf( 'DROP TABLE IF EXISTS %s%s;', $wpdb->prefix, 'siteimprove_accessibility_daily_stats' ) ); // phpcs:ignore WordPress.DB.DirectDatabaseQuery
+		$wpdb->query( $wpdb->prepare( 'DROP TABLE IF EXISTS %i;', $wpdb->prefix . 'siteimprove_accessibility_occurrences' ) ); // phpcs:ignore WordPress.DB.DirectDatabaseQuery
+		$wpdb->query( $wpdb->prepare( 'DROP TABLE IF EXISTS %i;', $wpdb->prefix . 'siteimprove_accessibility_rules' ) ); // phpcs:ignore WordPress.DB.DirectDatabaseQuery
+		$wpdb->query( $wpdb->prepare( 'DROP TABLE IF EXISTS %i;', $wpdb->prefix . 'siteimprove_accessibility_scans' ) ); // phpcs:ignore WordPress.DB.DirectDatabaseQuery
+		$wpdb->query( $wpdb->prepare( 'DROP TABLE IF EXISTS %i;', $wpdb->prefix . 'siteimprove_accessibility_daily_stats' ) ); // phpcs:ignore WordPress.DB.DirectDatabaseQuery
 	}
 }

siteimprove-accessibility/src/Service/Repository/Scan_Repository.php

@@ -273,16 +273,20 @@ private function expand_scans_with_issues( array $scans ): array {
 		global $wpdb;
 
 		$occurrences_table = $wpdb->prefix . 'siteimprove_accessibility_occurrences';
-		$scan_ids          = array_map(
+
+		$scan_ids = array_map(
 			function ( \stdClass $record ) {
 				return (int) $record->id;
 			},
 			$scans
 		);
 
-		$query = sprintf( "SELECT * FROM $occurrences_table o WHERE o.scan_id IN (%s)", implode( ', ', $scan_ids ) );
+		$placeholders = implode( ', ', array_fill( 0, count( $scan_ids ), '%d' ) );
+
+		$sql = "SELECT * FROM $occurrences_table o WHERE o.scan_id IN ($placeholders)";
+
+		$occurrences = $wpdb->get_results( $wpdb->prepare( $sql, $scan_ids ) ); // phpcs:ignore WordPress.DB.DirectDatabaseQuery, WordPress.DB.PreparedSQL.NotPrepared
 
-		$occurrences = $wpdb->get_results( $wpdb->prepare( $query ) );  // phpcs:ignore WordPress.DB.DirectDatabaseQuery, WordPress.DB.PreparedSQL.NotPrepared
 		foreach ( $occurrences as $occurrence ) {
 			foreach ( $scans as $scan ) {
 				if ( $scan->id === $occurrence->scan_id ) {

siteimprove-accessibility/views/partials/field_is_usage_tracking_enabled.php

@@ -11,6 +11,6 @@
 <fieldset>
 	<label>
 		<input type="checkbox" name="<?php echo esc_attr( Siteimprove_Accessibility::OPTION_IS_USAGE_TRACKING_ENABLED ); ?>" data-observe-key="a11y-WordPress-UsageTrackingCheckbox" <?php echo checked( get_option( Siteimprove_Accessibility::OPTION_IS_USAGE_TRACKING_ENABLED, 1 ) ); ?>>
-		<?php esc_html_e( 'Enable anonymous usage data collection.', 'siteimprove_accessibility' ); ?>
+		<?php esc_html_e( 'Enable anonymous usage data collection.', 'siteimprove-accessibility' ); ?>
 	</label>
 </fieldset>

webpack.config.js

@@ -17,7 +17,7 @@ module.exports = {
     rules: [
       {
         test: /\.(js|jsx)$/,
-        exclude: /node_modules\/(?!@siteimprove\/accessibility-cms-components)/,
+        exclude: /node_modules/,
         use: {
           loader: "babel-loader",
           options: {
@@ -29,13 +29,6 @@ module.exports = {
         test: /\.css$/,
         use: ["style-loader", "css-loader"]
       },
-      {
-        test: /\.(woff|woff2|ttf|eot)$/,
-        type: "asset/resource",
-        generator: {
-          emit: false,
-        },
-      },
     ],
   },
   optimization: {
@@ -45,6 +38,7 @@ module.exports = {
     jquery: "jQuery",
     react: "React",
     "react-dom": "ReactDOM",
+    "@siteimprove/accessibility-cms-components": "SiteimproveAccessibilityCmsComponents",
   },
   resolve: {
     extensions: [".js", ".jsx"],