govuk_publishing_components 30.4.1 → 30.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 50a87147aabeeeb4c5d2fc38027b8c6e161becb7ac1aff2fe66ea8b6e7c1c9e1
-  data.tar.gz: 8d2bf92bd32628dc06f865ca12f6235b811dbf13f604c31cb0284f20efa34752
+  metadata.gz: 6db205fec06f001e8342d61eec7b8e8183e87b0d9bd4949b041d13dcd90a37a7
+  data.tar.gz: fff5b686c9bcd316ef8d646ca271dc7fdb6390767cbc68b012b56e2438aa9cf3
 SHA512:
-  metadata.gz: b54767f3c3e9d4c1d4796045d508ca619eabca6e576da063f54534a0917211341f771e23710060374432d1783322efd4301b2d296df9c31e9ca7bedc14f87e69
-  data.tar.gz: 6a298a85b7bc0aa909e393759324220a3ba41b4fc45325e2cf59848b82d0a247e8be3129397e5bf23ee7e54f8312c3247c1374314a69802bf88d38a7120fe7c5
+  metadata.gz: b68cfb8ca8bd60307057dbcc96c4fdfa00fa02dced1720c9b06cd7d7b2834480a6969b08cc75f6ae356c10519fce45e599d53ea0a5616b70fc9238e0987cdab9
+  data.tar.gz: 6639054079af181c6b4a781fb6ba69913b5eb574e3026f8f1317e9582f37987f0fcba1964aa81ffb1b0607873b755a888a07aac5d5a233f4c6bc99557b1fb541

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.js

@@ -11,68 +11,80 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   }
 
   Ga4EventTracker.prototype.init = function () {
-    this.module.addEventListener('click', this.trackClick.bind(this), true) // useCapture must be true
+    var consentCookie = window.GOVUK.getConsentCookie()
+
+    if (consentCookie && consentCookie.settings) {
+      this.startModule()
+    } else {
+      this.startModule = this.startModule.bind(this)
+      window.addEventListener('cookie-consent', this.startModule)
+    }
   }
 
-  Ga4EventTracker.prototype.trackClick = function (event) {
+  // triggered by cookie-consent event, which happens when users consent to cookies
+  Ga4EventTracker.prototype.startModule = function () {
     if (window.dataLayer) {
-      var target = this.findTrackingAttributes(event.target)
-      if (target) {
-        var schema = new window.GOVUK.analyticsGA4.Schemas().eventSchema()
-
-        try {
-          var data = target.getAttribute(this.trackingTrigger)
-          data = JSON.parse(data)
-        } catch (e) {
-          // if there's a problem with the config, don't start the tracker
-          console.error('GA4 configuration error: ' + e.message, window.location)
-          return
-        }
+      this.module.addEventListener('click', this.trackClick.bind(this), true) // useCapture must be true
+    }
+  }
 
-        schema.event = 'event_data'
-        // get attributes from the data attribute to send to GA
-        // only allow it if it already exists in the schema
-        for (var property in data) {
-          if (property in schema.event_data) {
-            schema.event_data[property] = data[property]
-          }
-        }
+  Ga4EventTracker.prototype.trackClick = function (event) {
+    var target = this.findTrackingAttributes(event.target)
+    if (target) {
+      var schema = new window.GOVUK.analyticsGA4.Schemas().eventSchema()
 
-        // Ensure it only tracks aria-expanded in an accordion element, instead of in any child of the clicked element
-        if (target.closest('.gem-c-accordion')) {
-          var ariaExpanded = this.getClosestAttribute(target, 'aria-expanded')
-        }
+      try {
+        var data = target.getAttribute(this.trackingTrigger)
+        data = JSON.parse(data)
+      } catch (e) {
+        // if there's a problem with the config, don't start the tracker
+        console.error('GA4 configuration error: ' + e.message, window.location)
+        return
+      }
 
-        /*
-          the details component uses an 'open' attribute instead of aria-expanded, so we need to check if we're on a details component.
-          since details deletes the 'open' attribute when closed, we need this boolean, otherwise every element which
-          doesn't contain an 'open' attr would be pushed to gtm as a closed element.
-        */
-        var detailsElement = target.closest('details')
-
-        if (ariaExpanded) {
-          schema.event_data.text = data.text || target.innerText
-          schema.event_data.action = (ariaExpanded === 'false') ? 'opened' : 'closed'
-        } else if (detailsElement) {
-          schema.event_data.text = data.text || detailsElement.textContent
-          var openAttribute = detailsElement.getAttribute('open')
-          schema.event_data.action = (openAttribute == null) ? 'opened' : 'closed'
+      schema.event = 'event_data'
+      // get attributes from the data attribute to send to GA
+      // only allow it if it already exists in the schema
+      for (var property in data) {
+        if (property in schema.event_data) {
+          schema.event_data[property] = data[property]
         }
+      }
+
+      // Ensure it only tracks aria-expanded in an accordion element, instead of in any child of the clicked element
+      if (target.closest('.gem-c-accordion')) {
+        var ariaExpanded = this.getClosestAttribute(target, 'aria-expanded')
+      }
 
-        /* If a tab was clicked, grab the href of the clicked tab (usually an anchor # link) */
-        var tabElement = event.target.closest('.gem-c-tabs')
-        if (tabElement) {
-          var aTag = event.target.closest('a')
-          if (aTag) {
-            var href = aTag.getAttribute('href')
-            if (href) {
-              schema.event_data.url = href
-            }
+      /*
+        the details component uses an 'open' attribute instead of aria-expanded, so we need to check if we're on a details component.
+        since details deletes the 'open' attribute when closed, we need this boolean, otherwise every element which
+        doesn't contain an 'open' attr would be pushed to gtm as a closed element.
+      */
+      var detailsElement = target.closest('details')
+
+      if (ariaExpanded) {
+        schema.event_data.text = data.text || target.innerText
+        schema.event_data.action = (ariaExpanded === 'false') ? 'opened' : 'closed'
+      } else if (detailsElement) {
+        schema.event_data.text = data.text || detailsElement.textContent
+        var openAttribute = detailsElement.getAttribute('open')
+        schema.event_data.action = (openAttribute == null) ? 'opened' : 'closed'
+      }
+
+      /* If a tab was clicked, grab the href of the clicked tab (usually an anchor # link) */
+      var tabElement = event.target.closest('.gem-c-tabs')
+      if (tabElement) {
+        var aTag = event.target.closest('a')
+        if (aTag) {
+          var href = aTag.getAttribute('href')
+          if (href) {
+            schema.event_data.url = href
           }
         }
-
-        window.dataLayer.push(schema)
       }
+
+      window.dataLayer.push(schema)
     }
   }
 

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-link-tracker.js

@@ -1,13 +1,13 @@
 // = require govuk/vendor/polyfills/Element/prototype/closest.js
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.analyticsGA4 = window.GOVUK.analyticsGA4 || {}
+window.GOVUK.analyticsGA4.analyticsModules = window.GOVUK.analyticsGA4.analyticsModules || {};
 
-;(function (global) {
+(function (analyticsModules) {
   'use strict'
 
-  var GOVUK = global.GOVUK || {}
-  GOVUK.analyticsGA4 = GOVUK.analyticsGA4 || {}
-
-  GOVUK.analyticsGA4.linkTracker = {
-    trackLinkClicks: function () {
+  var Ga4LinkTracker = {
+    init: function () {
       if (window.dataLayer) {
         this.internalLinksDomain = 'www.gov.uk/'
         this.internalLinksDomainWithoutWww = 'gov.uk/'
@@ -167,5 +167,5 @@
     }
   }
 
-  global.GOVUK = GOVUK
-})(window)
+  analyticsModules.Ga4LinkTracker = Ga4LinkTracker
+})(window.GOVUK.analyticsGA4.analyticsModules)

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js

@@ -1,14 +1,15 @@
-;(function (global) {
-  'use strict'
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.analyticsGA4 = window.GOVUK.analyticsGA4 || {}
+window.GOVUK.analyticsGA4.analyticsModules = window.GOVUK.analyticsGA4.analyticsModules || {};
 
-  var GOVUK = global.GOVUK || {}
-  GOVUK.analyticsGA4 = GOVUK.analyticsGA4 || {}
+(function (analyticsModules) {
+  'use strict'
 
-  GOVUK.analyticsGA4.pageViewTracker = {
-    PIIRemover: new GOVUK.analyticsGA4.PIIRemover(), // imported in analytics-ga4.js
+  var PageViewTracker = {
+    PIIRemover: new window.GOVUK.analyticsGA4.PIIRemover(), // imported in analytics-ga4.js
     nullValue: null,
 
-    sendPageView: function () {
+    init: function () {
       if (window.dataLayer) {
         var data = {
           event: 'page_view',
@@ -61,7 +62,7 @@
     },
 
     // window.httpStatusCode is set in the source of the error page in static
-    // https://github.com/alphagov/static/blob/main/app/views/root/_error_page.html.erb#L32
+    // https://github.com/alphagov/static/blob/1c734451f2dd6fc0c7e80beccbdcbfa5aaffd0e4/app/views/root/_error_page.html.erb#L41-L43
     getStatusCode: function () {
       if (window.httpStatusCode) {
         return window.httpStatusCode.toString()
@@ -109,5 +110,5 @@
     }
   }
 
-  global.GOVUK = GOVUK
-})(window)
+  analyticsModules.PageViewTracker = PageViewTracker
+})(window.GOVUK.analyticsGA4.analyticsModules)

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/init-ga4.js

@@ -0,0 +1,26 @@
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.analyticsGA4 = window.GOVUK.analyticsGA4 || {}
+
+var initFunction = function () {
+  // to be added: digital identity consent mechanism
+
+  var consentCookie = window.GOVUK.getConsentCookie()
+
+  if (consentCookie && consentCookie.usage) {
+    var analyticsModules = window.GOVUK.analyticsGA4.analyticsModules
+    for (var property in analyticsModules) {
+      var module = analyticsModules[property]
+      if (typeof module.init === 'function') {
+        module.init()
+      }
+    }
+    // to be added: attach JS from Google to the DOM and execute
+    // to be added: cross domain tracking code
+  } else {
+    window.addEventListener('cookie-consent', function () {
+      window.GOVUK.analyticsGA4.init()
+    })
+  }
+}
+
+window.GOVUK.analyticsGA4.init = initFunction

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4.js

@@ -4,6 +4,4 @@
 //= require ./analytics-ga4/ga4-page-views
 //= require ./analytics-ga4/ga4-link-tracker
 //= require ./analytics-ga4/ga4-event-tracker
-
-window.GOVUK.analyticsGA4.pageViewTracker.sendPageView() // this will need integrating with cookie consent before production
-window.GOVUK.analyticsGA4.linkTracker.trackLinkClicks()
+//= require ./analytics-ga4/init-ga4

data/app/assets/stylesheets/govuk_publishing_components/components/_organisation-logo.scss

@@ -37,11 +37,11 @@
 .gem-c-organisation-logo__crest {
   // Default brand colour
   border-left: 2px solid govuk-colour("black");
-  padding-top: 20px;
+  padding-top: 23px;
   padding-left: 6px;
 
   @include govuk-media-query($from: tablet) {
-    padding-top: 25px;
+    padding-top: 28px;
     padding-left: 7px;
   }
 
@@ -53,8 +53,6 @@
 }
 
 .gem-c-organisation-logo__name {
-  position: relative;
-  top: 3px;
   font-family: HelveticaNeue, "Helvetica Neue", Arial, Helvetica, sans-serif;
 }
 

data/app/views/govuk_publishing_components/component_guide/show.html.erb

@@ -28,41 +28,42 @@
     </div>
   </div>
 
-  <% if @component_doc.other_examples.any? %>
-    <div class="component-doc__content-list">
-      <%
-        content_items = [
-          {
-            href: "#default",
-            text: "How it looks",
-          }
-        ]
-
-        @component_doc.other_examples.each do | example |
-          content_items << {
-            href: "##{example.id}",
-            text: example.name
-          }
-        end
-      %>
-      <%= render "govuk_publishing_components/components/contents_list", {
-        contents: content_items
-      } %>
-    </div>
-  <% end %>
+  <div class="component-doc__content-list">
+    <%
+      content_items = [
+        { href: "#how-it-looks", text: "How it looks" },
+        { href: "#how-to-call-this-component", text: "How to call this component" },
+        ({ href: "#govuk-design-system", text: "GOV.UK Design System" } if @component_doc.govuk_frontend_components.any?),
+        ({ href: "#accessibility-acceptance-criteria", text: "Accessibility acceptance criteria" } if @component_doc.accessibility_criteria.present?),
+        ({
+          href: "#other-examples",
+          text: "Other examples",
+          items: @component_doc.other_examples.map do | example |
+            {
+              href: "##{example.id}",
+              text: example.name
+            }
+          end
+        } if @component_doc.other_examples.any?),
+      ].compact
+    %>
+    <%= render "govuk_publishing_components/components/contents_list", {
+      contents: content_items
+    } %>
+  </div>
 
-  <h2 class="component-doc-h2" id="default">
+  <h2 class="component-doc-h2" id="how-it-looks">
     <a href="<%= component_example_path(@component_doc.id, "default") %>" class="govuk-link">How it looks</a>
     <small>(<a href="<%= component_preview_path(@component_doc.id, "default") %>" class="govuk-link">preview</a>)</small>
     <small>(<a href="<%= component_preview_all_path(@component_doc.id) %>" class="govuk-link">preview all</a>)</small>
   </h2>
   <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, example: @component_doc.example %>
 
-  <h2 class="component-doc-h2">How to call this component</h2>
+  <h2 class="component-doc-h2" id="how-to-call-this-component">How to call this component</h2>
   <%= render "govuk_publishing_components/component_guide/component_doc/call", component_doc: @component_doc, example: @component_doc.example %>
 
   <% if @component_doc.govuk_frontend_components.any? %>
-    <h2 class="component-doc-h2">GOV.UK Design System</h2>
+    <h2 class="component-doc-h2" id="govuk-design-system">GOV.UK Design System</h2>
     <div class="component-markdown">
       <p>This component incorporates components from the <%= link_to "GOV.UK Design System", "https://design-system.service.gov.uk" %>:</p>
 
@@ -75,7 +76,7 @@
   <% end %>
 
   <% if @component_doc.accessibility_criteria.present? %>
-    <div class="govuk-grid-row component-accessibility-criteria">
+    <div class="govuk-grid-row component-accessibility-criteria" id="accessibility-acceptance-criteria">
       <div class="govuk-grid-column-two-thirds">
         <h2 class="component-doc-h2">Accessibility acceptance criteria</h2>
         <div class="component-markdown">
@@ -87,7 +88,7 @@
 
   <% if @component_doc.other_examples.any? %>
     <div class="examples">
-      <h2 class="component-doc-h2">Other examples</h2>
+      <h2 class="component-doc-h2" id="other-examples">Other examples</h2>
 
       <% @component_doc.other_examples.each do |example| %>
         <div class="component-example" id="<%= example.id %>">

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "30.4.1".freeze
+  VERSION = "30.5.0".freeze
 end

data/node_modules/axe-core/README.md

@@ -1,37 +1,26 @@
 # axe-core
 
-[![CircleCI](https://circleci.com/gh/dequelabs/axe-core.svg?style=svg)](https://circleci.com/gh/dequelabs/axe-core)
-
 [![License](https://img.shields.io/npm/l/axe-core.svg)](LICENSE)
 [![Version](https://img.shields.io/npm/v/axe-core.svg)](https://www.npmjs.com/package/axe-core)
 [![Total npm downloads](https://img.shields.io/npm/dt/axe-core.svg)](https://www.npmjs.com/package/axe-core)
 [![Commits](https://img.shields.io/github/commit-activity/y/dequelabs/axe-core.svg)](https://github.com/dequelabs/axe-core/commits/develop)
 [![GitHub contributors](https://img.shields.io/github/contributors/dequelabs/axe-core.svg)](https://github.com/dequelabs/axe-core/graphs/contributors)
-[![Join the chat at https://gitter.im/dequelabs/axe-core](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/dequelabs/axe-core?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-[![Package Quality](http://npm.packagequality.com/shield/axe-core.svg)](http://packagequality.com/#?package=axe-core)
+[![Join our Slack chat](https://img.shields.io/badge/slack-chat-purple.svg?logo=slack)](https://accessibility.deque.com/axe-community)
+[![Package Quality](https://npm.packagequality.com/shield/axe-core.svg)](https://packagequality.com/#?package=axe-core)
 
 Axe is an accessibility testing engine for websites and other HTML-based user interfaces. It's fast, secure, lightweight, and was built to seamlessly integrate with any existing test environment so you can automate accessibility testing alongside your regular functional testing.
 
 [Sign up for axe news](https://hubs.ly/H0fsN0b0) to get the latest on axe features, future releases, and events.
 
-## Philosophy
+## The Accessibility Rules
 
-The web can only become an accessible, inclusive space if developers are empowered to take responsibility for accessibility testing and accessible coding practices.
+Axe-core has different types of rules, for WCAG 2.0 and 2.1 on level A and AA, as well as a number of best practices that help you identify common accessibility practices like ensuring every page has an `h1` heading, and to help you avoid "gotchas" in ARIA like where an ARIA attribute you used will get ignored.
 
-Automated accessibility testing is a huge timesaver, it doesn't require special expertise, and it allows teams to focus expert resources on the accessibility issues that really need them. Unfortunately, most accessibility tools are meant to be run on sites and applications that have reached the end of the development process and often don't give clear or consistent results, causing frustration and delays just when you thought your product was ready to ship.
+With axe-core, you can find **on average 57% of WCAG issues automatically**. Additionally, axe-core will return elements as "incomplete" where axe-core could not be certain, and manual review is needed.
 
-Axe was built to reflect how web development actually works. It works with all modern browsers, tools, and testing environments a dev team might use. With axe, accessibility testing can be performed as part of your unit testing, integration testing, browser testing, and any other functional testing your team already performs on a day-to-day basis. Building accessibility testing into the early development process saves time, resources, and all kinds of frustration.
+To catch bugs earlier in the development cycle we recommend using the [axe-linter vscode extension](https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter). To improve test coverage even further we recommend the [intelligent guided tests](https://www.youtube.com/watch?v=AtsX0dPCG_4&feature=youtu.be&ab_channel=DequeSystems) in the [axe Extension](https://www.deque.com/axe/browser-extensions/).
 
-## About axe - our Manifesto
-
-- Axe is open source.
-- It returns zero false positives (bugs notwithstanding).
-- It's designed to work on all modern browsers and with whatever tools, frameworks, libraries and environments you use today.
-- It's actively supported by [Deque Systems](https://www.deque.com), a major accessibility vendor.
-- It integrates with your existing functional/acceptance automated tests.
-- It automatically determines which rules to run based on the evaluation context.
-- Axe supports in-memory fixtures, static fixtures, integration tests and iframes of infinite depth.
-- Axe is highly configurable.
+The complete list of rules, grouped WCAG level and best practice, can found in [doc/rule-descriptions.md](./doc/rule-descriptions.md).
 
 ## Getting started
 
@@ -51,17 +40,36 @@ Now insert calls at each point in your tests where a new piece of UI becomes vis
 
 ```js
 axe
-	.run()
-	.then(results => {
-		if (results.violations.length) {
-			throw new Error('Accessibility issues found');
-		}
-	})
-	.catch(err => {
-		console.error('Something bad happened:', err.message);
-	});
+  .run()
+  .then(results => {
+    if (results.violations.length) {
+      throw new Error('Accessibility issues found');
+    }
+  })
+  .catch(err => {
+    console.error('Something bad happened:', err.message);
+  });
 ```
 
+## Philosophy
+
+The web can only become an accessible, inclusive space if developers are empowered to take responsibility for accessibility testing and accessible coding practices.
+
+Automated accessibility testing is a huge timesaver, it doesn't require special expertise, and it allows teams to focus expert resources on the accessibility issues that really need them. Unfortunately, most accessibility tools are meant to be run on sites and applications that have reached the end of the development process and often don't give clear or consistent results, causing frustration and delays just when you thought your product was ready to ship.
+
+Axe was built to reflect how web development actually works. It works with all modern browsers, tools, and testing environments a dev team might use. With axe, accessibility testing can be performed as part of your unit testing, integration testing, browser testing, and any other functional testing your team already performs on a day-to-day basis. Building accessibility testing into the early development process saves time, resources, and all kinds of frustration.
+
+## About axe - our Manifesto
+
+- Axe is open source.
+- It returns zero false positives (bugs notwithstanding).
+- It's designed to work on all modern browsers and with whatever tools, frameworks, libraries and environments you use today.
+- It's actively supported by [Deque Systems](https://www.deque.com), a major accessibility vendor.
+- It integrates with your existing functional/acceptance automated tests.
+- It automatically determines which rules to run based on the evaluation context.
+- Axe supports in-memory fixtures, static fixtures, integration tests and iframes of infinite depth.
+- Axe is highly configurable.
+
 ## Supported Browsers
 
 The [axe-core API](doc/API.md) fully supports the following browsers:
@@ -70,7 +78,7 @@ The [axe-core API](doc/API.md) fully supports the following browsers:
 - Google Chrome v42 and above
 - Mozilla Firefox v38 and above
 - Apple Safari v7 and above
-- Internet Explorer v9, 10, 11
+- Internet Explorer v11
 
 Support means that we will fix bugs and attempt to test each browser regularly. Only Firefox, Chrome, and Internet Explorer 11 are currently tested on every pull request.
 
@@ -78,10 +86,6 @@ There is limited support for JSDOM. We will attempt to make all rules compatible
 
 We can only support environments where features are either natively supported or polyfilled correctly. We do not support the deprecated v0 Shadow DOM implementation.
 
-## The Accessibility Rules
-
-The complete list of rules run by axe-core can be found in [doc/rule-descriptions.md](./doc/rule-descriptions.md).
-
 ## Contents of the API Package
 
 The [axe-core API](doc/API.md) package consists of:
@@ -95,7 +99,11 @@ Axe can be built using your local language. To do so, a localization file must b
 
 `grunt build --lang=nl`
 
-This will create a new build for axe, called `axe.<lang>.js` and `axe.<lang>.min.js`. If you want to build localized versions, simply pass in `--all-lang` instead.
+or equivalently:
+
+`npm run build -- --lang=nl`
+
+This will create a new build for axe, called `axe.<lang>.js` and `axe.<lang>.min.js`. If you want to build localized versions, simply pass in `--all-lang` instead. If you want to build multiple localized versions (but not all of them), you can pass in a comma-separated list of langages to the `--lang` flag, like `--lang=nl,ja`.
 
 To create a new translation for axe, start by running `grunt translate --lang=<langcode>`. This will create a json file fin the `./locales` directory, with the default English text in it for you to translate. We welcome any localization for axe-core. For details on how to contribute, see the Contributing section below. For details on the message syntax, see [Check Message Template](/docs/check-message-template.md).
 
@@ -105,29 +113,51 @@ Additionally, locale can be applied at runtime by passing a `locale` object to `
 
 ```js
 axe.configure({
-	locale: {
-		lang: 'de',
-		rules: {
-			accesskeys: {
-				help: 'Der Wert des accesskey-Attributes muss einzigartig sein.'
-			}
-			// ...
-		},
-		checks: {
-			abstractrole: {
-				fail: 'Abstrakte ARIA-Rollen dürfen nicht direkt verwendet werden.'
-			},
-			'aria-errormessage': {
-				// Note: doT (https://github.com/olado/dot) templates are supported here.
-				fail:
-					'Der Wert der aria-errormessage ${data.values}` muss eine Technik verwenden, um die Message anzukündigen (z. B., aria-live, aria-describedby, role=alert, etc.).'
-			}
-			// ...
-		}
-	}
+  locale: {
+    lang: 'de',
+    rules: {
+      accesskeys: {
+        help: 'Der Wert des accesskey-Attributes muss einzigartig sein.'
+      }
+      // ...
+    },
+    checks: {
+      abstractrole: {
+        fail: 'Abstrakte ARIA-Rollen dürfen nicht direkt verwendet werden.'
+      },
+      'aria-errormessage': {
+        // Note: doT (https://github.com/olado/dot) templates are supported here.
+        fail:
+          'Der Wert der aria-errormessage ${data.values}` muss eine Technik verwenden, um die Message anzukündigen (z. B., aria-live, aria-describedby, role=alert, etc.).'
+      }
+      // ...
+    }
+  }
 });
 ```
 
+### Supported Locales
+
+Axe-core supports the following locales. Do note that since locales are contributed by our community, they are not guaranteed to include all translations needed in a release.
+
+- Basque
+- Danish
+- Dutch
+- French
+- German
+- Japanese
+- Korean
+- Polish
+- Portuguese (Brazilian)
+- Spanish
+
+## Updates & Security
+
+Axe-core has a new minor release every 3 to 5 months, which usually introduces new rules and features. We recommend scheduling time to upgrade to these versions. Security updates will be made available for minor version lines up to **18 months old**.
+
+- See [release and support](doc/release-and-support.md) for details on the frequency of releases, long-term support and recommendations on upgrading axe-core.
+- See [backward compatibility](doc/backwards-compatibility-doc.md) for details on the types of changes different releases may introduce.
+
 ## Supported ARIA Roles and Attributes.
 
 Refer [axe-core ARIA support](./doc/aria-supported.md) for a complete list of ARIA supported roles and attributes by axe.