Skip to content

Integrates axe-core accessibility tests into the Neos backend UI

License

Notifications You must be signed in to change notification settings

PRGfx/Prgfx.Neos.AxeCore

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Version

Prgfx.Neos.AxeCore

This package integrates the axe-core accessibility analysis tools from Deque into the Neos inspector to allow editors to quickly determine accessibility issues on a document.

composer require prgfx/neos-axecore

The development of this package is supported by mindscreen GmbH.

Features

  • Run axe-core analyzer for the current document and display accessibility errors in the inspector Errors are listed in a custom inspector view
  • Highlight affected DOM nodes and select content-elements if available
  • Pop-out results as separate window to keep errors open while fixing them Errors are opened in a separate window while the affected element is selected in the inspector
  • Localized results based on user-preferences and translations provided by the axe-core project
  • Export results for developers/integrators

Configuration

axe.run Options

You can specify the options passed to axe.run through the settings:

Neos:
  Neos:
    Ui:
      frontendConfiguration:
        Prgfx.Neos.AxeCore:runOptions:
          runOnly:
            type: 'rule'
            values: ['ruleId1', 'ruleId2', 'ruleId3']

Override used resources

If you want to use a specific (compatible) version of the axe-core library, you can override

Prgfx:
  Neos:
    AxeCore:
      script: 'resource://My.Package/Public/Path/To/axe.js'
      translations: 'resource://My.Package/Private/Path/To/locales/{language}.json'

By specifying a json without the {language} placeholder you could disable localization of the results.

Feature-Flags

Some features may still be experimental or not suited for all users.

Configure Feature-Flags

Feature-flags can be enabled, disabled or configured based on conditions.

Neos:
  Neos:
    Ui:
      frontendConfigurations:
        Prgfx.Neos.AxeCore:features:
          feature1: true
          feature2: false
          feature3: ${Security.hasRole('Neos.Neos:Administrator')}

Available Feature-Flags

name default value description
popout true enable button to pop-out the results in the inspector into a separate window
export true enable button to download the test-results as JSON file

Development

Updating axe-core

When updating axe-core, make sure to update both the translations and distribution js shipped with this version. The package file includes two helpers to copy these files to their respective target locations.

cd Resources/Private/JavaScript/AxeCoreView &&\
  yarn upgrade axe-core &&\
  yarn run export-translations &&\
  yarn run export-axejs

Notes

To work out of the box, this package includes a built version of axe-core and the locales distributed with it. The sources are available on GitHub and licensed under the MPL-2.0 License.