govuk_publishing_components 1.1.0 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: af16bdb3cf4e7f4353eb49094b958b1ad1eab6f6
-  data.tar.gz: 211f3d355a205409e8217c7bdb088ddda67a0a08
+  metadata.gz: 6d096d826f4036a0b4d935adcb65e7046e30c036
+  data.tar.gz: 73166cb75dbfdda9d960f790c6f4f0833ffdc800
 SHA512:
-  metadata.gz: 48333dcb9f5ca4f68cce6b8ef536a8c01640450cf27892b784f455900cb6fbb58cfa072e785a8b816be068c0f1db1e07d35562b25fa1925523f465daf868fd65
-  data.tar.gz: cc2659ab75afb0723c95c6f100c8dbb49be917cf6b849e478e4fb8d812306dbcc1a011c0bb52f8f6693bea134d91aa518a70755bb8aa52d5ac925024952d3e17
+  metadata.gz: 0f40af4038b72fb80da00abb67fc9fb944495df6006a5b4609e650819717a291f30c8cb17908d17298fbdc0740c891e1d36a9fc9f13438520553040472e412ca
+  data.tar.gz: 35d8bb1bc8d0812eb6bfe580c0edf05c015bf40eb980d64d015d0f99fbe5a161bb073922b72261f5c202f7236dc51bca8711419d4fdda2bc5e262dc8e0659843

data/app/assets/javascripts/govuk_publishing_components/accessibility-test.js

@@ -21,14 +21,24 @@
       }
 
       var violations = (typeof results === 'undefined') ? [] : results.violations
+      var incompleteWarnings = (typeof results === 'undefined') ? [] : results.incomplete
 
-      if (violations.length === 0) {
+      if (violations.length === 0 && incompleteWarnings.length === 0) {
         return callback('No accessibility issues found')
       }
 
-      var errorText = (
+      var incompleteWarningsObj = _processIncompleteWarnings(incompleteWarnings)
+      var errorText = _processViolations(violations, results.url)
+
+      callback(undefined, errorText, incompleteWarningsObj)
+    })
+  }
+
+  var _processViolations = function(violations, url) {
+    if (violations.length !== 0) {
+      return (
         '\n' + 'Accessibility issues at ' +
-        results.url + '\n\n' +
+        url + '\n\n' +
         violations.map(function (violation) {
           var help = 'Problem: ' + violation.help
           var helpUrl = 'Try fixing it with this help: ' + _formatHelpUrl(violation.helpUrl)
@@ -41,8 +51,33 @@
           ].join('\n\n\n')
         }).join('\n\n- - -\n\n')
       )
-      callback(undefined, errorText)
-    })
+    }
+    else {
+      console.info("aXe: No accessibility errors found")
+    }
+  }
+
+  var _processIncompleteWarnings = function(incompleteWarnings) {
+    return (
+      incompleteWarnings.map(function (incomplete) {
+        var help = incomplete.help
+        var helpUrl = _formatHelpUrl(incomplete.helpUrl)
+        var cssSelector = incomplete.nodes.map(function (node) {
+          return {
+            'selector': node.target,
+            'reason': node.any.map(function(item) {
+              return item.message
+            })
+          }
+        })
+
+        return {
+          'summary': help,
+          'selectors': cssSelector,
+          'url': helpUrl
+        }
+      })
+    )
   }
 
   var _formatHelpUrl = function (helpUrl) {
@@ -62,6 +97,36 @@
     )
   }
 
+  var _findParent = function (element, selector) {
+    while (element.tagName !== 'HTML') {
+      if (element.matches(selector)) {
+        return element
+      }
+      element = element.parentNode
+    }
+  }
+
+  var _renderIncompleteWarnings = function (incompleteWarnings) {
+    incompleteWarnings.forEach(function (warning) {
+      warning.selectors.forEach(function (selectorObj) {
+        var activeEl = document.querySelector(selectorObj.selector)
+        var activeElParent = _findParent(activeEl, '[data-module="test-a11y"]')
+        var warningWrapper = activeElParent.querySelector('[data-module="test-a11y-warning"]')
+
+        if (warningWrapper) {
+          // Add warning to warnings box
+          var warningsHTML = '<h3>' + warning.summary + ' <a href="' + warning.url + '">(see guidance)</a></h3>' +
+          '<p>Reason: ' + selectorObj.reason + '</p>' +
+          '<p>Element can be found using the following CSS selector: <span class="selector">' +
+          selectorObj.selector +
+          '</span></p>'
+
+          warningWrapper.insertAdjacentHTML('beforeend', warningsHTML)
+        }
+      })
+    })
+  }
+
   var _throwUncaughtError = function (error) {
     // aXe swallows throw errors so we pass it through a setTimeout
     // so that it's not in aXe's context
@@ -76,11 +141,12 @@
   // http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
   if (document.addEventListener) {
     document.addEventListener('DOMContentLoaded', function () {
-      AccessibilityTest('[data-module="test-a11y"]', function (err, results) {
+      AccessibilityTest('[data-module="test-a11y"]', function (err, violations, incompleteWarnings) {
         if (err) {
           return
         }
-        _throwUncaughtError(results)
+        if (incompleteWarnings) _renderIncompleteWarnings(incompleteWarnings)
+        if (violations) _throwUncaughtError(violations)
       })
     })
   }

data/app/assets/stylesheets/govuk_publishing_components/application.scss

@@ -116,13 +116,14 @@ $border-color: #ccc;
 
   &:before {
     @include core-14;
-    content: "EXAMPLE";
+    content: attr(data-content);
     position: absolute;
     top: 0;
     left: 0;
     padding: 0.21053em 0.78947em;
     background: $border-colour;
-    color: $white;
+    color: $black;
+    font-weight: bold;
   }
 
   div[class^="govuk-"] {
@@ -133,6 +134,40 @@ $border-color: #ccc;
   }
 }
 
+.component-guide-preview--simple {
+  border: 0;
+  padding: 0;
+
+  &:before {
+    display: none;
+  }
+}
+
+.component-guide-preview--warning {
+  margin-top: $gutter-half;
+  border-color: $yellow;
+
+  &:empty {
+    display: none;
+  }
+
+  &:before {
+    background-color: $yellow;
+  }
+
+  h3 {
+    @include bold-16;
+  }
+
+  h3:not(:first-child) {
+    margin-top: $gutter;
+  }
+
+  .selector {
+    font-style: italic;
+  }
+}
+
 .examples {
   .component-example {
     margin: 0 0 $gutter * 1.5;

data/app/views/govuk_publishing_components/component_guide/component_doc/_component.html.erb

@@ -0,0 +1,5 @@
+<div class="component-guide-preview
+            <% if example.right_to_left? %>direction-rtl<% end %>
+            <% if preview_page %>component-guide-preview--simple<% end %>" data-content="EXAMPLE">
+  <%= render component_doc.partial_path, example.html_safe_data %>
+</div>

data/app/views/govuk_publishing_components/component_guide/component_doc/_preview.html.erb

@@ -1,3 +1,4 @@
-<div data-module="test-a11y" class="component-guide-preview <% if example.right_to_left? %>direction-rtl<% end %>">
-  <%= render component_doc.partial_path, example.html_safe_data %>
+<div data-module="test-a11y">
+  <%= render "govuk_publishing_components/component_guide/component_doc/component", component_doc: @component_doc, example: example, preview_page: false %>
+  <div class="component-guide-preview component-guide-preview--warning" data-module="test-a11y-warning" data-content="Potential Accessibility Issues: Need Manual Check"></div>
 </div>

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

@@ -3,6 +3,8 @@
     <% if @component_examples.length > 1 %>
       <h2 class="preview-title"><a href="<%= component_example_path(@component_doc.id, example.id) %>"><%= example.name %></a></h2>
     <% end %>
-    <%= render "govuk_publishing_components/component_guide/component_doc/preview", component_doc: @component_doc, example: example %>
+    <div data-module="test-a11y">
+      <%= render "govuk_publishing_components/component_guide/component_doc/component", component_doc: @component_doc, example: example, preview_page: true %>
+    </div>
   </div>
 <% end %>

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = '1.1.0'.freeze
+  VERSION = '1.2.0'.freeze
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 1.1.0
+  version: 1.2.0
 platform: ruby
 authors:
 - GOV.UK Dev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-08-31 00:00:00.000000000 Z
+date: 2017-09-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -187,6 +187,7 @@ files:
 - app/models/govuk_publishing_components/component_doc_resolver.rb
 - app/models/govuk_publishing_components/component_example.rb
 - app/views/govuk_publishing_components/component_guide/component_doc/_call.html.erb
+- app/views/govuk_publishing_components/component_guide/component_doc/_component.html.erb
 - app/views/govuk_publishing_components/component_guide/component_doc/_preview.html.erb
 - app/views/govuk_publishing_components/component_guide/example.html.erb
 - app/views/govuk_publishing_components/component_guide/index.html.erb