Feature/button checks (#41)

* add: button checks

* add: button check for text and url

* change: build files

* fix: checking innerblocks for invalid

* add: readme notes

* fix: git action

.github/workflows/build.yml

@@ -2,7 +2,7 @@ name: Build Test
 
 on:
     pull_request:
-        branches: [develop]
+        branches: [main]
 
 jobs:
     build:

CHANGELOG.md

@@ -7,33 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Prefix the change with one of these keywords:
 
-- _Added_: for new features.
-- _Changed_: for changes in existing functionality.
-- _Deprecated_: for soon-to-be removed features.
-- _Removed_: for now removed features.
-- _Fixed_: for any bug fixes.
-- _Security_: in case of vulnerabilities.
+-   _Added_: for new features.
+-   _Changed_: for changes in existing functionality.
+-   _Deprecated_: for soon-to-be removed features.
+-   _Removed_: for now removed features.
+-   _Fixed_: for any bug fixes.
+-   _Security_: in case of vulnerabilities.
 
 ## [Unreleased]
 
 ### Added
 
-- Script helpers for block invalidations, checks and getting blocks in editor
-- Higher order component to wrap invalid blocks
-- Styles for invalid block wrapper
-- Check core heading block to prevent publishing with an H1 in the content
-- Check core table block to prevent publishing when a header row is not being used
-- Check core image for alternative text
-- Add attritbute to image block to confirm decorative image to bypass a11y error
-- Instructions on setting up to run and build the plugin
-- Getting involved instructions in the README
-- Husky pre-commit check
-- Commit lint and rules
-- Git action to run build on PR to develop
-- Git issue and PR templates to log features and tasks
+-   Add check for core/button text and link
 
 ## [0.1.0]
 
 ### Added
 
-- Base files for initial plugin setup
+-   Initial release

Functions/BlockConfig.php

@@ -25,6 +25,11 @@ private function __construct()
   {
     // Initialize the block configuration once
     $this->blockConfig = [
+      [
+        'function_name' => 'renderCoreButtonOptions',
+        'option_name'   => 'coreButtonBlockCheck',
+        'block_label'   => esc_html__('Button', 'block-accessibility-checks'),
+      ],
       [
         'function_name' => 'renderCoreHeadingOptions',
         'option_name'   => 'coreHeadingBlockCheck',

Functions/SettingsPage.php

@@ -151,6 +151,19 @@ private function renderBlockOptions($blockOptionName, $description)
         echo '</ul>';
     }
 
+    /**
+     * Renders the core button options on the settings page.
+     *
+     * This method is responsible for rendering the core button options on the settings page.
+     * It calls the `renderBlockOptions` method with the appropriate parameters to display the options.
+     *
+     * @return void
+     */
+    public function renderCoreButtonOptions()
+    {
+        $this->renderBlockOptions('coreButtonBlockCheck', 'How strict do you want to be with the core/button block?');
+    }
+
     /**
      * Renders the core heading options on the settings page.
      *

README.md

@@ -54,6 +54,7 @@ The following is a list of checks that are happening on core blocks.
 
 | Block        | Description                                                                     |
 | ------------ | ------------------------------------------------------------------------------- |
+| core/button  | Checks for text and link on each button                                         |
 | core/heading | Prevents the usage of an level one heading in the content                       |
 | core/image   | Checks for alternative text on an image                                         |
 | core/image   | Adds a toggle to confirm image use as decorative allowing for bypass a11y check |

build/block-checks.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-block-editor', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins'), 'version' => '12f443fb42d1eb70e4dd');
+<?php return array('dependencies' => array('wp-block-editor', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins'), 'version' => '84a825068ffd07f9034c');

readme.txt

@@ -16,6 +16,7 @@ Accessibility is a crucial aspect of web content creation. Many organizations mu
 
 The following is a list of checks that are configurable for core blocks. Each check can be set to error (default), warning or none.
 
+* core/button: Checks for text and link on each button
 * core/heading: Prevents the usage of an level one heading in the content
 * core/image: Checks for alternative text on an image
 * core/image: Adds a toggle to confirm image use as decorative allowing for bypass accessibility check

src/scripts/blockChecks/checkButton.js

@@ -0,0 +1,49 @@
+/* global BlockAccessibilityChecks */
+import { __ } from '@wordpress/i18n';
+const validationMode =
+	BlockAccessibilityChecks.blockChecksOptions.coreButtonBlockCheck;
+
+/**
+ * Checks the heading level of a block.
+ *
+ * @param {Object} block - The block object to be checked.
+ * @return {Object} - The response object containing the validation result.
+ */
+export function checkButtonAttributes(block) {
+	if (
+		block.name === 'core/button' &&
+		!block.attributes.url &&
+		!block.attributes.text.originalHTML
+	) {
+		const response = {
+			isValid: true,
+			message: '',
+			clientId: block.clientId,
+			mode: validationMode,
+		};
+
+		switch (validationMode) {
+			case 'error':
+				response.isValid = false;
+				response.message = __(
+					'Error: Buttons must have text and a link',
+					'block-accessibility-checks'
+				);
+				break;
+			case 'warning':
+				response.isValid = false;
+				response.message = __(
+					'Warning: Buttons must have text and a link',
+					'block-accessibility-checks'
+				);
+				break;
+			case 'none':
+			default:
+				response.isValid = true;
+		}
+
+		return response;
+	}
+
+	return { isValid: true, mode: 'none' };
+}

src/scripts/blockChecks/checkHeading.js

@@ -22,14 +22,14 @@ export function checkHeadingLevel(block) {
 			case 'error':
 				response.isValid = false;
 				response.message = __(
-					'Accessibility Error: Level 1 headings are not allowed in your content area.',
+					'Error: Level 1 headings should only be used for page titles',
 					'block-accessibility-checks'
 				);
 				break;
 			case 'warning':
 				response.isValid = false;
 				response.message = __(
-					'Warning: Level 1 headings are discouraged in your content area.',
+					'Warning: Level 1 headings should only be used for page titles',
 					'block-accessibility-checks'
 				);
 				break;