Merge branch 'release-1.7.4'

.github/PULL_REQUEST_TEMPLATE.md

@@ -26,6 +26,6 @@ Include a high-level description for what the pull request fixes and links to Gi
   - [ ] Cross-browser tested against standard browser matrix (TBD)
   - [ ] Tested on multiple devices (TBD)
   - [ ] HTML5 validation (CircleCI)
-  - [ ] Accessibility testing & WCAG2 compliance (manual/auto TBD)
+  - [ ] Accessibility testing & WCAG2 compliance (`node test/pa11y.js`)
 - [ ] Stakeholder/PO review
 - [ ] CHANGELOG updated

.jshintrc

@@ -82,6 +82,9 @@
     "wsh"           : false,    // Windows Scripting Host
     "yui"           : false,    // Yahoo User Interface
 
+    // ES Version
+    "esversion"     : 6,        // ECMAScript 6
+
     // Custom Globals
     "globals"       : {}        // additional predefined global variables
 }

CHANGELOG.md

@@ -2,12 +2,26 @@
 
 ## UI Kit "Kraken"
 
-### 1.7.3 2016-08-08
+### 1.7.4 - 2016-08-17
 
-#### UI-kit changes
+#### Accessibility testing
+
+Added automated accessibility testing (WCAG2.0 AA) using [Pa11y CLI](https://github.com/pa11y/pa11y) and [HTML_CodeSniffer](http://squizlabs.github.io/HTML_CodeSniffer/) (run with `node test/pa11y.js`).
+
+#### UI-Kit changes
+
+- Support to grey out disabled/non-functional anchors/links (largely for prototyping) via `.placeholder-link` (documented under *§ Link styles*).
+- Source files for Examples now use a common layout file (`examples/layouts/default.html`)
+- Added the [Respond polyfill](https://github.com/scottjehl/Respond) for CSS3 media query support in IE6-8
+- Removed the [Selectivizr polyfill](http://selectivizr.com/) so as to not trigger quirks mode in IE8
+
+### 1.7.3 - 2016-08-08
+
+#### UI-Kit changes
 
 - Improved visibility of disabled text field inputs via greying-out.
 - Refactored `_block-elements` partial, now named `_grid-layout` with `wrapper-padding` mixin.
+- Replaced `.visuallyhidden` helper class to `_accessibility.scss` (undocumented, added as a convenience)
 - Added an experimental inline tab element (documented under *§ Tab navigation (experimental)*).
 
 #### Styleguide
@@ -23,6 +37,7 @@
 
 - Fixed [#170](https://github.com/AusDTO/gov-au-ui-kit/issues/170): Elaborate list view patterns have left alignment issues
 - Fixed [#255](https://github.com/AusDTO/gov-au-ui-kit/issues/255): SVG's don't have `xml` tag
+- Fixed [#271](https://github.com/AusDTO/gov-au-ui-kit/issues/271): Insufficient colour contrast in Hero
 - Fixed [#274](https://github.com/AusDTO/gov-au-ui-kit/issues/274): Typo in Examples landing page
 
 ### 1.7.2 - 2016-08-02

Gulpfile.js

@@ -16,7 +16,8 @@ var gulp = require('gulp'),
     connect = require('gulp-connect'),
     svg2png = require('gulp-svg2png'),
     webpack = require('webpack-stream'),
-    zip = require('gulp-zip')
+    zip = require('gulp-zip'),
+    wrap = require('gulp-wrap')
     ;
 
 var paths = {
@@ -25,7 +26,8 @@ var paths = {
     scssDir: './assets/sass/**/*.scss',
     kssScssDir: './kss-builder/kss-assets/*.scss',
     kssCssDir: './kss-builder/kss-assets',
-    examplesDir: './examples/**/*.*',
+    examplesDir: './examples/*.html',
+    examplesTemplatesDir: './examples/layouts',
     kssBuilderDir: './kss-builder/**/*.*',
     images: './assets/img/**/*.+(png|svg|jpg)',
     scss: './assets/sass/ui-kit.scss',
@@ -60,7 +62,7 @@ gulp.task('ui-kit.scss', ['svg2png'], function () {
     return gulp.src(paths.scss)
         .pipe(sass({
             functions: {
-                "asset-data-url": inline('./')
+                'asset-data-url': inline('./')
             }
         }).on('error', sass.logError))
         .pipe(autoprefixer(options.autoprefixer))
@@ -94,7 +96,7 @@ gulp.task('ui-kit.min', function () {
 });
 
 gulp.task('ui-kit.min.scss', ['ui-kit.scss', 'ui-kit.icons', 'svg2png'], function () {
-    return gulp.src([paths.outputCSS, "!./**/*.min.css"])
+    return gulp.src([paths.outputCSS, '!./**/*.min.css'])
         .pipe(cssnano())
         .pipe(gitVersion())
         .pipe(rename({
@@ -133,7 +135,8 @@ gulp.task('svg2png', ['ui-kit.img'], function () {
 
 gulp.task('examples', function () {
     return gulp.src(paths.examplesDir)
-        .pipe(gulp.dest(paths.outputHTML + '/examples')).pipe(connect.reload());
+      .pipe(wrap({ src: paths.examplesTemplatesDir + '/default.html' }))
+      .pipe(gulp.dest(paths.outputHTML + '/examples')).pipe(connect.reload());
 });
 
 gulp.task('markdown', function () {
@@ -170,8 +173,7 @@ gulp.task('styleguide', ['styleguide.scss'], function () {
         homepage: '../../README.md',
         builder: 'kss-builder'
     });
-    kssresult.then(function (v) {
-        //console.log(v); // true
+    kssresult.then(function () {
         gulp.src('./build/*.html').pipe(connect.reload());
     });
 
@@ -181,7 +183,7 @@ gulp.task('styleguide.scss', ['svg2png'], function () {
     return gulp.src(paths.kssScssDir)
         .pipe(sass({
             functions: {
-                "asset-data-url": inline('./')
+                'asset-data-url': inline('./')
             }
         }).on('error', sass.logError))
         .pipe(autoprefixer(options.autoprefixer))
@@ -209,6 +211,7 @@ gulp.task('watch.build', function () {
     gulp.watch([
             paths.assets,
             paths.examplesDir,
+            paths.examplesTemplatesDir,
             paths.readme,
             paths.kssBuilderDir,
             '!./kss-builder/kss-assets/kss.css'
@@ -228,6 +231,6 @@ gulp.task('livereload', function () {
 gulp.task('webserver', function () {
     connect.server({
         livereload: true,
-        root: ['.', 'build']
+        root: 'build'
     });
 });

README.md

@@ -36,11 +36,13 @@ UI Kit aims to be WCAG2 AA compliant, and AAA where possible.
 
 The framework is built on a solid accessible HTML foundation. We follow a philosophy of <a href="https://en.wikipedia.org/wiki/Progressive_enhancement" rel="external">progressive enhancement</a> over <a href="https://en.wikipedia.org/wiki/Fault_tolerance" rel="external">graceful degradation</a> to produce accessible components by default.
 
-Currently (August 2016) we are using automated build tools to write accessible code (linting and HTML5 validation).
+Currently (August 2016) we are:
 
-We are working on:
+- using automated build tools to write accessible code (linting and HTML5 validation)
+- running automated accessibility testing of our examples templates &mdash; `examples/` (<a href="https://github.com/pa11y/pa11y" rel="external">Pa11y CLI</a>).
 
-- automated accessibility testing of our examples templates (`examples/`)
+We are working on:
+- fixing automated accessibility testing errors
 - documenting accessibility compliance and guidance for each component
 - testing the framework with users to find barriers
 - preparing for an audit of the framework.
@@ -88,6 +90,14 @@ Run a build:
 gulp build
 ```
 
+Run accessibility tests:
+
+```
+node test/pa11y.js
+```
+
+*Note:* Check [Pa11y's requirements](https://github.com/pa11y/pa11y#requirements) to make sure you have the necessary dependencies installed to run the automated accessibility tests.
+
 The compiled style guide can be found at `./build/index.html` and the UI Kit CSS
 at `./build/latest/ui-kit.css`.
 
@@ -149,6 +159,6 @@ Copyright Digital Transformation Office. <a href="(https://github.com/AusDTO/gov
 
 This repository includes <a href="http://bourbon.io/" rel="external">Bourbon</a>, <a href="http://neat.bourbon.io/" rel="external">Neat</a> and <a href="https://necolas.github.io/normalize.css/" rel="external">Normalize.css</a>. All also use the MIT license.
 
-![](https://www.dto.gov.au/images/govt-crest.png "logo of the DTO")
+![Australian Government Digital Transformation Office logo](https://www.dto.gov.au/images/govt-crest.png)
 
 gov-au-ui-kit is maintained and funded by the <a href="https://www.dto.gov.au/" rel="external">Digital Transformation Office</a>.

assets/js/ui-kit.js

@@ -24,7 +24,7 @@ var smoothScroll = require('smoothscroll');
      * @param {bool} collapsed - if `true`, panel is collapsed by default
      */
     initPanel: function(elem, collapsed) {
-      var panelLabel = elem.dataset ? elem.getAttribute('label') ? elem.getAttribute('label') : elem.className : elem.className;
+      var panelLabel = elem.getAttribute('data-label');
 
       elem.id = panelLabel;
 
@@ -38,13 +38,12 @@ var smoothScroll = require('smoothscroll');
      * @param {object} elem - containing element for collapsible nav
      */
     initToggle: function(elem, toggle) {
-      var panelLabel = elem.dataset ? elem.getAttribute('label') ? elem.getAttribute('label') : elem.className : elem.className,
+      var panelLabel = elem.getAttribute('data-label') ? elem.getAttribute('data-label') : elem.className,
           toggleElem = toggle || document.createElement('button'),
           self = this;
 
-      // console.log(panelLabel, toggle);
       if (!toggle) {
-          toggleElem.textContent = elem.getAttribute('toggleLabel') || 'Menu';
+          toggleElem.textContent = elem.getAttribute('data-toggle-label') || 'Menu';
       }
 
       toggleElem.setAttribute('aria-controls', panelLabel);

assets/sass/_accessibility.scss

@@ -5,6 +5,7 @@
 
 // Added as a class because this should to be obvious in HTML
 
+.visuallyhidden,
 .is-visuallyhidden {
   border: 0;
   clip: rect(0 0 0 0);
@@ -15,8 +16,3 @@
   position: absolute;
   width: 1px;
 }
-
-// To be deprecated in 2.0
-.visuallyhidden {
-  display: none;
-}

assets/sass/_accordions.scss

@@ -30,7 +30,7 @@ When implementing accordions:
 - For multiple accordion elements each `details` element must have its own `data-label` attribute.
 - This framework allows a text/string search of accordion content, even when collapsed (string itself remains hidden until opened).
 
-<details data-label="accordion-accessibility" aria-expanded="false">
+<details data-label="accordions-accessibility" aria-expanded="false">
   <summary>Accessibility &amp; browser testing</summary>
   <div class="accordion-panel">
   <strong>Passed</strong>:

assets/sass/_buttons.scss

@@ -28,7 +28,7 @@ Do not apply styles to disabled buttons.
 
 Markup: templates/buttons-examples.hbs
 
-<details data-label="accordion-accessibility" aria-expanded="false">
+<details data-label="buttons-accessibility" aria-expanded="false">
   <summary>Accessibility &amp; browser testing</summary>
   <div class="accordion-panel">
   <strong>Passed</strong>:

assets/sass/_colours.scss

@@ -206,7 +206,7 @@ The <a href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-con
 <p class="guide-colour-block bg-light-yellow">non-black on light-yellow <span class="invert">AA</span></p>
 <p class="guide-colour-block bg-light-blue">non-black on light-blue <span class="invert">AA</span></p>
 
-<details data-label="accordion-accessibility" aria-expanded="false">
+<details data-label="colour-accessibility" aria-expanded="false">
   <summary>Accessibility &amp; browser testing</summary>
   <div class="accordion-panel">
   <strong>Passed</strong>:
@@ -272,7 +272,7 @@ $badge-colour--success:         $green;
 $controls-bg-colour:            $dark-navy;
 $controls-contrast-bg-colour:   $maroon;
 $header-bg-colour:              #134058;
-$hero-bg-colour:                #00a1bb;
+$hero-bg-colour:                #0098b0;
 $breadcrumbs-bg-colour:         $non-white;
 
 $input-focus-colour:            $light-aqua;

assets/sass/_forms.scss

@@ -21,7 +21,7 @@ They can be limited to number input only by setting the `type` attribute to `num
 
 Markup: templates/text-input-single-line.hbs
 
-<details data-label="accordion-accessibility" aria-expanded="false">
+<details data-label="text-input-single-line-accessibility" aria-expanded="false">
   <summary>Accessibility &amp; browser testing</summary>
   <div class="accordion-panel">
   <strong>Passed</strong>:
@@ -111,7 +111,7 @@ form {
     <textarea name="texta" id="texta"></textarea>
   </form>
 
-  <details data-label="accordion-accessibility" aria-expanded="false">
+  <details data-label="text-area-input-accessibility" aria-expanded="false">
     <summary>Accessibility &amp; browser testing</summary>
     <div class="accordion-panel">
     <strong>Passed</strong>:
@@ -203,7 +203,7 @@ form {
     </fieldset>
   </form>
 
-  <details data-label="accordion-accessibility" aria-expanded="false">
+  <details data-label="radio-button-accessibility" aria-expanded="false">
     <summary>Accessibility &amp; browser testing</summary>
     <div class="accordion-panel">
     <strong>Passed</strong>:
@@ -276,7 +276,7 @@ Markup:
   </fieldset>
 </form>
 
-<details data-label="accordion-accessibility" aria-expanded="false">
+<details data-label="checkbox-input-accessibility" aria-expanded="false">
   <summary>Accessibility &amp; browser testing</summary>
   <div class="accordion-panel">
   <strong>Passed</strong>:

assets/sass/_grid-layout.scss

@@ -226,7 +226,7 @@ Long lines reduce legibility. Lines of text should be no longer than 75 characte
 
 Low-vision users should be able to increase the size of the text by up to 200 per cent without breaking the layout.
 
-<details data-label="accordion-accessibility" aria-expanded="false">
+<details data-label="grid-text-accessibility" aria-expanded="false">
   <summary>Accessibility &amp; browser testing</summary>
   <div class="accordion-panel">
   <strong>Passed</strong>:

assets/sass/_links.scss

@@ -3,7 +3,7 @@ Link styles
 
 Styling for types and classes of links.
 
-There are other styles documented elsewhere (eg tag cloud links).
+There are other link styles documented elsewhere (for example [tags in list styles](http://gov-au-ui-kit.apps.staging.digital.gov.au/section-list-styles.html)).
 
 Style guide: Link styles
 */
@@ -19,7 +19,7 @@ Link to external sites using `rel="external"`.
 
 Markup: templates/basic-links.hbs
 
-<details data-label="accordion-accessibility" aria-expanded="false">
+<details data-label="basic-links-accessibility" aria-expanded="false">
   <summary>Accessibility &amp; browser testing</summary>
   <div class="accordion-panel">
   <strong>Passed</strong>:
@@ -53,7 +53,7 @@ Style guide: Link styles.1 Hover links
 }
 
 @mixin link-colours($text-colour, $hover-bg-colour, $hover-text-colour: $text-colour) {
-  $link-disabled-color: rgba($text-colour, 0.5);
+  $link-disabled-colour: transparentize($text-colour, 0.4);
   color: $text-colour;
 
   a {
@@ -96,7 +96,7 @@ Style guide: Link styles.1 Hover links
 
     Markup: <a class="see-more" href="#">See more</a>
 
-    <details data-label="accordion-accessibility" aria-expanded="false">
+    <details data-label="placeholder-link-accessibility" aria-expanded="false">
       <summary>Accessibility &amp; browser testing</summary>
       <div class="accordion-panel">
       <strong>Passed</strong>:
@@ -144,12 +144,46 @@ Style guide: Link styles.1 Hover links
     }
   }
 
-  &.disabled {
-    outline: none;
-    color: $link-disabled-color;
-    text-decoration: none;
-    border-bottom: solid 1px;
-    outline-color: transparent;
+  /*
+  Placeholder links (prototyping)
+
+  Use placeholder links (greyed out links) to show actions that users can't currently take.
+
+  Your content should explain why the action isn't available and when it will be.
+
+  <p class="callout">Placeholders only work in `<span>` tags; not `<a>`.</p>
+
+  Markup: <p><span class="placeholder-link">Draft news item</span></p>
+  <p><a href="#">News item</a><p>
+
+  <details data-label="placeholder-links-accessibility" aria-expanded="false">
+    <summary>Accessibility &amp; browser testing</summary>
+    <div class="accordion-panel">
+    <strong>Passed</strong>:
+      <ul>
+        <li>HTML5 validation (<a href="http://validator.github.io/validator/" rel="external">Nu Html Checker</a>)</li>
+        <li>WCAG:AA automated (<a href="http://squizlabs.github.io/HTML_CodeSniffer/Standards/WCAG2/" rel="external">HTML_CodeSniffer</a>)</li>
+      </ul>
+    <strong>Untested</strong>:
+      <ul>
+        <li>WCAG:AA manual</li>
+        <li>Browser support &mdash; automated and manual</li>
+      </ul>
+    </div>
+  </details>
+
+  Style guide: Link styles.3 Placeholder links
+  */
+
+  // Specifying a span here explicitly to avoid a.placeholder-link usage.
+  span.placeholder-link {
+    color: $link-disabled-colour;
+    border-bottom: none;
+    cursor: not-allowed;
+
+    &:hover {
+      cursor: not-allowed;
+    }
   }
 }