Allow users to pass in boolean props to jooa11y

administrator/language/en-GB/plg_system_jooa11y.ini

@@ -25,3 +25,5 @@ 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_COLOUR_FILTER="Colour Filter"
 PLG_SYSTEM_JOOA11Y_FIELD_COLOUR_FILTER_DESC="Show Colour Filter toggle in Settings panel. Colour filters help identify potential color combinations that may be difficult for people to distinguish."
+PLG_SYSTEM_JOOA11Y_FIELD_EXTRA_PROPS="Extra Properties"
+PLG_SYSTEM_JOOA11Y_FIELD_EXTRA_PROPS_DESC="Pass additional (boolean) properties to customize. Use a comma to seperate multiple key/value pairs. Refer to <a href="https://sa11y.netlify.app/developers/props/">documentation.</a>"

plugins/system/jooa11y/jooa11y.xml

@@ -123,6 +123,13 @@
 					description="PLG_SYSTEM_JOOA11Y_FIELD_WEB_COMPONENTS_DESC"
 					filter="string"
 				/>
+        <field
+					name="extraProps"
+					type="textarea"
+					label="PLG_SYSTEM_JOOA11Y_FIELD_EXTRA_PROPS"
+					description="PLG_SYSTEM_JOOA11Y_FIELD_EXTRA_PROPS_DESC"
+					filter="string"
+				/>
 			</fieldset>
 		</fields>
 	</config>

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

@@ -152,11 +152,36 @@ public function initJooa11y()
     // Get the document object
     $document = $this->getApplication()->getDocument();
 
+    // Prepare `extraProps` into JSON.
+    function prepareExtraProps($extraProps)
+    {
+      $pairs = explode(',', $extraProps);
+      $data = [];
+
+      foreach ($pairs as $pair) {
+        list($property, $value) = array_map('trim', explode(':', $pair, 2));
+
+        // Replace single quotes
+        $value = trim($value, "'");
+
+        // Handle booleans
+        $value = filter_var($value, FILTER_VALIDATE_BOOLEAN, FILTER_NULL_ON_FAILURE);
+
+        // Remove special chars
+        $property = preg_replace('/[^a-zA-Z0-9_]/', '', $property);
+        $value = preg_replace('/[^a-zA-Z0-9_]/', '', $value);
+
+        $data[$property] = $value;
+      }
+      return json_encode($data, JSON_NUMERIC_CHECK);
+    }
+    $extraPropsJSON = prepareExtraProps($this->params->get('extraProps'));
+
     // Add plugin settings from the xml
     $document->addScriptOptions(
       'jooa11yOptions',
       [
-        'checkRoot'       => $this->params->get('checkRoot', 'main'),
+        'checkRoot' => $this->params->get('checkRoot', 'main'),
         'readabilityRoot' => $this->params->get('readabilityRoot', 'main'),
         'containerIgnore' => $this->params->get('containerIgnore'),
         'contrastPlugin' => $this->params->get('contrastPlugin'),
@@ -165,7 +190,7 @@ public function initJooa11y()
         'colourFilterPlugin' => $this->params->get('colourFilterPlugin'),
         'checkAllHideToggles' => $this->params->get('additionalChecks'),
         'shadowComponents' => $this->params->get('shadowComponents'),
-      ]
+      ],
     );
 
     /** @var Joomla\CMS\WebAsset\WebAssetManager $wa*/
@@ -177,12 +202,16 @@ public function initJooa11y()
     $wa->useStyle('sa11yCSS');
     $wa->addInlineScript(
       <<<EOT
+        (() => {
           Sa11y.Lang.addI18n($sa11yLang.strings);
           const options = Joomla.getOptions('jooa11yOptions');
+          const extraProps = $extraPropsJSON;
+          const allOptions = Object.assign({}, options, extraProps);
           window.addEventListener('load', () => {
-            const sa11y = new Sa11y.Sa11y(options);
+            const sa11y = new Sa11y.Sa11y(allOptions);
           });
-        EOT,
+        })();
+      EOT,
     );
 
     return true;