feat: add axe accessibility testing

Classes/ExpressionLanguage/AxeAccessibilityTypoScriptConditionProvider.php

@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Xima\XimaTypo3Toolbox\ExpressionLanguage;
+
+use TYPO3\CMS\Core\ExpressionLanguage\AbstractProvider;
+use Xima\XimaTypo3Toolbox\TypoScript\AxeAccessibilityConditionFunctionsProvider;
+
+class AxeAccessibilityTypoScriptConditionProvider extends AbstractProvider
+{
+    public function __construct()
+    {
+        $this->expressionLanguageProviders = [
+            AxeAccessibilityConditionFunctionsProvider::class,
+        ];
+    }
+}

Classes/TypoScript/AxeAccessibilityConditionFunctionsProvider.php

@@ -0,0 +1,31 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Xima\XimaTypo3Toolbox\TypoScript;
+
+use Symfony\Component\ExpressionLanguage\ExpressionFunction;
+use Symfony\Component\ExpressionLanguage\ExpressionFunctionProviderInterface;
+use TYPO3\CMS\Core\Core\Environment;
+use Xima\XimaTypo3Toolbox\Configuration;
+
+class AxeAccessibilityConditionFunctionsProvider implements ExpressionFunctionProviderInterface
+{
+    public function getFunctions(): array
+    {
+        return [
+            $this->getWebserviceFunction(),
+        ];
+    }
+
+    protected function getWebserviceFunction(): ExpressionFunction
+    {
+        return new ExpressionFunction(
+            'enableAxeAccessibility',
+            static fn () => null,
+            static function () {
+                return $GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS'][Configuration::EXT_KEY]['axeAccessibility']['enable'] && in_array(Environment::getContext()->__toString(), $GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS'][Configuration::EXT_KEY]['axeAccessibility']['enableForContexts']);
+            }
+        );
+    }
+}

Configuration/ExpressionLanguage.php

@@ -4,5 +4,6 @@
     'typoscript' => [
         \Xima\XimaTypo3Toolbox\ExpressionLanguage\TechnicalContextTypoScriptConditionProvider::class,
         \Xima\XimaTypo3Toolbox\ExpressionLanguage\FrontendEditingTypoScriptConditionProvider::class,
+        \Xima\XimaTypo3Toolbox\ExpressionLanguage\AxeAccessibilityTypoScriptConditionProvider::class,
     ],
 ];

Configuration/TypoScript/setup.typoscript

@@ -34,6 +34,18 @@
   }
 [GLOBAL]
 
+[enableAxeAccessibility()]
+  page.includeJS {
+    axeAccessibility = EXT:xima_typo3_toolbox/Resources/Public/JavaScript/lib/axe.min.js
+  }
+  page.jsInline {
+    1722945503 = TEXT
+    1722945503.value (
+      window.onload = function () { axe.run().then(results => { if (results.violations.length) { console.warn('[XIMA TYPO3 Toolbox] Axe accessibility warnings:', results.violations); } }).catch(err => { console.error('Something bad happened:', err.message); });}
+    )
+  }
+[GLOBAL]
+
 lib.contentElement {
   templateRootPaths.1722340760 = EXT:xima_typo3_toolbox/Resources/Private/Templates/
 }

README.md

@@ -17,6 +17,7 @@ __Features__:
 - Application context endpoint
 - Frontend editing link within content elements for editors
 - Technical headline content element for e.g. styleguides or technical documentation
+- Integration of axe accessibility testing engine
 - Various collection of TYPO3 ViewHelpers
 
 ## Installation
@@ -90,6 +91,12 @@ The *technical headline* is a content element to structure e.g. your styleguide
 
 ![Technical Headline](./Documentation/Images/technicalHeadline.png)
 
+### Axe
+
+[Axe](https://www.deque.com/axe/) is an accessibility testing engine for websites. It will be automatically (regarding the configured application context) integrated into the TYPO3 frontend and display accessibility issues of your website within the browser console.
+
+![Axe](./Documentation/Images/axe.png)
+
 ### ViewHelpers
 
 See the [ViewHelpers documentation](./Documentation/ViewHelpers/CLASSES.md) for a complete list of available ViewHelpers.

Resources/Private/Templates/TechnicalContextHint.html

@@ -39,14 +39,16 @@
 <div
     class="technical-context"
     data-context="{context}"
+    aria-hidden="true"
     style="background-color:{color};"
     title="This is part of the feature branch deployment and shows the actual site name of the website. This hint will not be displayed in production context."
 >
     {context}
     <button
         type="button"
         class="technical-context__close"
+        tabindex="-1"
         onclick="this.parentElement.remove()"
-        aria-label="Schließe Context"
+        aria-label="Close context hint"
     ></button>
 </div>

ext_localconf.php

@@ -40,3 +40,13 @@
 
 // Frontend Editing
 $GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS'][Configuration::EXT_KEY]['frontendEditing']['enable'] = false;
+
+// Axe Accessibility
+$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS'][Configuration::EXT_KEY]['axeAccessibility']['enable'] = true;
+$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS'][Configuration::EXT_KEY]['axeAccessibility']['enableForContexts'] = [
+    'Testing/Stage',
+    'Testing',
+    'Staging',
+    'Development/DDEV',
+    'Development',
+];