diff --git a/examples/index.html b/examples/index.html index e48ff3f53f..3ed86bfabb 100644 --- a/examples/index.html +++ b/examples/index.html @@ -1,8 +1,8 @@ - - + + Index of ARIA Design Pattern Examples | WAI-ARIA Authoring Practices 1.1 @@ -14,23 +14,18 @@ -

Index of ARIA Design Pattern Examples

-

This page includes the following indexes of example implementations of ARIA design patterns included in WAI-ARIA Authoring Practices 1.1.

- -
-

Examples by Role

@@ -39,188 +34,304 @@

Examples by Role

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Examples
article Feed
banner Banner Landmark
button
checkbox
columnheader Table
combobox
complementary Complementary Landmark
contentinfo Contentinfo Landmark
feed Feed
form Form Landmark
grid
gridcell Layout Grid
group
link Link
listbox
main Main Landmark
menu
menubar
menuitem
menuitemcheckbox Editor Menubar
menuitemradio
navigation Navigation Landmark
none
option
radio
radiogroup
region Region Landmark
row
rowgroup Table
search Search Landmark
separator Editor Menubar
slider
spinbutton Toolbar
tab
table Table
tablist
tabpanel
toolbar Toolbar
tree
treegrid Treegrid Email Inbox
treeitem
articleFeed
bannerBanner Landmark
buttonButton
checkbox + +
columnheaderTable
combobox + +
complementaryComplementary Landmark
contentinfoContentinfo Landmark
feedFeed
formForm Landmark
grid + +
gridcellLayout Grid
group + +
linkLink
listbox + +
mainMain Landmark
menu + +
menubar + +
menuitem + +
menuitemcheckboxEditor Menubar
menuitemradio + +
navigationNavigation Landmark
none + +
option + +
radio + +
radiogroup + +
regionRegion Landmark
row + +
rowgroupTable
searchSearch Landmark
separatorEditor Menubar
slider + +
spinbuttonToolbar
tab + +
tableTable
tablist + +
tabpanel + +
toolbarToolbar
tree + +
treegridTreegrid Email Inbox
treeitem + +
-
-
-

Examples By Properties and States

@@ -229,263 +340,400 @@

Examples By Properties and States

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Examples
aria-activedescendant
aria-autocomplete
aria-busyFeed
aria-checked
aria-colcountData Grid
aria-controls
aria-describedby
aria-disabled
aria-expanded
aria-haspopup
aria-hiddenAlert Dialog
aria-label
aria-labelledby
aria-level
aria-live
aria-modalAlert Dialog
aria-multiselectable Listboxes with Rearrangeable Options
aria-orientationSlider with aria-orientation and aria-valuetext
aria-owns
aria-posinset
aria-pressed
aria-roledescriptionAuto-Rotating Image Carousel
aria-rowcount
aria-rowindex
aria-selected
aria-setsize
aria-sortData Grid
aria-valuemax
aria-valuemin
aria-valuenow
aria-valuetext
aria-activedescendant + +
aria-autocomplete + +
aria-busyFeed
aria-checked + +
aria-colcountData Grid
aria-controls + +
aria-currentDisclosure for Navigation Menus
aria-describedby + +
aria-disabled + +
aria-expanded + +
aria-haspopup + +
aria-hidden + +
aria-label + +
aria-labelledby + +
aria-level + +
aria-live + +
aria-modal + +
aria-multiselectableListboxes with Rearrangeable Options
aria-orientationSlider with aria-orientation and aria-valuetext
aria-owns + +
aria-posinset + +
aria-pressed + +
aria-roledescriptionAuto-Rotating Image Carousel
aria-rowcount + +
aria-rowindex + +
aria-selected + +
aria-setsize + +
aria-sortData Grid
aria-valuemax + +
aria-valuemin + +
aria-valuenow + +
aria-valuetext + +
-
-
- - + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index f2a7176ee4..071286dcb8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3080,12 +3080,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3100,17 +3102,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3227,7 +3232,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -3239,6 +3245,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3253,6 +3260,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3260,12 +3268,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3284,6 +3294,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3364,7 +3375,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3376,6 +3388,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3497,6 +3510,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", diff --git a/package.json b/package.json index cc2448648f..0603e60db9 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "cheerio": "^1.0.0-rc.2", "eslint": "^4.19.1", "geckodriver": "^1.16.2", + "glob": "^7.1.4", "husky": "^1.2.0", "lint-staged": "^8.1.6", "selenium-webdriver": "^4.0.0-alpha.1", diff --git a/scripts/.eslintrc.json b/scripts/.eslintrc.json new file mode 100644 index 0000000000..747f236352 --- /dev/null +++ b/scripts/.eslintrc.json @@ -0,0 +1,10 @@ +{ + "extends": "eslint:recommended", + "env": { + "node": true, + "es6": true + }, + "rules": { + "no-console": 0 + } +} diff --git a/scripts/reference-tables.js b/scripts/reference-tables.js index 75978e91ae..d3ff6b295e 100644 --- a/scripts/reference-tables.js +++ b/scripts/reference-tables.js @@ -1,18 +1,26 @@ +#!/usr/bin/env node /* -* This content is licensed according to the W3C Software License at -* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document -* -* File: reference-tables.js -*/ + * This content is licensed according to the W3C Software License at + * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document + * + * File: reference-tables.js + */ -var fs = require('fs'); -var i; +const fs = require('fs'); +const path = require('path'); +const glob = require('glob'); +const cheerio = require('cheerio'); -var fileNameTemplate = 'reference-tables.template'; -var fileNameIndex = '../examples/index.html'; -var examplesDirectory = '../examples/'; +const exampleFilePath = path.join(__dirname, '..', 'examples', 'index.html'); +const exampleTemplatePath = path.join(__dirname, 'reference-tables.template'); -var ariaRoles = [ +let output = fs.readFileSync(exampleTemplatePath, function (err) { + console.log('Error reading aria index:', err); +}); + +const $ = cheerio.load(output); + +const ariaRoles = [ 'application', 'article', 'banner', @@ -76,7 +84,7 @@ var ariaRoles = [ 'treeitem' ]; -var ariaPropertiesAndStates = [ +const ariaPropertiesAndStates = [ 'aria-activedescendant', 'aria-atomic', 'aria-autocomplete', @@ -127,47 +135,20 @@ var ariaPropertiesAndStates = [ 'aria-valuetext' ]; -var indexOfRoles = []; -var indexOfPropertiesAndStates = []; +let indexOfRoles = {}; +let indexOfPropertiesAndStates = {}; console.log('Generating index...'); -function replaceSection (id, content, newContent) { - var indexStart = content.indexOf(id); - - if (indexStart > 0) { - indexStart = content.indexOf('>', indexStart) + 1; - indexEnd = indexStart + 1; - - console.log('Replacing at: ' + indexStart + ' .... ' + indexEnd); - - content = content.slice(0, indexStart) + newContent + content.slice(indexEnd); - } - - return content; -} - -function getTitle (data) { - title = data.substring(data.indexOf('') + 7, data.indexOf('')); - - title = title.split('|'); - - title = title[0].replace('Examples', ''); - title = title.replace('Example of', ''); - title = title.replace('Example', ''); - - return title; -} - -function getColumn (data, indexStart) { - var count = 0; - var index = data.lastIndexOf(' 0 && index <= indexStart) { - var indexTd = data.indexOf('', 0); - var indexEnd = data.indexOf('', indexStart); + let indexStart = data.indexOf('', 0); + let indexEnd = data.indexOf('', indexStart); while (indexStart > 1 && indexEnd > 1) { - code = data.substring(indexStart + 6, indexEnd).trim(); + let code = data.substring(indexStart + 6, indexEnd).trim(); - for (var i = 0; i < ariaRoles.length; i++) { + for (let i = 0; i < ariaRoles.length; i++) { if ((getColumn(data, indexStart) === 1) && - (code == ariaRoles[i]) && - (roles.indexOf(ariaRoles[i]) < 0)) { + (code == ariaRoles[i]) && + (roles.indexOf(ariaRoles[i]) < 0)) { roles.push(ariaRoles[i]); } } @@ -206,19 +187,19 @@ function getRoles (data) { return roles; } -function getPropertiesAndStates (data) { - var propertiesAndStates = []; +function getPropertiesAndStates(data) { + let propertiesAndStates = []; - var indexStart = data.indexOf('', 0); - var indexEnd = data.indexOf('', indexStart); + let indexStart = data.indexOf('', 0); + let indexEnd = data.indexOf('', indexStart); while (indexStart > 1 && indexEnd > 1) { - code = data.substring(indexStart + 6, indexEnd); + let code = data.substring(indexStart + 6, indexEnd); - for (var i = 0; i < ariaPropertiesAndStates.length; i++) { + for (let i = 0; i < ariaPropertiesAndStates.length; i++) { if ((getColumn(data, indexStart) === 2) && - (code.indexOf(ariaPropertiesAndStates[i]) >= 0) && - (propertiesAndStates.indexOf(ariaPropertiesAndStates[i]) < 0)) { + (code.indexOf(ariaPropertiesAndStates[i]) >= 0) && + (propertiesAndStates.indexOf(ariaPropertiesAndStates[i]) < 0)) { propertiesAndStates.push(ariaPropertiesAndStates[i]); } } @@ -233,9 +214,9 @@ function getPropertiesAndStates (data) { return propertiesAndStates; } -function addExampleToRoles (roles, example) { - for (var i = 0; i < roles.length; i++) { - var role = roles[i]; +function addExampleToRoles(roles, example) { + for (let i = 0; i < roles.length; i++) { + let role = roles[i]; if (role === '') { continue; @@ -248,10 +229,9 @@ function addExampleToRoles (roles, example) { } } -function addExampleToPropertiesAndStates (props, example) { - - for (var i = 0; i < props.length; i++) { - var prop = props[i]; +function addExampleToPropertiesAndStates(props, example) { + for (let i = 0; i < props.length; i++) { + let prop = props[i]; if (prop === '') { continue; @@ -264,125 +244,103 @@ function addExampleToPropertiesAndStates (props, example) { } } -function addLandmarkRole (landmark, hasLabel, title, ref) { - var example = {}; +function addLandmarkRole(landmark, hasLabel, title, ref) { + let example = { + title: title, + ref: ref + }; - example.title = title; - example.ref = ref; addExampleToRoles(landmark, example); if (hasLabel) { - addExampleToPropertiesAndStates([ 'aria-labelledby' ], example); + addExampleToPropertiesAndStates(['aria-labelledby'], example); } } -var count = 0; - -function findHTMLFiles (path) { - fs.readdirSync(path).forEach(function (file) { - var newPath = path + '/' + file; - - var stats = fs.statSync(newPath); - - if (stats.isDirectory()) { - findHTMLFiles(newPath); - } - - if (stats.isFile() && - (newPath.indexOf('.html') > 0) && - (newPath.indexOf('index.html') < 0) && - (newPath.indexOf('landmark') < 0)) { - count += 1; - - var data = fs.readFileSync(newPath, 'utf8'); - - var ref = newPath; - var title = getTitle(data); - var roles = getRoles(data); - var props = getPropertiesAndStates(data); - - console.log('\nFile ' + count + ': ' + ref); - console.log('Title ' + count + ': ' + title); - console.log('Roles ' + count + ': ' + roles); - console.log('Props ' + count + ': ' + props); - - var example = {}; - - example.title = title; - example.ref = ref; - - addExampleToRoles(roles, example); - - addExampleToPropertiesAndStates(props, example); - } - }); -}; - -findHTMLFiles(examplesDirectory); - -// Add landmark examples, since they are a different format - -addLandmarkRole([ 'banner' ], false, 'Banner Landmark', examplesDirectory + 'landmarks/banner.html'); -addLandmarkRole([ 'complementary' ], true, 'Complementary Landmark', examplesDirectory + 'landmarks/complementary.html'); -addLandmarkRole([ 'contentinfo' ], false, 'Contentinfo Landmark', examplesDirectory + 'landmarks/contentinfo.html'); -addLandmarkRole([ 'form' ], true, 'Form Landmark', examplesDirectory + 'landmarks/form.html'); -addLandmarkRole([ 'main' ], true, 'Main Landmark', examplesDirectory + 'landmarks/main.html'); -addLandmarkRole([ 'navigation' ], true, 'Navigation Landmark', examplesDirectory + 'landmarks/navigation.html'); -addLandmarkRole([ 'region' ], true, 'Region Landmark', examplesDirectory + 'landmarks/region.html'); -addLandmarkRole([ 'search' ], true, 'Search Landmark', examplesDirectory + 'landmarks/search.html'); - -var exampleIndexFile = fs.readFileSync(fileNameTemplate, function (err) { - console.log('Error reading aria index:', err); +glob.sync('examples/!(landmarks)/**/!(index).html', {cwd: path.join(__dirname, '..'), nodir: true}).forEach(function (file) { + let data = fs.readFileSync(file, 'utf8'); + let ref = file.replace('examples/', ''); + let title = data.substring(data.indexOf('') + 7, data.indexOf('')) + .split('|')[0] + .replace('Examples', '') + .replace('Example of', '') + .replace('Example', '') + .trim(); + + let example = { + title: title, + ref: ref + }; + + addExampleToRoles(getRoles(data), example); + addExampleToPropertiesAndStates(getPropertiesAndStates(data), example); }); -var sorted = []; - -for (role in indexOfRoles) { - sorted.push(role); +// Add landmark examples, since they are a different format +addLandmarkRole(['banner'], false, 'Banner Landmark', 'landmarks/banner.html'); +addLandmarkRole(['complementary'], true, 'Complementary Landmark', 'landmarks/complementary.html'); +addLandmarkRole(['contentinfo'], false, 'Contentinfo Landmark', 'landmarks/contentinfo.html'); +addLandmarkRole(['form'], true, 'Form Landmark', 'landmarks/form.html'); +addLandmarkRole(['main'], true, 'Main Landmark', 'landmarks/main.html'); +addLandmarkRole(['navigation'], true, 'Navigation Landmark', 'landmarks/navigation.html'); +addLandmarkRole(['region'], true, 'Region Landmark', 'landmarks/region.html'); +addLandmarkRole(['search'], true, 'Search Landmark', 'landmarks/search.html'); + +function exampleListItem(item) { + return ` +
  • ${item.title}
    • `; } -sorted.sort(); +let sortedRoles = Object.getOwnPropertyNames(indexOfRoles).sort(); -var html = sorted.reduce(function (set,role) { - var examples = indexOfRoles[role]; +let examplesByRole = sortedRoles.reduce(function (set, role) { + let examples = indexOfRoles[role]; - var examplesHTML = ''; + let examplesHTML = ''; if (examples.length === 1) { - examplesHTML = ' ' + examples[0].title + ''; - } - else { - function exampleListItem (item) { return '
  • ' + item.title + '
    • ';}; - examplesHTML = ' '; + examplesHTML = `${examples[0].title}`; + } else { + examplesHTML = ` + \n `; } - return set + '\n ' + role + '\n ' + examplesHTML + '\n'; + return `${set} + + ${role} + ${examplesHTML} + `; }, ''); -exampleIndexFile = replaceSection('examples_by_role_tbody', exampleIndexFile, html); +$('#examples_by_role_tbody').html(examplesByRole); -sorted = []; +let sortedPropertiesAndStates = Object.getOwnPropertyNames(indexOfPropertiesAndStates) + .sort(); -for (prop in indexOfPropertiesAndStates) { - sorted.push(prop); -} - -sorted.sort(); - -html = sorted.reduce(function (set,prop) { - var examples = indexOfPropertiesAndStates[prop]; +let examplesByProps = sortedPropertiesAndStates.reduce(function (set, prop) { + let examples = indexOfPropertiesAndStates[prop]; - var examplesHTML = ''; + let examplesHTML = ''; if (examples.length === 1) { - examplesHTML = '' + examples[0].title + ''; + examplesHTML = `${examples[0].title}`; + } else { + examplesHTML = ` + \n `; } - else { - function exampleListItem (item) { return '
  • ' + item.title + '
    • ';}; - examplesHTML = ' '; - } - return set + '\n ' + prop + '\n ' + examplesHTML + '\n'; + return `${set} + + ${prop} + ${examplesHTML} + `; }, ''); -exampleIndexFile = replaceSection('examples_by_props_tbody', exampleIndexFile, html); +$('#examples_by_props_tbody').html(examplesByProps); + +// cheeio seems to fold the doctype lines despite the template +const result = $.html() + .replace('', '\n') + .replace('', '\n') -fs.writeFile(fileNameIndex, exampleIndexFile, function (err) { +fs.writeFile(exampleFilePath, result, function (err) { if (err) { console.log('Error saving updated aria practices:', err); } diff --git a/scripts/reference-tables.template b/scripts/reference-tables.template index 7c5549c777..97494d717f 100644 --- a/scripts/reference-tables.template +++ b/scripts/reference-tables.template @@ -14,23 +14,18 @@ -

    Index of ARIA Design Pattern Examples

    -

    This page includes the following indexes of example implementations of ARIA design patterns included in WAI-ARIA Authoring Practices 1.1.

    - -
    -

    Examples by Role

    @@ -40,14 +35,10 @@ -
    -
    -
    -

    Examples By Properties and States

    @@ -57,11 +48,10 @@ +
    -
    -