diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 53255d40..1de91f94 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.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 diff --git a/.jshintrc b/.jshintrc index 2b78319c..2db88f7f 100644 --- a/.jshintrc +++ b/.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 } diff --git a/CHANGELOG.md b/CHANGELOG.md index 31a91d9e..01065e54 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/Gulpfile.js b/Gulpfile.js index f5f28b56..fb297b66 100644 --- a/Gulpfile.js +++ b/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' }); }); diff --git a/README.md b/README.md index 8698c1c4..c32db368 100644 --- a/README.md +++ b/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 progressive enhancement over graceful degradation 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 — `examples/` (Pa11y CLI). -- 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. Bourbon, Neat and Normalize.css. 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 Digital Transformation Office. diff --git a/assets/js/ui-kit.js b/assets/js/ui-kit.js index 864a23b6..84a68b3e 100644 --- a/assets/js/ui-kit.js +++ b/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); diff --git a/assets/sass/_accessibility.scss b/assets/sass/_accessibility.scss index f3c6a2fd..62e661f5 100644 --- a/assets/sass/_accessibility.scss +++ b/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; -} diff --git a/assets/sass/_accordions.scss b/assets/sass/_accordions.scss index 3debec6c..cc253d26 100644 --- a/assets/sass/_accordions.scss +++ b/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). -