[5.3] Update Jooa11y to Sa11y 4.0.3 (#44813)

* Update Jooa11y to Sa11y 4.0.3

- Updated Sa11y from 3.1.3 to 4.0.3
- Removed the following setting fields: Contrast, Form Labels, Links (Advanced), Colour Filter, Web Components to Check, Additional Checks Always On
- Unused language strings moved to end of file (to be removed with 6.0)
- Introduced new "Turn Off Checks" field, where admins can turn off specific checks within Sa11y by key name.

* Indent to 4 spaces as per joomla coding standards

* Update plugins/system/jooa11y/src/Extension/Jooa11y.php

Co-authored-by: Richard Fath <[email protected]>

* Update plugins/system/jooa11y/src/Extension/Jooa11y.php

Co-authored-by: Richard Fath <[email protected]>

* Update plugins/system/jooa11y/src/Extension/Jooa11y.php

Co-authored-by: Richard Fath <[email protected]>

* Update package-lock.json

* Update plugins/system/jooa11y/src/Extension/Jooa11y.php

* Update plugins/system/jooa11y/jooa11y.xml

* Update plg_system_jooa11y.ini

* Update administrator/language/en-GB/plg_system_jooa11y.ini

* Update plugins/system/jooa11y/src/Extension/Jooa11y.php

* Update package.json

---------

Co-authored-by: Richard Fath <[email protected]>
Co-authored-by: Quy Ton <[email protected]>
Co-authored-by: Allon Moritz <[email protected]>

Author: 4 people

administrator/language/en-GB/plg_system_jooa11y.ini

@@ -4,33 +4,36 @@
 ; Note : All ini files need to be saved as UTF-8
 
 PLG_SYSTEM_JOOA11Y="System - Joomla Accessibility Checker"
-PLG_SYSTEM_JOOA11Y_FIELD_ADDITIONAL_CHECKS="Additional Checks Always On"
-PLG_SYSTEM_JOOA11Y_FIELD_ADDITIONAL_CHECKS_DESC="Enabling this option will visually hide the toggle switches for Form Labels, Contrast, Links (Advanced) in the Settings panel."
+PLG_SYSTEM_JOOA11Y_XML_DESCRIPTION="The Joomla Accessibility Checker visually highlights common accessibility and usability issues. Geared towards content authors, the plugin identifies errors or warnings and provides guidance on how to fix them. Please be aware that this plugin does not offer an exhaustive analysis of your website, nor does it automatically ensure your website's accessibility. It's important to select a template that is inherently accessible to ensure your site meets accessibility standards."
+PLG_SYSTEM_JOOA11Y_KEY="Key"
+PLG_SYSTEM_JOOA11Y_VALUE="Value"
+PLG_SYSTEM_JOOA11Y_FIELD_SHOW_ALWAYS="Show Always"
+PLG_SYSTEM_JOOA11Y_FIELD_SHOW_ALWAYS_DESC="Load the accessibility checker on all pages. This is useful when developing the website, but should not be left on when the website is live."
 PLG_SYSTEM_JOOA11Y_FIELD_CHECK_ROOT="Target Area to Check"
 PLG_SYSTEM_JOOA11Y_FIELD_CHECK_ROOT_DESC="Input a single selector to target a specific region of your website. The default setting is the landmark <strong>main</strong>. Alternatives to landmarks are classes, elements or ARIA roles (e.g. #main-content, .main, [role='main']). Input <strong>body</strong> to check the entire page."
-PLG_SYSTEM_JOOA11Y_FIELD_COLOUR_FILTER="Colour Filter"
-PLG_SYSTEM_JOOA11Y_FIELD_COLOUR_FILTER_DESC="Show Colour Filter toggle in Settings panel. Colour filters help identify colour combinations that may be difficult for people to distinguish."
 PLG_SYSTEM_JOOA11Y_FIELD_CONTAINER_IGNORE="Ignore Regions"
 PLG_SYSTEM_JOOA11Y_FIELD_CONTAINER_IGNORE_DESC="Ignore specific regions within the Content Container. Use commas to separate classes or elements (eg #ignore, .ignore)."
+PLG_SYSTEM_JOOA11Y_FIELD_READABILITY_ROOT="Readability Target Area"
+PLG_SYSTEM_JOOA11Y_FIELD_READABILITY_ROOT_DESC="Landmark on the page that will be checked for readability. The default setting is the landmark <strong>main</strong>."
+PLG_SYSTEM_JOOA11Y_FIELD_EXTRA_PROPS="Extra Properties"
+PLG_SYSTEM_JOOA11Y_FIELD_EXTRA_PROPS_DESC="Pass additional properties to customise. Learn how to add <a href=\"https://sa11y.netlify.app/joomla/#extra-properties\" target=\"_blank\" rel=\"noopener noreferrer\">Extra Properties</a>."
+PLG_SYSTEM_JOOA11Y_FIELD_CHECKS="Turn Off Checks"
+PLG_SYSTEM_JOOA11Y_FIELD_CHECKS_DESC="Turn off specific checks by key name. Learn how to <a href=\"https://sa11y.netlify.app/joomla/#turn-off-checks\" target=\"_blank\" rel=\"noopener noreferrer\">Turn Off Checks</a>."
+
+
+; All the following strings are deprecated and will be removed with 6.0
+PLG_SYSTEM_JOOA11Y_FIELD_WEB_COMPONENTS="Web Components to Check"
+PLG_SYSTEM_JOOA11Y_FIELD_WEB_COMPONENTS_DESC="Provide a list of all known web components or containers with an open shadow DOM."
+PLG_SYSTEM_JOOA11Y_FIELD_COLOUR_FILTER="Colour Filter"
+PLG_SYSTEM_JOOA11Y_FIELD_COLOUR_FILTER_DESC="Show Colour Filter toggle in Settings panel. Colour filters help identify colour combinations that may be difficult for people to distinguish."
+PLG_SYSTEM_JOOA11Y_FIELD_ADDITIONAL_CHECKS="Additional Checks Always On"
+PLG_SYSTEM_JOOA11Y_FIELD_ADDITIONAL_CHECKS_DESC="Enabling this option will visually hide the toggle switches for Form Labels, Contrast, Links (Advanced) in the Settings panel."
 PLG_SYSTEM_JOOA11Y_FIELD_CONTRAST="Contrast"
 PLG_SYSTEM_JOOA11Y_FIELD_CONTRAST_DESC="Show Contrast toggle in Settings panel. Check for WCAG 2.0 Level AA contrast issues between foreground text and background elements."
-PLG_SYSTEM_JOOA11Y_FIELD_EXTRA_PROPS="Extra Properties"
-PLG_SYSTEM_JOOA11Y_FIELD_EXTRA_PROPS_DESC="Pass additional properties to customise. Provide a valid key/value pair. Refer to <a href=\"https://sa11y.netlify.app/developers/props/\" target=\"_blank\" rel=\"noopener noreferrer\">documentation</a>."
 PLG_SYSTEM_JOOA11Y_FIELD_FORM_LABELS="Form Labels"
 PLG_SYSTEM_JOOA11Y_FIELD_FORM_LABELS_DESC="Show Form Labels toggle in Settings panel. Check for form inputs missing a corresponding label. Not necessarily a content author issue, and usually not an issue when using a reputable, accessible forms plugin."
 PLG_SYSTEM_JOOA11Y_FIELD_LINKS_ADVANCED="Links (Advanced)"
 PLG_SYSTEM_JOOA11Y_FIELD_LINKS_ADVANCED_DESC="Show Links (Advanced) toggle in Settings panel. Check for additional issues such as: links that open in a new tab without warning, have identical names but different purpose, or points to a PDF and other files without warning."
-PLG_SYSTEM_JOOA11Y_FIELD_READABILITY_ROOT="Readability Target Area"
-PLG_SYSTEM_JOOA11Y_FIELD_READABILITY_ROOT_DESC="Landmark on the page that will be checked for readability. The default setting is the landmark <strong>main</strong>."
-PLG_SYSTEM_JOOA11Y_FIELD_SHOW_ALWAYS="Show Always"
-PLG_SYSTEM_JOOA11Y_FIELD_SHOW_ALWAYS_DESC="Load the accessibility checker on all pages. This is useful when developing the website, but should not be left on when the website is live."
-PLG_SYSTEM_JOOA11Y_FIELD_WEB_COMPONENTS="Web Components to Check"
-PLG_SYSTEM_JOOA11Y_FIELD_WEB_COMPONENTS_DESC="Provide a list of all known web components or containers with an open shadow DOM."
-PLG_SYSTEM_JOOA11Y_KEY="Key"
-PLG_SYSTEM_JOOA11Y_VALUE="Value"
-PLG_SYSTEM_JOOA11Y_XML_DESCRIPTION="The Joomla Accessibility Checker visually highlights common accessibility and usability issues. Geared towards content authors, the plugin identifies errors or warnings and provides guidance on how to fix them. Please be aware that this plugin does not offer an exhaustive analysis of your website, nor does it automatically ensure your website's accessibility. It's important to select a template that is inherently accessible to ensure your site meets accessibility standards."
-
-; All the following strings are deprecated and will be removed with 6.0
 PLG_SYSTEM_JOOA11Y_ALERT_CLOSE="Close"
 PLG_SYSTEM_JOOA11Y_ALERT_TEXT="Alert"
 PLG_SYSTEM_JOOA11Y_CONTAINER_LABEL="Accessibility Checker"

package-lock.json

@@ -77,7 +77,7 @@
     "punycode": "^2.3.1",
     "qrcode-generator": "^1.4.4",
     "roboto-fontface": "^0.10.0",
-    "sa11y": "^3.1.3",
+    "sa11y": "^4.0.3",
     "shepherd.js": "^11.2.0",
     "short-and-sweet": "^1.0.4",
     "skipto": "^4.1.7",

package.json

@@ -33,66 +33,6 @@
 					<option value="0">JOFF</option>
 					<option value="1">JON</option>
 				</field>
-				<field
-					name="contrastPlugin"
-					type="radio"
-					label="PLG_SYSTEM_JOOA11Y_FIELD_CONTRAST"
-					description="PLG_SYSTEM_JOOA11Y_FIELD_CONTRAST_DESC"
-					layout="joomla.form.field.radio.switcher"
-					default="1"
-					filter="integer"
-					>
-					<option value="0">JOFF</option>
-					<option value="1">JON</option>
-				</field>
-				<field
-					name="formLabelsPlugin"
-					type="radio"
-					label="PLG_SYSTEM_JOOA11Y_FIELD_FORM_LABELS"
-					description="PLG_SYSTEM_JOOA11Y_FIELD_FORM_LABELS_DESC"
-					layout="joomla.form.field.radio.switcher"
-					default="1"
-					filter="integer"
-					>
-					<option value="0">JOFF</option>
-					<option value="1">JON</option>
-				</field>
-				<field
-					name="linksAdvancedPlugin"
-					type="radio"
-					label="PLG_SYSTEM_JOOA11Y_FIELD_LINKS_ADVANCED"
-					description="PLG_SYSTEM_JOOA11Y_FIELD_LINKS_ADVANCED_DESC"
-					layout="joomla.form.field.radio.switcher"
-					default="1"
-					filter="integer"
-					>
-					<option value="0">JOFF</option>
-					<option value="1">JON</option>
-				</field>
-				<field
-					name="colourFilterPlugin"
-					type="radio"
-					label="PLG_SYSTEM_JOOA11Y_FIELD_COLOUR_FILTER"
-					description="PLG_SYSTEM_JOOA11Y_FIELD_COLOUR_FILTER_DESC"
-					layout="joomla.form.field.radio.switcher"
-					default="1"
-					filter="integer"
-					>
-					<option value="0">JOFF</option>
-					<option value="1">JON</option>
-				</field>
-				<field
-					name="additionalChecks"
-					type="radio"
-					label="PLG_SYSTEM_JOOA11Y_FIELD_ADDITIONAL_CHECKS"
-					description="PLG_SYSTEM_JOOA11Y_FIELD_ADDITIONAL_CHECKS_DESC"
-					layout="joomla.form.field.radio.switcher"
-					default="0"
-					filter="integer"
-					>
-					<option value="0">JOFF</option>
-					<option value="1">JON</option>
-				</field>
 				<field
 					name="checkRoot"
 					type="text"
@@ -116,13 +56,6 @@
 					description="PLG_SYSTEM_JOOA11Y_FIELD_CONTAINER_IGNORE_DESC"
 					filter="string"
 				/>
-				<field
-					name="shadowComponents"
-					type="text"
-					label="PLG_SYSTEM_JOOA11Y_FIELD_WEB_COMPONENTS"
-					description="PLG_SYSTEM_JOOA11Y_FIELD_WEB_COMPONENTS_DESC"
-					filter="string"
-				/>
 				<field
 					name="extraProps"
 					type="subform"
@@ -135,6 +68,18 @@
 						<field type="text" name="value" label="PLG_SYSTEM_JOOA11Y_VALUE"/>
 					</form>
 				</field>
+				<field
+					name="checks"
+					type="subform"
+					label="PLG_SYSTEM_JOOA11Y_FIELD_CHECKS"
+					description="PLG_SYSTEM_JOOA11Y_FIELD_CHECKS_DESC"
+					multiple="true"
+					>
+					<form>
+						<field type="text" name="key" label="PLG_SYSTEM_JOOA11Y_KEY"/>
+						<field type="text" name="value" label="PLG_SYSTEM_JOOA11Y_VALUE"/>
+					</form>
+				</field>
 			</fieldset>
 		</fields>
 	</config>

plugins/system/jooa11y/jooa11y.xml

@@ -181,32 +181,33 @@ public function addJooa11y()
 
         // Get plugin options from xml
         $getOptions = [
-            'checkRoot'           => $this->params->get('checkRoot', 'main'),
-            'readabilityRoot'     => $this->params->get('readabilityRoot', 'main'),
-            'containerIgnore'     => $this->params->get('containerIgnore'),
-            'contrastPlugin'      => $this->params->get('contrastPlugin', 1),
-            'formLabelsPlugin'    => $this->params->get('formLabelsPlugin', 1),
-            'linksAdvancedPlugin' => $this->params->get('linksAdvancedPlugin', 1),
-            'colourFilterPlugin'  => $this->params->get('colourFilterPlugin', 1),
-            'checkAllHideToggles' => $this->params->get('additionalChecks', 0),
-            'shadowComponents'    => $this->params->get('shadowComponents'),
+            'checkRoot'       => $this->params->get('checkRoot', 'main'),
+            'readabilityRoot' => $this->params->get('readabilityRoot', 'main'),
+            'containerIgnore' => $this->params->get('containerIgnore'),
         ];
         $getExtraProps = $this->params->get('extraProps', []);
-
-
-        // Process extra props
-        $extraProps = [];
-        foreach ($getExtraProps as $prop) {
-            $decodedValue = json_decode($prop->value);
-            if (is_numeric($decodedValue) || \is_bool($decodedValue)) {
-                $extraProps[$prop->key] = $decodedValue;
-            } else {
-                $extraProps[$prop->key] = "{$prop->value}";
+        $getChecks     = $this->params->get('checks', []);
+
+        // Process Sa11y's props
+        function processProps($props)
+        {
+            $result = [];
+            foreach ($props as $prop) {
+                $decodedValue = json_decode($prop->value);
+                if (is_numeric($decodedValue) || \is_bool($decodedValue)) {
+                    $result[$prop->key] = $decodedValue;
+                } else {
+                    $result[$prop->key] = "{$prop->value}";
+                }
             }
+            return $result;
         }
+        $extraProps = processProps($getExtraProps);
+        $checks     = processProps($getChecks);
+        $allChecks  = ['checks' => $checks];
 
         // Merge all options together and add to page
-        $allOptions = array_merge($getOptions, $extraProps);
+        $allOptions = array_merge($getOptions, $extraProps, $allChecks);
         $document->addScriptOptions('jooa11yOptions', $allOptions);
 
         /** @var \Joomla\CMS\WebAsset\WebAssetManager $wa*/