├── .gitignore
├── .npmignore
├── .babelrc
├── src
├── pending.js
├── index.js
├── cleanDom.js
├── setupSandbox.js
├── describeSome.js
├── keyboard.js
├── tooltip.js
├── dialog.js
├── simpleCheckbox.js
├── progressBar.js
├── slider.js
├── tabPanel.js
├── radioButton.js
├── tristateCheckbox.js
└── accordion.js
├── resources
├── 2014-11-05-Test_DP_ARIA_grille_de_saisie.ods
└── 2016-11-23-Test_DP_ARIA_grille_de_saisie-V2.1.ods
├── template
├── test
│ └── index.js
├── karma.conf.js
└── package.json
├── test
├── simpleCheckbox.js
├── tooltip.js
├── tristateCheckbox.js
├── radioButton.js
├── progressBar.js
├── dialog.js
├── accordion.js
├── tabPanel.js
├── slider.js
└── lib
│ ├── simpleCheckbox.js
│ ├── tristateCheckbox.js
│ └── radiobutton.js
├── karma.conf.js
├── LICENSE.md
├── package.json
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /template/node_modules
3 | /lib
4 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | /karma.conf.js
2 | /resources
3 | /src
4 | /template
5 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "es2015",
4 | "stage-2"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/src/pending.js:
--------------------------------------------------------------------------------
1 | export default (test, reason) => {
2 | if (reason) {
3 | test._runnable.title += `\n\t ${reason}`;
4 | }
5 | return test.skip();
6 | };
7 |
--------------------------------------------------------------------------------
/resources/2014-11-05-Test_DP_ARIA_grille_de_saisie.ods:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DISIC/rgaa-test-suite/HEAD/resources/2014-11-05-Test_DP_ARIA_grille_de_saisie.ods
--------------------------------------------------------------------------------
/resources/2016-11-23-Test_DP_ARIA_grille_de_saisie-V2.1.ods:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DISIC/rgaa-test-suite/HEAD/resources/2016-11-23-Test_DP_ARIA_grille_de_saisie-V2.1.ods
--------------------------------------------------------------------------------
/template/test/index.js:
--------------------------------------------------------------------------------
1 | var suite = require('rgaa-test-suite');
2 |
3 |
4 |
5 | /**
6 | *
7 | */
8 | describe('Mon composant', function() {
9 | // ...
10 | });
11 |
--------------------------------------------------------------------------------
/test/simpleCheckbox.js:
--------------------------------------------------------------------------------
1 | import SimpleCheckbox from './lib/simpleCheckbox';
2 | import {simpleCheckbox} from '../src';
3 |
4 |
5 |
6 | /**
7 | *
8 | */
9 | describe(
10 | 'WAI-ARIA Simple CheckBox example',
11 | simpleCheckbox(({checked}) => {
12 | return SimpleCheckbox(checked);
13 | })
14 | );
15 |
16 |
--------------------------------------------------------------------------------
/test/tooltip.js:
--------------------------------------------------------------------------------
1 | import {tooltip} from '../src';
2 |
3 |
4 |
5 | /**
6 | *
7 | */
8 | describe(
9 | 'React Bootstrap Tooltip',
10 | tooltip((options) => {
11 | $(document).tooltip();
12 |
13 | const node = document.createElement('button');
14 | node.title = options.text;
15 |
16 | return node;
17 | }
18 | ));
19 |
--------------------------------------------------------------------------------
/test/tristateCheckbox.js:
--------------------------------------------------------------------------------
1 | import TristateCheckbox from './lib/tristateCheckbox';
2 | import {tristateCheckbox} from '../src';
3 |
4 |
5 | /**
6 | *
7 | */
8 | describe(
9 | 'WAI-ARIA Tristate CheckBox example',
10 | tristateCheckbox(({title, state, items}) => {
11 | return TristateCheckbox(title, state, items);
12 | })
13 | );
14 |
--------------------------------------------------------------------------------
/test/radioButton.js:
--------------------------------------------------------------------------------
1 | import RadioButton from './lib/radiobutton';
2 | import {radioButton, createWrapper} from '../src';
3 |
4 |
5 |
6 | /**
7 | *
8 | */
9 | describe(
10 | 'WAI-ARIA RadioButton example',
11 | radioButton(({id, label, items}) => {
12 | return RadioButton({
13 | id,
14 | text: label
15 | }, items);
16 | })
17 | );
18 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | */
4 | export {default as progressBar} from './progressBar';
5 | export {default as tabPanel} from './tabPanel';
6 | export {default as radioButton} from './radioButton';
7 | export {default as slider} from './slider';
8 | export {default as tooltip} from './tooltip';
9 | export {default as dialog} from './dialog';
10 | export {default as simpleCheckbox} from './simpleCheckbox';
11 | export {default as tristateCheckbox} from './tristateCheckbox';
12 | export {default as accordion} from './accordion';
13 |
--------------------------------------------------------------------------------
/template/karma.conf.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | */
4 | module.exports = function(config) {
5 | config.set({
6 | files: [
7 | 'test/*.js'
8 | ],
9 | frameworks: [
10 | 'mocha'
11 | ],
12 | reporters: [
13 | 'mocha'
14 | ],
15 | mochaReporter: {
16 | colors: {
17 | info: 'yellow'
18 | }
19 | },
20 | browsers: [
21 | 'Chrome',
22 | 'Firefox'
23 | ],
24 | preprocessors: {
25 | 'test/*.js': ['webpack']
26 | },
27 | webpack: {
28 | devtool: 'inline-source-map'
29 | }
30 | });
31 | };
32 |
--------------------------------------------------------------------------------
/template/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "rgaa-test-suite-template",
3 | "private": true,
4 | "scripts": {
5 | "start": "npm run test -- --watch",
6 | "test": "karma start"
7 | },
8 | "devDependencies": {
9 | "rgaa-test-suite": "^0.1.0",
10 | "karma": "^1.3.0",
11 | "karma-chrome-launcher": "^2.0.0",
12 | "karma-firefox-launcher": "^1.0.0",
13 | "karma-mocha": "^1.3.0",
14 | "karma-mocha-reporter": "^2.2.1",
15 | "karma-webpack": "^1.7.0",
16 | "mocha": "^3.1.2",
17 | "webpack": "^1.13.0"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/cleanDom.js:
--------------------------------------------------------------------------------
1 | import {toLower} from 'lodash';
2 |
3 |
4 |
5 | /**
6 | * Removes every child of body that is not a .
7 | */
8 | export default () => {
9 | if (!document.body.hasChildNodes()) {
10 | return;
11 | }
12 |
13 | const nodes = document.body.childNodes;
14 | const notScripts = [];
15 |
16 | for (let i = 0; i < nodes.length; i++) {
17 | if (toLower(nodes[i].tagName) !== 'script') {
18 | notScripts.push(nodes[i]);
19 | }
20 | }
21 |
22 | notScripts.forEach((node) =>
23 | document.body.removeChild(node)
24 | );
25 | };
26 |
--------------------------------------------------------------------------------
/test/progressBar.js:
--------------------------------------------------------------------------------
1 | import {render, createElement} from 'react';
2 | import RgaaReactBootstrap from 'rgaa_react-bootstrap';
3 | import {progressBar, createWrapper} from '../src';
4 |
5 |
6 |
7 | /**
8 | *
9 | */
10 | describe(
11 | 'React Bootstrap ProgressBar',
12 | progressBar(({min, max, value}) => {
13 | const props = {
14 | min,
15 | max,
16 | now: value,
17 | label: '%(percent)s%'
18 | };
19 |
20 | const node = document.createElement('div');
21 |
22 | render(
23 | createElement(RgaaReactBootstrap.ProgressBar, props),
24 | node
25 | );
26 |
27 | return node;
28 | }
29 | ));
30 |
--------------------------------------------------------------------------------
/test/dialog.js:
--------------------------------------------------------------------------------
1 | import {render, createElement} from 'react';
2 | import RgaaReactBootstrap from 'rgaa_react-bootstrap';
3 | import {dialog as dialogTest, createWrapper} from '../src';
4 |
5 |
6 |
7 | /**
8 | *
9 | */
10 | describe(
11 | 'jQuery Dialog test',
12 | dialogTest(({title, content}) => {
13 | const $dialog = $(`
14 |
15 | ${content}
16 |
17 | `);
18 |
19 | $dialog.dialog({
20 | dialogClass: "id-dialog",
21 | autoOpen: false
22 | });
23 |
24 | return {
25 | open() {
26 | $dialog.dialog('open');
27 | },
28 | close() {
29 | $dialog.dialog('close');
30 | }
31 | };
32 | }
33 | ));
34 |
--------------------------------------------------------------------------------
/src/setupSandbox.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | */
4 | const sandboxId = 'rgaaTestSuite-Sandbox';
5 |
6 | /**
7 | * Creates an element that will be used to contain some other
8 | * elements during a test. If a sandbox element already exists,
9 | * it will be replaced.
10 | */
11 | export default function setupSandbox(...children) {
12 | let sandbox = document.getElementById(sandboxId);
13 |
14 | if (sandbox) {
15 | document.body.removeChild(sandbox);
16 | }
17 |
18 | sandbox = document.createElement('div');
19 | sandbox.id = sandboxId;
20 |
21 | children.forEach((child) =>
22 | sandbox.appendChild(child)
23 | );
24 |
25 | document.body.appendChild(sandbox);
26 |
27 | return sandbox;
28 | };
29 |
--------------------------------------------------------------------------------
/test/accordion.js:
--------------------------------------------------------------------------------
1 | import {render, createElement} from 'react';
2 | import ReactBootstrap from 'react-bootstrap';
3 | import RgaaReactBootstrap from 'rgaa_react-bootstrap';
4 | import {accordion} from '../src';
5 |
6 |
7 |
8 | /**
9 | *
10 | */
11 | describe(
12 | 'React Bootstrap Accordion',
13 | accordion(({panels}) => {
14 | const props = {};
15 | const nestedPanels = panels.map((panel, i) => {
16 | const panelProps = {
17 | key: i,
18 | eventKey: i,
19 | header: panel.title
20 | };
21 |
22 | if (panel.selected) {
23 | props.defaultActiveKey = i;
24 | }
25 |
26 | return createElement(
27 | ReactBootstrap.Panel,
28 | panelProps,
29 | panel.content
30 | );
31 | });
32 |
33 | const node = document.createElement('div');
34 |
35 | render(
36 | createElement(
37 | RgaaReactBootstrap.Accordion,
38 | props,
39 | nestedPanels
40 | ),
41 | node
42 | );
43 |
44 | return node;
45 | }
46 | ));
47 |
--------------------------------------------------------------------------------
/test/tabPanel.js:
--------------------------------------------------------------------------------
1 | import {render, createElement} from 'react';
2 | import ReactBootstrap from 'react-bootstrap';
3 | import RgaaReactBootstrap from 'rgaa_react-bootstrap';
4 | import {tabPanel} from '../src';
5 |
6 |
7 |
8 | /**
9 | *
10 | */
11 | describe(
12 | 'React Bootstrap TabbedArea',
13 | tabPanel((options) => {
14 | const props = {};
15 | const panels = options.panels.map((panel, i) => {
16 | const panelProps = {
17 | key: i,
18 | eventKey: i,
19 | tab: panel.title
20 | };
21 |
22 | if (panel.selected) {
23 | props.defaultActiveKey = i;
24 | }
25 |
26 | return createElement(
27 | ReactBootstrap.Panel,
28 | panelProps,
29 | createElement('div', {
30 | dangerouslySetInnerHTML: {
31 | __html: panel.content
32 | }
33 | })
34 | );
35 | });
36 |
37 | const node = document.createElement('div');
38 |
39 | render(
40 | createElement(
41 | RgaaReactBootstrap.TabbedArea,
42 | props,
43 | panels
44 | ),
45 | node
46 | );
47 |
48 | return node;
49 | }
50 | ));
51 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var fullPath = path.resolve.bind(null, __dirname);
3 |
4 |
5 |
6 | /**
7 | *
8 | */
9 | module.exports = function(config) {
10 | config.set({
11 | files: [
12 | {pattern: require.resolve('jquery/dist/jquery'), watched: false},
13 | {pattern: require.resolve('jquery-nstslider/dist/jquery.nstSlider'), watched: false},
14 | {pattern: require.resolve('jquery-ui-dist/jquery-ui'), watched: false},
15 | {pattern: require.resolve('rgaa_jquery-ui/dist/rgaa_jquery-ui'), watched: false},
16 | 'test/*.js'
17 | ],
18 | frameworks: [
19 | 'mocha'
20 | ],
21 | reporters: [
22 | 'mocha'
23 | ],
24 | mochaReporter: {
25 | colors: {
26 | info: 'yellow'
27 | }
28 | },
29 | browsers: [
30 | 'Chrome',
31 | 'Firefox'
32 | ],
33 | preprocessors: {
34 | 'src/*.js': ['webpack'],
35 | 'test/*.js': ['webpack']
36 | },
37 | webpack: {
38 | devtool: 'inline-source-map',
39 | module: {
40 | loaders: [
41 | {
42 | test: /\.js$/i,
43 | loader: 'babel-loader',
44 | include: [
45 | fullPath('src'),
46 | fullPath('test')
47 | ]
48 | }
49 | ]
50 | }
51 | },
52 | webpackMiddleware: {
53 | noInfo: true
54 | }
55 | });
56 | };
57 |
--------------------------------------------------------------------------------
/src/describeSome.js:
--------------------------------------------------------------------------------
1 | /**
2 | * A drop-in replacement for describe() that will fail only
3 | * if none of its tests passes.
4 | *
5 | * @param {string} title - Title.
6 | * @param {function} suite - Suite.
7 | */
8 | export default function describeSome(title, suite) {
9 | describe(title, function() {
10 | let success = false;
11 |
12 | // Calls the original suite to register tests and hooks.
13 | suite.call(this);
14 |
15 | // Wraps each test function with an exception handler
16 | // to keep track of test statuses.
17 | this.tests.map((test) => {
18 | const fn = test.fn;
19 |
20 | test.fn = function() {
21 | try {
22 | fn.call(this);
23 | success = true;
24 | } catch (e) {
25 | // Failing tests are skipped, so if there are
26 | // failing and successful tests, failing ones
27 | // won't break the entire build.
28 | this.skip();
29 | }
30 | }
31 | });
32 |
33 | // Adds a test that will fail if all the other failed.
34 | it('Au moins une des conditions est remplie.', function() {
35 | if (!success) {
36 | throw new Error('Aucun test n\'a réussi.');
37 | }
38 | });
39 | });
40 | };
41 |
42 | /**
43 | * Proxies describe() helpers.
44 | */
45 | describeSome.skip = describe.skip;
46 | describeSome.only = describe.only;
47 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | # Licence
2 |
3 | Ces documents sont des documents de l'État français placés sous licence ouverte 1.0 ou ultérieure. Vous trouverez des précisions sur cette licence sur le [blog de la mission etalab](http://www.etalab.gouv.fr/licence-ouverte-open-licence).
4 |
5 | Vous êtes libres de :
6 | * Reproduire, copier, publier et transmettre ces informations ;
7 | * Diffuser et redistribuer ces informations ;
8 | * Adapter, modifier, extraire et transformer ces information, notamment pour créer des informations dérivées ;
9 | * Exploiter ces informations à titre commercial, par exemple en la combinant avec d'autres informations, ou enl'incluant dans votre propre produit ou application.
10 |
11 | Ces libertés s'appliquent sous réserve de mentionner la paternité de l'information d'origine : sa source et la date de sa dernière mise à jour. Le réutilisateur peut notamment s'acquitter de cette condition en indiquant un ou des liens hypertextes (URL) renvoyant vers le présent dépôt et assurant une mention effective de sa paternité.
12 |
13 | Cette mention de paternité ne doit ni conférer un caractère officiel à la réutilisation de ces informations, ni suggérer une quelconque reconnaissance ou caution par le producteur de l'information, ou par toute autre entité publique, du réutilisateur ou de sa réutilisation.
14 |
--------------------------------------------------------------------------------
/test/slider.js:
--------------------------------------------------------------------------------
1 | import {slider, createWrapper} from '../src';
2 | import {render, createElement} from 'react';
3 | import Rheostat from 'rheostat';
4 |
5 |
6 |
7 | /**
8 | *
9 | */
10 | describe(
11 | 'jQuery nstSlider',
12 | slider(({id, min, max, current, withLabel, isVertical}) => {
13 | const $slider = $(`
14 |
28 | ${withLabel ? '' : ''}
29 | `);
30 |
31 | $slider.filter('.nstSlider').nstSlider({
32 | left_grip_selector: '.grip',
33 | value_changed_callback: function(cause, leftValue) {
34 | $slider.find('.label').text(leftValue);
35 | }
36 | });
37 |
38 | return $slider[0];
39 | }
40 | ));
41 |
42 | /**
43 | *
44 | */
45 | describe(
46 | 'Rheostat',
47 | slider(({id, min, max, current, withLabel, isVertical}) => {
48 | const props = {
49 | max,
50 | min,
51 | values: [current]
52 | };
53 |
54 | const node = document.createElement('div');
55 |
56 | render(createElement(Rheostat, props), node);
57 |
58 | return node;
59 | }
60 | ));
61 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "rgaa-test-suite",
3 | "version": "1.1.3",
4 | "description": "A test suite to test JavaScript components for RGAA3 compliancy.",
5 | "author": "Etat Plateforme ",
6 | "main": "lib/index.js",
7 | "scripts": {
8 | "start": "npm run test -- --watch",
9 | "build": "babel --out-dir ./lib ./src",
10 | "test": "karma start",
11 | "prepublish": "npm run build"
12 | },
13 | "dependencies": {
14 | "chai": "^3.5.0",
15 | "effroi": "github:v-technologies/effroi",
16 | "tabbable": "^1.0.4"
17 | },
18 | "peerDependencies": {
19 | "mocha": "^2.0.0"
20 | },
21 | "devDependencies": {
22 | "babel": "^6.5.2",
23 | "babel-cli": "^6.18.0",
24 | "babel-core": "^6.7.6",
25 | "babel-loader": "^6.2.4",
26 | "babel-preset-es2015": "^6.6.0",
27 | "babel-preset-stage-2": "^6.5.0",
28 | "jquery": "^3.1.1",
29 | "jquery-nstslider": "^1.0.4",
30 | "jquery-ui-dist": "^1.12.1",
31 | "karma": "^0.13.22",
32 | "karma-chrome-launcher": "^0.2.3",
33 | "karma-firefox-launcher": "^0.1.7",
34 | "karma-mocha": "^0.2.2",
35 | "karma-mocha-reporter": "^2.0.1",
36 | "karma-webpack": "^1.7.0",
37 | "mocha": "^2.4.5",
38 | "react": "^0.13.3",
39 | "react-bootstrap": "^0.19.1",
40 | "rgaa_jquery-ui": "^1.0.1",
41 | "rgaa_react-bootstrap": "^1.0.0",
42 | "rheostat": "^2.1.0",
43 | "webpack": "^1.13.0"
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/keyboard.js:
--------------------------------------------------------------------------------
1 | import tabbable from 'tabbable';
2 |
3 |
4 |
5 | /**
6 | *
7 | */
8 | const CHARCODES = {
9 | 'up': 38,
10 | 'down': 40,
11 | 'left': 37,
12 | 'right': 39,
13 | 'esc': 27,
14 | 'tab': 9,
15 | 'enter': 13
16 | };
17 |
18 | /**
19 | *
20 | */
21 | const getKeycode = (keycodeOrName) =>
22 | typeof keycodeOrName === 'string' ? CHARCODES[keycodeOrName] : keycodeOrName;
23 |
24 | /**
25 | *
26 | */
27 | const keyEvent = (event, keycodeOrName, element = document.activeElement) => {
28 | $(element).trigger($.Event(`key${event}`, {which: getKeycode(keycodeOrName)}));
29 | };
30 |
31 | /**
32 | *
33 | */
34 | export const press = (keycodeOrName, element = document.activeElement) => {
35 | keyEvent('down', keycodeOrName, element);
36 | keyEvent('press', keycodeOrName, element);
37 | keyEvent('up', keycodeOrName, element);
38 | };
39 |
40 | /**
41 | *
42 | */
43 | export const tab = (reverse = false) => {
44 | const elements = tabbable(document.body);
45 | if (!elements.length) {
46 | return;
47 | }
48 | let i = elements.length -1;
49 | for (i; i >= 0; i--) {
50 | if (elements[i] === document.activeElement) {
51 | break;
52 | }
53 | }
54 |
55 | keyEvent('down', CHARCODES.tab);
56 | keyEvent('press', CHARCODES.tab);
57 |
58 | let toFocus;
59 | if (reverse) {
60 | toFocus = i-1 < 0 ? elements[elements.length - 1] : elements[i - 1];
61 | } else {
62 | toFocus = i + 1 >= elements.length ? elements[0] : elements[i + 1];
63 | }
64 | $(toFocus).focus();
65 |
66 | keyEvent('up', CHARCODES.tab);
67 | };
68 |
69 | /**
70 | *
71 | */
72 | export const shiftTab = () => tab(true);
73 |
74 | /**
75 | *
76 | */
77 | export const focus = (element) => {
78 | if (element === document.activeElement) {
79 | return true;
80 | }
81 | blur();
82 | while (element !== document.activeElement && tab()) {
83 | continue;
84 | }
85 | return element === document.activeElement;
86 | };
87 |
88 | export const blur = (element = document.activeElement) => {
89 | $(element).blur();
90 | };
91 |
--------------------------------------------------------------------------------
/test/lib/simpleCheckbox.js:
--------------------------------------------------------------------------------
1 | /**
2 | * create a simple checkbox
3 | *
4 | * code taken from https://www.w3.org/TR/wai-aria-practices-1.1/examples/checkbox/checkbox-1.html
5 | *
6 | * @param {Boolean} checked state of checkbox
7 | */
8 | export default function simpleCheckbox(checked) {
9 | //console.log('checked', checked);
10 | const container = document.createElement('div');
11 | container.setAttribute('role', 'checkbox');
12 | container.setAttribute('tabindex', 0);
13 | container.setAttribute('aria-checked', checked);
14 | const img = document.createElement('img');
15 | img.setAttribute('src', '');
16 | img.setAttribute('role', 'presentation');
17 | const label = document.createElement('span');
18 | label.innerHTML = 'Label';
19 | container.appendChild(img);
20 | container.appendChild(label);
21 | container.addEventListener('keydown', toggleCheckbox);
22 | container.addEventListener('click', toggleCheckbox);
23 | container.addEventListener('focus', focusCheckbox);
24 | container.addEventListener('blur', blurCheckbox);
25 |
26 | return container;
27 | }
28 |
29 | /*
30 | * @function toggleCheckBox
31 | *
32 | * @desc Toogles the state of a checkbox and updates image indicating state based on aria-checked values
33 | *
34 | * @param {Object} event - Standard W3C event object
35 | *
36 | */
37 |
38 | function toggleCheckbox(event) {
39 |
40 | var node = event.currentTarget;
41 | var state = node.getAttribute('aria-checked').toLowerCase();
42 | if (event.type === 'click' ||
43 | (event.type === 'keydown' && event.keyCode === 32)
44 | ) {
45 | if (state === 'true') {
46 | node.setAttribute('aria-checked', 'false');
47 | }
48 | else {
49 | node.setAttribute('aria-checked', 'true');
50 | }
51 |
52 | event.preventDefault();
53 | event.stopPropagation();
54 | }
55 |
56 | }
57 |
58 | /*
59 | * @function focusCheckBox
60 | *
61 | * @desc Adds focus to the class name of the checkbox
62 | *
63 | * @param {Object} event - Standard W3C event object
64 | */
65 |
66 | function focusCheckbox(event) {
67 | event.currentTarget.className += ' focus';
68 | }
69 |
70 | /*
71 | * @function blurCheckBox
72 | *
73 | * @desc Adds focus to the class name of the checkbox
74 | *
75 | * @param {Object} event - Standard W3C event object
76 | */
77 |
78 | function blurCheckbox(event) {
79 | event.currentTarget.className = event.currentTarget.className.replace(' focus','');
80 | }
81 |
--------------------------------------------------------------------------------
/src/tooltip.js:
--------------------------------------------------------------------------------
1 | import {expect} from 'chai';
2 | import tabbable from 'tabbable';
3 | import effroi from 'effroi';
4 | import setupSandbox from './setupSandbox';
5 | import cleanDom from './cleanDom';
6 |
7 |
8 |
9 | /**
10 | *
11 | */
12 | const findTooltip = (trigger) =>
13 | document.getElementById(
14 | trigger.getAttribute('aria-describedby')
15 | );
16 |
17 | /**
18 | *
19 | */
20 | const isTooltipActive = (tooltip) =>
21 | tooltip && $(tooltip).is(':visible');
22 |
23 | /**
24 | *
25 | */
26 | export default (factory) => () =>
27 | describe('Motif de conception ARIA Tooltip', function() {
28 | beforeEach(function() {
29 | this.props = {
30 | text: 'Tooltip'
31 | };
32 |
33 | this.sandbox = setupSandbox(
34 | factory(this.props),
35 | document.createElement('button') // a dummy button that can be focused
36 | );
37 |
38 | const tabbableChildren = tabbable(this.sandbox);
39 |
40 | if (tabbableChildren.length === 0) {
41 | throw new Error(
42 | 'There should be a focusable trigger element '
43 | + 'that the test suite can focus to activate '
44 | + 'its associated tooltip.'
45 | );
46 | }
47 |
48 | this.trigger = tabbableChildren[0];
49 |
50 | // Should render the tooltip.
51 | effroi.keyboard.focus(this.trigger);
52 | });
53 |
54 | afterEach(function() {
55 | cleanDom();
56 | });
57 |
58 | describe('Critère 1 : L\'implémentation ARIA est-elle conforme ?', function() {
59 | it('Précondition : Lorsque l\'élément déclenchant prend le focus, le tooltip est activé.', function() {
60 | effroi.keyboard.focus(this.trigger);
61 |
62 | expect(findTooltip(this.trigger))
63 | .to.satisfy(isTooltipActive);
64 | });
65 |
66 | it('Test 1.1 : Le composant possède-t-il un role="tooltip" ?', function() {
67 | effroi.keyboard.focus(this.trigger);
68 |
69 | expect(findTooltip(this.trigger).getAttribute('role'))
70 | .to.equal('tooltip');
71 | });
72 |
73 | it('Test 1.2 : L\'élément déclenchant possède-t-il la propriété aria-describedby="[ID_tooltip]" ?', function() {
74 | effroi.keyboard.focus(this.trigger);
75 |
76 | expect(this.trigger.getAttribute('aria-describedby'))
77 | .to.be.ok;
78 | });
79 |
80 | it('Test 1.3 : Lorsque l\'élément déclenchant perd le focus, le tooltip est désactivé, cette règle est-elle respectée ?', function() {
81 | effroi.keyboard.focus(this.trigger);
82 | effroi.keyboard.tab();
83 |
84 | expect(findTooltip(this.trigger))
85 | .to.not.satisfy(isTooltipActive);
86 | });
87 | });
88 |
89 | describe('Critère 2 : Les interactions au clavier sont-elles conformes ?', function() {
90 | it('Test 2.1 : L\'utilisation de la touche [ESC] permet de désactiver le tooltip, cette règle est-elle respectée ?', function() {
91 | effroi.keyboard.focus(this.trigger);
92 | effroi.keyboard.hit('Esc');
93 |
94 | expect(findTooltip(this.trigger))
95 | .to.not.satisfy(isTooltipActive);
96 | });
97 | });
98 | });
99 |
--------------------------------------------------------------------------------
/src/dialog.js:
--------------------------------------------------------------------------------
1 | import {expect} from 'chai';
2 | import tabbable from 'tabbable';
3 | import effroi from 'effroi';
4 | import describeSome from './describeSome';
5 | import cleanDom from './cleanDom';
6 |
7 |
8 |
9 | const isDialogOpened = (dialog) =>
10 | dialog && $(dialog).is(':visible');
11 |
12 | /**
13 | *
14 | */
15 | export default function createDialogTest(factory) {
16 | return function testDialog() {
17 | beforeEach(function() {
18 | const props = {
19 | title: 'Header',
20 | content: `
21 | This the content of my dialog.
22 |
23 |
24 | `
25 | };
26 |
27 | const result = factory(props);
28 |
29 | this.open = result.open;
30 | this.close = result.close;
31 |
32 | this.beforeOpenFocusedElement = document.activeElement;
33 | this.open();
34 |
35 | this.dialog = document.body.querySelector('[role="dialog"]');
36 | this.alertDialog = document.body.querySelector('[role="alertdialog"]');
37 | this.container = this.dialog || this.alertDialog;
38 | this.focusables = tabbable(this.container);
39 | });
40 |
41 | afterEach(function() {
42 | cleanDom();
43 | });
44 |
45 | describe('Critère 1 : L\'implémentation ARIA est-elle conforme ?', function() {
46 | describeSome('Test 1.1: Le composant respecte-t-il une de ces conditions ?', function() {
47 | it('Le composant possède un role="dialog".', function() {
48 | expect(this.dialog).to.exist;
49 | });
50 |
51 | it('Le composant possède un role="alertdialog".', function() {
52 | expect(this.alertDialog).to.exist;
53 | });
54 | });
55 |
56 | describeSome('Test 1.2 : Le composant respecte-t-il une de ces conditions ?', function() {
57 | it('Le composant possède une propriété aria-label="[Titre de la fenêtre]".', function() {
58 | expect(this.container.getAttribute('aria-label')).to.exist;
59 | });
60 |
61 | it('Le composant possède une propriété aria-labelledby="[ID_titre]" référençant un passage de texte faisant office de titre.', function() {
62 | expect(this.container.getAttribute('aria-labelledby')).to.exist;
63 | });
64 | });
65 |
66 | describe('Test 1.3 : À l\'ouverture de la fenêtre, le focus est donné sur le premier élément focusable ?', function() {
67 | it('Cette condition est respectée.', function() {
68 | expect(document.activeElement)
69 | .to.equal(this.focusables[0]);
70 | });
71 | });
72 |
73 | describe('Test 1.4 : À la fermeture de la fenêtre, le focus est donné sur l\'élément ayant permis d\'ouvrir la fenêtre, cette règle est-elle respectée ?', function() {
74 | it('Cette condition est respectée.', function() {
75 | this.close();
76 | expect(document.activeElement)
77 | .to.equal(this.beforeOpenFocusedElement);
78 | });
79 | });
80 | });
81 |
82 | describe('Critère 2 : Les interactions au clavier sont-elles conformes ?', function() {
83 | describe('Test 2.1 : L\'utilisation de la touche [TAB] respecte-elle ces conditions ?', function() {
84 | it('La tabulation permet d\'atteindre l\'élément suivant et précédent du composant.', function() {
85 | effroi.keyboard.focus(this.focusables[0]);
86 |
87 | effroi.keyboard.tab();
88 | expect(document.activeElement)
89 | .to.equal(this.focusables[1]);
90 |
91 | effroi.keyboard.shiftTab();
92 | expect(document.activeElement)
93 | .to.equal(this.focusables[0]);
94 | });
95 |
96 | it('La tabulation est restreinte aux éléments focusables du composant.', function() {
97 | effroi.keyboard.focus(this.focusables[0]);
98 |
99 | effroi.keyboard.shiftTab();
100 | expect(document.activeElement)
101 | .to.equal(this.focusables[this.focusables.length - 1]);
102 |
103 | effroi.keyboard.tab();
104 | expect(document.activeElement)
105 | .to.equal(this.focusables[0]);
106 | });
107 | });
108 |
109 | describe('Test 2.2 : L\'utilisation de la touche [ESC] permet-t-elle de fermer la fenêtre ?', function() {
110 | it('Cette condition est respectée.', function() {
111 | effroi.keyboard.hit('Esc');
112 |
113 | expect(this.cleanContainer)
114 | .to.not.satisfy(isDialogOpened);
115 | });
116 | });
117 | });
118 | };
119 | }
120 |
--------------------------------------------------------------------------------
/src/simpleCheckbox.js:
--------------------------------------------------------------------------------
1 | import {expect} from 'chai';
2 | import effroi from 'effroi';
3 | import pending from './pending';
4 | import setupSandbox from './setupSandbox';
5 |
6 |
7 |
8 | /**
9 | *
10 | */
11 | const defaultMakeLabel = ({value}) => `${value}%`;
12 |
13 |
14 |
15 | /**
16 | * Returns a function that tests a simple checkbox component.
17 | *
18 | * @param function factory A factory function that takes
19 | * a map of options and returns a DOM node containing a
20 | * checkbox.
21 | */
22 | export default function createSimpleCheckboxTest(factory, makeLabel = defaultMakeLabel) {
23 | return function testSimpleCheckbox() {
24 | describe('Critère 1 : L\'implémentation ARIA est-elle conforme ?', function() {
25 | describe('Test 1.1 : Le composant respecte-t-il ces conditions ?', function() {
26 | it('Le composant possède un role="checkbox".', function() {
27 | const props = {
28 | checked: true
29 | };
30 |
31 | const sandbox = setupSandbox(factory(props));
32 | const checkbox = sandbox.querySelector('[role="checkbox"]');
33 |
34 | expect(checkbox).to.be.ok;
35 | });
36 |
37 | it('Le composant possède la propriété aria-checked="true" lorsqu\'il est sélectionné.', function() {
38 | const props = {
39 | checked: true
40 | };
41 |
42 | const sandbox = setupSandbox(factory(props));
43 | const checkbox = sandbox.querySelector('[role="checkbox"]');
44 |
45 | expect(checkbox.getAttribute('aria-checked')).to.equal('true');
46 | });
47 |
48 | it('Le composant possède la propriété aria-checked="false" lorsqu\'il n\'est pas sélectionné.', function() {
49 | const props = {
50 | checked: false
51 | };
52 |
53 | const sandbox = setupSandbox(factory(props));
54 | const checkbox = sandbox.querySelector('[role="checkbox"]');
55 |
56 | expect(checkbox.getAttribute('aria-checked')).to.equal('false');
57 | });
58 |
59 | it('Le composant possède l\'attribut tabindex="0", si nécessaire.', function() {
60 | const props = {
61 | checked: true
62 | };
63 |
64 | const sandbox = setupSandbox(factory(props));
65 | const checkbox = sandbox.querySelector('[role="checkbox"]');
66 |
67 | expect(checkbox.getAttribute('tabindex')).to.equal('0');
68 | });
69 | })
70 |
71 | describe('Test 1.2 : Chaque état de composant symbolisé par une image respecte-t-il une de ces conditions ?', function() {
72 | before(function() {
73 | const props = {
74 | checked: true
75 | };
76 |
77 | const sandbox = setupSandbox(factory(props));
78 | this.images = sandbox.querySelectorAll('img');
79 | this.presentationImages = sandbox.querySelectorAll('img[role="presentation"]');
80 | });
81 |
82 | it('L\'image possède le role="presentation".', function() {
83 | if (!this.images.length) {
84 | return pending(this, 'Aucune image trouvée.');
85 | }
86 | expect(this.presentationImages.length).to.equal(1);
87 | });
88 |
89 | it('L\'image est une image insérée via CSS.', function() {
90 | return pending(this, 'Non testable automatiquement.');
91 | });
92 | })
93 |
94 | })
95 | describe('Critère 2 : Les interactions au clavier sont-elles conformes ?', function() {
96 | describe('Test 2.1 : Pour chaque composant, l\'utilisation de la touche [Espace] respecte-t-elle ces conditions ?', function() {
97 | it('[Espace] permet de cocher le composant s\'il n\'est pas coché.', function() {
98 | const props = {
99 | checked: false
100 | };
101 |
102 | const sandbox = setupSandbox(factory(props));
103 | const checkbox = sandbox.querySelector('[role="checkbox"]');
104 |
105 | // Simulates keyboard space event
106 | effroi.keyboard.focus(checkbox);
107 | effroi.keyboard.hit('Spacebar');
108 |
109 | expect(checkbox.getAttribute('aria-checked')).to.equal('true');
110 | });
111 |
112 | it('[Espace] permet de décocher le composant s\'il est coché.', function() {
113 | const props = {
114 | checked: true
115 | };
116 |
117 | const sandbox = setupSandbox(factory(props));
118 | const checkbox = sandbox.querySelector('[role="checkbox"]');
119 |
120 | // Simulates keyboard space event
121 | effroi.keyboard.focus(checkbox);
122 | effroi.keyboard.hit('Spacebar');
123 |
124 | expect(checkbox.getAttribute('aria-checked')).to.equal('false');
125 | });
126 | });
127 | });
128 | };
129 | }
130 |
--------------------------------------------------------------------------------
/test/lib/tristateCheckbox.js:
--------------------------------------------------------------------------------
1 | /**
2 | * create a tristate checkbox
3 | *
4 | * code taken from https://www.w3.org/TR/wai-aria-practices-1.1/examples/checkbox/checkbox-1.html
5 | *
6 | * @param {string} state state of checkbox
7 | */
8 | export default function tristateCheckbox(title, state, items) {
9 | const container = document.createElement('fieldset');
10 | const legend = document.createElement('legend');
11 | legend.innerHTML = title;
12 |
13 | const mainCheckbox = document.createElement('div');
14 | mainCheckbox.setAttribute('role', 'checkbox');
15 | mainCheckbox.setAttribute('tabindex', 0);
16 | mainCheckbox.setAttribute('aria-checked', state);
17 | mainCheckbox.setAttribute('class', 'group_checkbox');
18 | const img = document.createElement('img');
19 | img.setAttribute('src', '');
20 | img.setAttribute('role', 'presentation');
21 | const label = document.createElement('span');
22 | label.innerHTML = 'Label';
23 | mainCheckbox.appendChild(img);
24 | mainCheckbox.appendChild(label);
25 | mainCheckbox.addEventListener('keydown', toggleGroupCheckbox);
26 | mainCheckbox.addEventListener('click', toggleGroupCheckbox);
27 | mainCheckbox.addEventListener('focus', focusCheckbox);
28 | mainCheckbox.addEventListener('blur', blurCheckbox);
29 |
30 | container.appendChild(legend);
31 | container.appendChild(mainCheckbox);
32 |
33 | items.forEach((item) => {
34 | const checkboxLabel = document.createElement('label');
35 | const checkbox = document.createElement('input');
36 | checkbox.setAttribute('type', 'checkbox');
37 | checkbox.checked = item.checked;
38 | checkbox.addEventListener('change', updateGroupCheckbox);
39 | checkbox.addEventListener('focus', focusStandardCheckbox);
40 | checkbox.addEventListener('blur', blurStandardCheckbox);
41 | const labelTitle = document.createElement('span');
42 | labelTitle.innerHTML = item.label;
43 |
44 | checkboxLabel.appendChild(checkbox);
45 | checkboxLabel.appendChild(labelTitle);
46 | container.appendChild(checkboxLabel);
47 | });
48 |
49 | return container;
50 | }
51 |
52 |
53 |
54 |
55 | /*
56 | * @function toggleGroupCheckBox
57 | *
58 | * @desc Toogles the state of a grouping checkbox
59 | *
60 | * @param {Object} event - Standard W3C event object
61 | *
62 | */
63 |
64 | function toggleGroupCheckbox(event) {
65 | var node = event.currentTarget
66 |
67 | var image = node.getElementsByTagName('img')[0]
68 |
69 | var state = node.getAttribute('aria-checked').toLowerCase()
70 |
71 | if (event.type === 'click' ||
72 | (event.type === 'keydown' && event.keyCode === 32)) {
73 |
74 | if (state === 'false' || state === 'mixed') {
75 | node.setAttribute('aria-checked', 'true')
76 | setCheckboxes(node, true)
77 | }
78 | else {
79 | node.setAttribute('aria-checked', 'false')
80 | setCheckboxes(node, false)
81 | }
82 |
83 | event.preventDefault()
84 | event.stopPropagation()
85 |
86 | }
87 |
88 | }
89 |
90 | /*
91 | * @function setCheckboxes
92 | *
93 | * @desc
94 | *
95 | * @param {Object} node - DOM node of updated checkbox
96 | * @param {Booleam} state - Set value of checkboxes
97 | *
98 | */
99 |
100 | function setCheckboxes(node, state) {
101 |
102 | var checkboxes = node.parentNode.querySelectorAll('input[type=checkbox]')
103 |
104 | for (var i = 0; i < checkboxes.length; i++) {
105 | checkboxes[i].checked = state;
106 | }
107 | }
108 |
109 | /*
110 | * @function updateGroupCheckbox
111 | *
112 | * @desc
113 | *
114 | * @param {Object} node - DOM node of updated group checkbox
115 | */
116 | function updateGroupCheckbox(event) {
117 |
118 | var node = event.currentTarget;
119 |
120 | var checkboxes = node.parentNode.parentNode.querySelectorAll('input[type=checkbox]');
121 |
122 | var state = 'false';
123 | var count = 0;
124 |
125 | for (var i = 0; i < checkboxes.length; i++) {
126 | if (checkboxes[i].checked) count += 1;
127 | }
128 |
129 | if (count > 0) state = 'mixed';
130 | if (count === checkboxes.length) state = 'true';
131 |
132 | var group_checkbox = node.parentNode.parentNode.getElementsByClassName('group_checkbox')[0];
133 |
134 | group_checkbox.setAttribute('aria-checked', state);
135 | }
136 | /*
137 | * @function focusCheckBox
138 | *
139 | * @desc Adds focus to the class name of the checkbox
140 | *
141 | * @param {Object} event - Standard W3C event object
142 | */
143 |
144 | function focusCheckbox(event) {
145 | event.currentTarget.className += ' focus';
146 | }
147 |
148 | /*
149 | * @function blurCheckBox
150 | *
151 | * @desc Adds focus to the class name of the checkbox
152 | *
153 | * @param {Object} event - Standard W3C event object
154 | */
155 |
156 | function blurCheckbox(event) {
157 | event.currentTarget.className = event.currentTarget.className.replace(' focus','');
158 | }
159 |
160 | /*
161 | * @function focusStandardCheckBox
162 | *
163 | * @desc Adds focus styling to label element encapsulating standard checkbox
164 | *
165 | * @param {Object} event - Standard W3C event object
166 | */
167 |
168 | function focusStandardCheckbox(event) {
169 | event.currentTarget.parentNode.className += ' focus';
170 | }
171 |
172 | /*
173 | * @function blurStandardCheckBox
174 | *
175 | * @desc Adds focus styling to the label element encapsulating standard checkbox
176 | *
177 | * @param {Object} event - Standard W3C event object
178 | */
179 |
180 | function blurStandardCheckbox(event) {
181 | event.currentTarget.parentNode.className = event.currentTarget.parentNode.className .replace(' focus','');
182 | }
183 |
--------------------------------------------------------------------------------
/src/progressBar.js:
--------------------------------------------------------------------------------
1 | import {expect} from 'chai';
2 | import {random} from 'lodash';
3 | import pending from './pending';
4 | import describeSome from './describeSome';
5 | import setupSandbox from './setupSandbox';
6 |
7 |
8 |
9 | /**
10 | *
11 | */
12 | const defaultMakeLabel = ({value}) => `${value}%`;
13 |
14 |
15 |
16 | /**
17 | * Returns a function that tests a progress bar component.
18 | *
19 | * @param function factory A factory function that takes
20 | * a map of options and returns a DOM node containing a
21 | * progress bar.
22 | */
23 | export default (factory, makeLabel = defaultMakeLabel) => () =>
24 | describe('Motif de conception ARIA Progressbar', function() {
25 | describe('Critère 1 : L\'implémentation ARIA est-elle conforme ?', function() {
26 | describe('Test 1.1 : Le composant respecte-t-il ces conditions ?', function() {
27 | before(function() {
28 | this.props = {
29 | min: random(0, 30),
30 | max: random(70, 100),
31 | value: random(30, 70)
32 | };
33 |
34 | this.sandbox = setupSandbox(factory(this.props));
35 | this.progressBar = this.sandbox.querySelector('[role="progressbar"]');
36 | });
37 |
38 | it('Le composant possède un role="progressbar".', function() {
39 | expect(this.progressBar.getAttribute('role'))
40 | .to.be.ok;
41 | });
42 |
43 | it('Le composant possède une propriété aria-valuemin="[valeur minimale]".', function() {
44 | expect(Number(this.progressBar.getAttribute('aria-valuemin')))
45 | .to.equal(this.props.min);
46 | });
47 |
48 | it('Le composant possède une propriété aria-valuemax="[valeur maximale]".', function() {
49 | expect(Number(this.progressBar.getAttribute('aria-valuemax')))
50 | .to.equal(this.props.max);
51 | });
52 | });
53 |
54 | describeSome('Test 1.2 : Le composant respecte-t-il une de ces conditions ?', function() {
55 | before(function() {
56 | this.props = {
57 | min: random(0, 30),
58 | max: random(70, 100),
59 | value: random(30, 70)
60 | };
61 |
62 | this.sandbox = setupSandbox(factory(this.props));
63 | this.progressBar = this.sandbox.querySelector('[role="progressbar"]');
64 | });
65 |
66 | it('Le composant est constitué d\'une image qui possède un attribut alt pertinent.', function() {
67 | expect(this.progressBar.getAttribute('title'))
68 | .to.not.be.empty;
69 | });
70 |
71 | it('Le composant possède une propriété aria-labelledby="[ID_texte]" référençant un passage de texte faisant office de nom.', function() {
72 | expect(this.progressBar.getAttribute('aria-labelledby'))
73 | .to.not.be.empty;
74 | });
75 |
76 | it('Le composant possède un attribut title faisant office de nom.', function() {
77 | expect(this.progressBar.querySelector('img[alt]'))
78 | .to.not.be.empty;
79 | });
80 | });
81 |
82 | describe('Test 1.3 : Chaque progression, dont la valeur courante est connue respecte-t-elle ces conditions ?', function() {
83 | before(function() {
84 | this.props = {
85 | min: random(0, 30),
86 | max: random(70, 100),
87 | value: random(30, 70)
88 | };
89 |
90 | this.sandbox = setupSandbox(factory(this.props));
91 | this.progressBar = this.sandbox.querySelector('[role="progressbar"]');
92 | });
93 |
94 | it('Le composant possède une propriété aria-valuenow="[valeur courante]".', function() {
95 | expect(Number(this.progressBar.getAttribute('aria-valuenow')))
96 | .to.equal(this.props.value);
97 | });
98 |
99 | it('Le composant possède, si nécessaire, une propriété aria-valuetext="[valeur courante + texte]".', function() {
100 | expect(this.progressBar.getAttribute('aria-valuetext'))
101 | .to.equal(makeLabel(this.props));
102 | });
103 |
104 | it('La valeur de la propriété aria-valuenow est mise à jour selon la progression.', function() {
105 | return pending(this, ' Test à implémenter.');
106 | });
107 |
108 | it('La valeur de la propriété aria-valuetext est mise à jour selon la progression.', function() {
109 | return pending(this, ' Test à implémenter.');
110 | });
111 | });
112 |
113 | describe('Test 1.4 : Chaque progression, dont la valeur courante est inconnue respecte-t-elle ces conditions ?', function() {
114 | before(function() {
115 | this.props = {
116 | min: random(0, 30),
117 | max: random(70, 100),
118 | value: undefined
119 | };
120 |
121 | this.sandbox = setupSandbox(factory(this.props));
122 | this.progressBar = this.sandbox.querySelector('[role="progressbar"]');
123 | });
124 |
125 | it('Le composant ne possède pas de propriété aria-valuenow.', function() {
126 | expect(this.progressBar.getAttribute('aria-valuenow'))
127 | .to.not.be.ok;
128 | });
129 |
130 | it('Le composant ne possède pas de propriété aria-valuetext.', function() {
131 | expect(this.progressBar.getAttribute('aria-valuetext'))
132 | .to.not.be.ok;
133 | });
134 | });
135 |
136 | describe('Test 1.5 : Chaque progression qui concerne une région spécifique d\'un document respecte-t-elle ces conditions ?', function() {
137 | it('La région concernée possède une propriété aria-describedby="[ID_composant]".', function() {
138 | return pending(this, ' Non testable automatiquement.');
139 | });
140 | it('La région concernée possède une propriété aria-busy="true" durant toute la durée de la progression.', function() {
141 | return pending(this, ' Non testable automatiquement.');
142 | });
143 | });
144 | });
145 | });
146 |
--------------------------------------------------------------------------------
/src/slider.js:
--------------------------------------------------------------------------------
1 | import {expect} from 'chai';
2 | import effroi from 'effroi';
3 | import pending from './pending';
4 | import describeSome from './describeSome';
5 | import setupSandbox from './setupSandbox';
6 |
7 |
8 |
9 | /**
10 | *
11 | */
12 | export default function createSliderText(factory) {
13 | return function testSlider() {
14 | beforeEach(function() {
15 | this.props = {
16 | id: 'clean',
17 | min: -10,
18 | max: 10,
19 | current: 5,
20 | isVertical: false,
21 | withLabel: false
22 | };
23 |
24 | this.sandbox = setupSandbox(factory(this.props));
25 | this.slider = this.sandbox.querySelector('[role="slider"]');
26 | });
27 |
28 | describe('Critère 1 : L\'implémentation ARIA est-elle conforme ?', function() {
29 | describe('Test 1.1: Le composant respecte-t-il ces conditions ?', function() {
30 | it('Le composant possède un role="slider".', function() {
31 | expect(this.slider).to.exist;
32 | });
33 |
34 | it('Le composant possède une propriété aria-valuenow="[valeur courante]".', function() {
35 | expect(this.slider.getAttribute('aria-valuenow')).to.equal(`${this.props.current}`);
36 | });
37 |
38 | it('Le composant possède une propriété aria-valuemax="[valeur maximale]".', function() {
39 | expect(this.slider.getAttribute('aria-valuemax')).to.equal(`${this.props.max}`);
40 | });
41 |
42 | it('Le composant possède une propriété aria-valuemin="[valeur minimum]".', function() {
43 | expect(this.slider.getAttribute('aria-valuemin')).to.equal(`${this.props.min}`);
44 | });
45 |
46 | it('Le composant possède, si nécessaire, une propriété aria-valuetext="[valeur courante + text]".', function() {
47 | this.sandbox = setupSandbox(
48 | factory({
49 | ...this.props,
50 | id: 'withLabel',
51 | withLabel: true
52 | })
53 | );
54 |
55 | const slider = this.sandbox.querySelector('[role="slider"]');
56 | expect(slider.getAttribute('aria-valuetext')).to.be.ok;
57 | });
58 |
59 | it('Lorsque le composant est déplacé, la propriété aria-valuenow est mise à jour.', function() {
60 | return pending(this, 'À tester manuellement avec la souris.');
61 | });
62 |
63 | it('Lorsque le composant est déplacé, la propriété aria-valuetext est mise à jour.', function() {
64 | return pending(this, 'À tester manuellement avec la souris.');
65 | });
66 |
67 | it('Lorsque le composant est présenté verticalement, il doit posséder une propriété'
68 | + ' aria-orientation="vertical", cette règle est-elle respectée ?', function() {
69 | this.sandbox = setupSandbox(
70 | factory({
71 | ...this.props,
72 | id: 'vertical',
73 | isVertical: true
74 | })
75 | );
76 |
77 | const slider = this.sandbox.querySelector('[role="slider"]');
78 | expect(slider.getAttribute('aria-orientation')).to.equal('vertical');
79 | });
80 | });
81 |
82 | describeSome('Test 1.2: Le composant respecte-t-il une de ces conditions ?', function() {
83 | it('Le composant possède une propriété aria-labelledby="[ID_titre]"'
84 | + ' référençant un passage de texte faisant office de titre.', function() {
85 | expect(this.slider.getAttribute('aria-labelledby')).to.be.ok;
86 | });
87 |
88 | it('Le composant possède un attribut title faisant office de titre.', function() {
89 | expect(this.slider.getAttribute('title')).to.be.ok;
90 | });
91 | });
92 | });
93 |
94 | describe('Critère 2 : Les interactions au clavier sont-elles conformes ?', function() {
95 | describe('Test 2.1 : L\'utilisation de la touche [TAB] respecte-t-elle ces conditions ?', function() {
96 | beforeEach(function() {
97 | this.dummyInput = $('').appendTo('body').get(0);
98 | });
99 |
100 | it('De l\'extérieur du composant, le focus est donné sur le composant.', function() {
101 | effroi.keyboard.tab();
102 | expect(document.activeElement).to.equal(this.slider);
103 | });
104 |
105 | it('Depuis le composant, le focus est donné sur l\'élément focusable suivant à l\'extérieur du composant.', function() {
106 | effroi.keyboard.focus(this.slider);
107 | effroi.keyboard.tab();
108 | expect(document.activeElement).to.equal(this.dummyInput);
109 | });
110 |
111 | afterEach(function() {
112 | $('.slider-dummy').remove();
113 | });
114 | });
115 |
116 | describe('Test 2.2 : L\'utilisation des [TOUCHES DE DIRECTION] respecte-t-elle ces conditions ?', function() {
117 | beforeEach(function() {
118 | effroi.keyboard.focus(this.slider);
119 | this.initialValue = this.slider.getAttribute('aria-valuenow');
120 | });
121 |
122 | it('[Haut] permet d\'augmenter la valeur du slider.', function() {
123 | effroi.keyboard.hit('Up');
124 | expect(this.slider.getAttribute('aria-valuenow')).to.not.be.equal(this.initialValue);
125 | });
126 |
127 | it('[Droit] permet d\'augmenter la valeur du slider.', function() {
128 | effroi.keyboard.hit('Right');
129 | expect(this.slider.getAttribute('aria-valuenow')).to.not.be.equal(this.initialValue);
130 | });
131 |
132 | it('[Bas] permet de diminuer la valeur du slider.', function() {
133 | effroi.keyboard.hit('Down');
134 | expect(this.slider.getAttribute('aria-valuenow')).to.not.be.equal(this.initialValue);
135 | });
136 |
137 | it('[Gauche] permet de diminuer la valeur du slider.', function() {
138 | effroi.keyboard.hit('Left');
139 | expect(this.slider.getAttribute('aria-valuenow')).to.not.be.equal(this.initialValue);
140 | });
141 | });
142 | });
143 | };
144 | }
145 |
--------------------------------------------------------------------------------
/test/lib/radiobutton.js:
--------------------------------------------------------------------------------
1 | /**
2 | * create a radiobutton
3 | *
4 | * code taken from https://www.w3.org/TR/wai-aria-practices-1.1/examples/radio/radio.html
5 | *
6 | * @param {Object} label object: {id, text}
7 | * @param {Array} items list of items transformed in radio buttons: [{text, checked}]
8 | */
9 | export default function radioButton(label, items) {
10 | const container = document.createElement('div');
11 | container.setAttribute('role', 'radiogroup');
12 | container.setAttribute('aria-labelledby', label.id);
13 | const title = document.createElement('h1');
14 | title.id = label.id;
15 | title.innerHTML = label.text;
16 | container.appendChild(title);
17 | const nothingIsChecked = !(items.some(item => item.checked));
18 | items.forEach((item, index) => {
19 | const button = document.createElement('div');
20 | button.setAttribute('role', 'radio');
21 | button.setAttribute('aria-checked', item.checked ? 'true' : 'false');
22 | button.tabIndex = -1;
23 | if (item.checked) {
24 | button.tabIndex = 0;
25 | }
26 | if (nothingIsChecked && index === 0) {
27 | button.tabIndex = 0;
28 | }
29 | button.innerHTML = item.text;
30 | button.addEventListener('click', clickRadioGroup);
31 | button.addEventListener('keydown', keyDownRadioGroup);
32 | button.addEventListener('focus', focusRadioButton);
33 | button.addEventListener('blur', blurRadioButton);
34 | container.appendChild(button);
35 | });
36 | return container;
37 | }
38 |
39 | var KEYCODE = {
40 | DOWN: 40,
41 | LEFT: 37,
42 | RIGHT: 39,
43 | SPACE: 32,
44 | UP: 38
45 | }
46 |
47 | /*
48 | * @function firstRadioButton
49 | *
50 | * @desc Returns the first radio button
51 | *
52 | * @param {Object} event = Standard W3C event object
53 | */
54 |
55 | function firstRadioButton(node) {
56 |
57 | var first = node.parentNode.firstChild;
58 |
59 | while(first) {
60 | if (first.nodeType === Node.ELEMENT_NODE) {
61 | if (first.getAttribute("role") === 'radio') return first;
62 | }
63 | first = first.nextSibling;
64 | }
65 |
66 | return null;
67 | }
68 |
69 | /*
70 | * @function lastRadioButton
71 | *
72 | * @desc Returns the last radio button
73 | *
74 | * @param {Object} event = Standard W3C event object
75 | */
76 |
77 | function lastRadioButton(node) {
78 |
79 | var last = node.parentNode.lastChild;
80 |
81 | while(last) {
82 | if (last.nodeType === Node.ELEMENT_NODE) {
83 | if (last.getAttribute("role") === 'radio') return last;
84 | }
85 | last = last.previousSibling;
86 | }
87 |
88 | return last;
89 | }
90 |
91 | /*
92 | * @function nextRadioButton
93 | *
94 | * @desc Returns the next radio button
95 | *
96 | * @param {Object} event = Standard W3C event object
97 | */
98 |
99 | function nextRadioButton(node) {
100 |
101 | var next = node.nextSibling;
102 |
103 | while(next) {
104 | if (next.nodeType === Node.ELEMENT_NODE) {
105 | if (next.getAttribute("role") === 'radio') return next;
106 | }
107 | next = next.nextSibling;
108 | }
109 |
110 | return null;
111 | }
112 |
113 | /*
114 | * @function previousRadioButton
115 | *
116 | * @desc Returns the previous radio button
117 | *
118 | * @param {Object} event = Standard W3C event object
119 | */
120 |
121 | function previousRadioButton(node) {
122 |
123 | var prev = node.previousSibling;
124 |
125 | while(prev) {
126 | if (prev.nodeType === Node.ELEMENT_NODE) {
127 | if (prev.getAttribute("role") === 'radio') return prev;
128 | }
129 | prev = prev.previousSibling;
130 | }
131 |
132 | return null;
133 | }
134 |
135 | /*
136 | * @function getImage
137 | *
138 | * @desc Gets the image for radio box
139 | *
140 | * @param {Object} event = Standard W3C event object
141 | */
142 |
143 | function getImage(node) {
144 |
145 | var child = node.firstChild;
146 |
147 | while(child) {
148 | if (child.nodeType === Node.ELEMENT_NODE) {
149 | if (child.tagName === 'IMG') return child;
150 | }
151 | child = child.nextSibling;
152 | }
153 |
154 | return null;
155 | }
156 |
157 | /*
158 | * @function setRadioButton
159 | *
160 | * @desc Toogles the state of a radio button
161 | *
162 | * @param {Object} event - Standard W3C event object
163 | *
164 | */
165 |
166 | function setRadioButton(node, state) {
167 | var image = getImage(node);
168 |
169 | if (state == 'true') {
170 | node.setAttribute('aria-checked', 'true')
171 | node.tabIndex = 0;
172 | node.focus()
173 | }
174 | else {
175 | node.setAttribute('aria-checked', 'false')
176 | node.tabIndex = -1;
177 | }
178 | }
179 |
180 | /*
181 | * @function clickRadioGroup
182 | *
183 | * @desc
184 | *
185 | * @param {Object} node - DOM node of updated group radio buttons
186 | */
187 |
188 | function clickRadioGroup(event) {
189 | var type = event.type;
190 |
191 | if (type === 'click') {
192 | // If either enter or space is pressed, execute the funtion
193 |
194 | var node = event.currentTarget;
195 |
196 | var radioButton = firstRadioButton(node);
197 |
198 | while (radioButton) {
199 | setRadioButton(radioButton, "false");
200 | radioButton = nextRadioButton(radioButton);
201 | }
202 |
203 | setRadioButton(node, "true");
204 |
205 | event.preventDefault();
206 | event.stopPropagation();
207 | }
208 | }
209 |
210 | /*
211 | * @function keyDownRadioGroup
212 | *
213 | * @desc
214 | *
215 | * @param {Object} node - DOM node of updated group radio buttons
216 | */
217 |
218 | function keyDownRadioGroup(event) {
219 | var type = event.type;
220 | var next = false;
221 |
222 | if(type === "keydown"){
223 | var node = event.currentTarget;
224 |
225 | switch (event.keyCode) {
226 | case KEYCODE.DOWN:
227 | case KEYCODE.RIGHT:
228 | var next = nextRadioButton(node);
229 | if (!next) next = firstRadioButton(node); //if node is the last node, node cycles to first.
230 | break;
231 |
232 | case KEYCODE.UP:
233 | case KEYCODE.LEFT:
234 | next = previousRadioButton(node);
235 | if (!next) next = lastRadioButton(node); //if node is the last node, node cycles to first.
236 | break;
237 |
238 | case KEYCODE.SPACE:
239 | next = node;
240 | break;
241 | }
242 |
243 | if (next) {
244 | var radioButton = firstRadioButton(node);
245 |
246 | while (radioButton) {
247 | setRadioButton(radioButton, "false");
248 | radioButton = nextRadioButton(radioButton);
249 | }
250 |
251 | setRadioButton(next, "true");
252 |
253 | event.preventDefault();
254 | event.stopPropagation();
255 | }
256 | }
257 | }
258 |
259 | /*
260 | * @function focusRadioButton
261 | *
262 | * @desc Adds focus styling to label element encapsulating standard radio button
263 | *
264 | * @param {Object} event - Standard W3C event object
265 | */
266 |
267 | function focusRadioButton(event) {
268 | event.currentTarget.className += ' focus';
269 | }
270 |
271 | /*
272 | * @function blurRadioButton
273 | *
274 | * @desc Adds focus styling to the label element encapsulating standard radio button
275 | *
276 | * @param {Object} event - Standard W3C event object
277 | */
278 |
279 | function blurRadioButton(event) {
280 | event.currentTarget.className = event.currentTarget.className.replace(' focus','');
281 | }
282 |
--------------------------------------------------------------------------------
/src/tabPanel.js:
--------------------------------------------------------------------------------
1 | import {expect} from 'chai';
2 | import effroi from 'effroi';
3 | import describeSome from './describeSome';
4 | import setupSandbox from './setupSandbox';
5 |
6 |
7 |
8 | /**
9 | *
10 | */
11 | const isPanelActive = (panel) =>
12 | panel && $(panel).is(':visible');
13 |
14 | /**
15 | *
16 | */
17 | export default (factory) => () =>
18 | describe('Motif de conception ARIA Tabpanel', function() {
19 | beforeEach(function() {
20 | this.props = {
21 | panels: [
22 | {
23 | title: 'Header 1',
24 | content: 'Content 1',
25 | selected: false
26 | },
27 | {
28 | title: 'Header 2',
29 | content: `
30 | Content 2
31 |
32 |
33 | `,
34 | selected: true
35 | },
36 | {
37 | title: 'Header 3',
38 | content: 'Content 3',
39 | selected: false
40 | }
41 | ]
42 | };
43 |
44 | this.focusableBefore = document.createElement('button');
45 | this.focusableAfter = document.createElement('button');
46 |
47 | this.sandbox = setupSandbox(
48 | this.focusableBefore,
49 | factory(this.props),
50 | this.focusableAfter
51 | );
52 |
53 | this.tabList = this.sandbox.querySelector('[role="tablist"]');
54 | this.tabs = this.tabList.querySelectorAll('[role="tab"]');
55 | this.panels = this.sandbox.querySelectorAll('[role="tabpanel"]');
56 | this.selectedTab = this.tabs[1];
57 | this.selectedPanel = this.panels[1];
58 | this.button1 = document.getElementById('button1');
59 | this.button2 = document.getElementById('button2');
60 |
61 | effroi.keyboard.focus(this.focusableBefore);
62 | });
63 |
64 | describe('Critère 1 : L\'implémentation ARIA est-elle conforme ?', function() {
65 | describe('Test 1.1: Le composant englobant les titres des onglets possède-t-il un role="tablist" ?', function() {
66 | it('Cette condition est respectée.', function() {
67 | expect(this.tabs.length)
68 | .to.equal(this.props.panels.length);
69 | });
70 | });
71 |
72 | describe('Test 1.2 : Chaque titre d\'onglet respecte-t-il ces conditions ?', function() {
73 | it('Le titre possède un role="tab".', function() {
74 | this.props.panels.forEach((panel, i) => {
75 | expect(this.tabs[i].getAttribute('role'))
76 | .to.equal('tab');
77 | });
78 | });
79 |
80 | it('Le titre possède une propriété aria-selected="true" lorsque le panneau est affiché.', function() {
81 | this.props.panels.forEach((panel, i) => {
82 | if (panel.selected) {
83 | expect(this.tabs[i].getAttribute('aria-selected'))
84 | .to.equal('true');
85 | }
86 | });
87 | });
88 |
89 | it('Le titre possède une propriété aria-selected="false" lorsque le panneau est masqué.', function() {
90 | this.props.panels.forEach((panel, i) => {
91 | if (!panel.selected) {
92 | expect(this.tabs[i].getAttribute('aria-selected'))
93 | .to.equal('false');
94 | }
95 | });
96 | });
97 | });
98 |
99 | describeSome('Test 1.3 : Chaque couple titre/panneau, respecte-t-il une de ces conditions ?', function() {
100 | it('Le titre possède une propriété aria-controls="[id]" référençant le panneau correspondant.', function() {
101 | this.props.panels.forEach((panel, i) => {
102 | expect(this.tabs[i].getAttribute('aria-controls'))
103 | .to.equal(this.panels[i].id);
104 | });
105 | });
106 |
107 | it('Le panneau possède une propriété aria-labelledby="[id]" référençant le titre correspondant.', function() {
108 | this.props.panels.forEach((panel, i) => {
109 | expect(this.panels[i].getAttribute('aria-labelledby'))
110 | .to.equal(this.tabs[i].id);
111 | });
112 | });
113 | });
114 |
115 | describe('Test 1.4 : Chaque panneau possède-t-il un role="tabpanel" ?', function() {
116 | it('Cette condition est respectée.', function() {
117 | expect(this.panels.length)
118 | .to.equal(this.props.panels.length);
119 | });
120 | });
121 | });
122 |
123 | describe('Critère 2 : Les interactions au clavier sont-elles conformes ?', function() {
124 | describe('Test 2.1 : L\'utilisation de la touche [TAB] respecte-t-elle ces conditions ?', function() {
125 | it('De l\'extérieur du composant, le focus est donné sur le titre du panneau actif.', function() {
126 | effroi.keyboard.tab();
127 | expect(document.activeElement)
128 | .to.equal(this.selectedTab);
129 | });
130 |
131 | it('La tabulation permet d\'atteindre l\'élément suivant ou précédent du panneau actif.', function() {
132 | effroi.keyboard.focus(this.selectedTab);
133 |
134 | effroi.keyboard.tab();
135 | expect(document.activeElement)
136 | .to.equal(this.button1);
137 |
138 | effroi.keyboard.tab();
139 | expect(document.activeElement)
140 | .to.equal(this.button2);
141 |
142 | effroi.keyboard.shiftTab();
143 | expect(document.activeElement)
144 | .to.equal(this.button1);
145 | });
146 |
147 | it('Lorsque le dernier élément focusable du composant est atteint, le focus est donné sur l\'élément focusable suivant à l\'extérieur du composant.', function() {
148 | effroi.keyboard.focus(this.button2);
149 |
150 | effroi.keyboard.tab();
151 | expect(document.activeElement)
152 | .to.equal(this.focusableAfter);
153 | });
154 |
155 | it('Lorsque le premier élément focusable du composant est atteint, le focus est donné sur l\'élément focusable précédent à l\'extérieur du composant.', function() {
156 | effroi.keyboard.focus(this.selectedTab);
157 |
158 | effroi.keyboard.shiftTab();
159 | expect(document.activeElement)
160 | .to.equal(this.focusableBefore);
161 | });
162 | });
163 |
164 | describe('Test 2.2 : L\'utilisation des [TOUCHES DE DIRECTION] respecte-t-elle ces conditions ?', function() {
165 | it('À partir du titre d\'un onglet, [Haut et Gauche] permet d\'atteindre le titre précédent.', function() {
166 | effroi.keyboard.focus(this.selectedTab);
167 |
168 | effroi.keyboard.hit('Up');
169 | expect(document.activeElement)
170 | .to.equal(this.tabs[0]);
171 |
172 | effroi.keyboard.hit('Left');
173 | expect(document.activeElement)
174 | .to.equal(this.tabs[2]);
175 | });
176 |
177 | it('À partir du titre d\'un onglet, [Bas et Droite] permet d\'atteindre le titre suivant.', function() {
178 | effroi.keyboard.focus(this.selectedTab);
179 |
180 | effroi.keyboard.hit('Down');
181 | expect(document.activeElement)
182 | .to.equal(this.tabs[2]);
183 |
184 | effroi.keyboard.hit('Right');
185 | expect(document.activeElement)
186 | .to.equal(this.tabs[0]);
187 | });
188 | });
189 |
190 | describe('Test 2.3 : À partir du titre d’un onglet, si le panneau n’est pas activé par défaut, la touche [ESPACE] permet-elle d’activer le panneau ?', function() {
191 | it('Cette condition est respectée.', function() {
192 | effroi.keyboard.focus(this.selectedTab);
193 | effroi.keyboard.hit('Down');
194 | effroi.keyboard.hit('Spacebar');
195 |
196 | expect(this.tabs[2])
197 | .to.satisfy(isPanelActive);
198 | });
199 | });
200 |
201 | describe('Test 2.4 : À partir du titre d’un onglet, si le panneau n’est pas activé par défaut, la touche [ENTER] permet-elle d’activer le panneau ?', function() {
202 | it('Cette condition est respectée.', function() {
203 | effroi.keyboard.focus(this.selectedTab);
204 | effroi.keyboard.hit('Down');
205 | effroi.keyboard.hit('Enter');
206 |
207 | expect(this.tabs[2])
208 | .to.satisfy(isPanelActive);
209 | });
210 | });
211 | });
212 | });
213 |
--------------------------------------------------------------------------------
/src/radioButton.js:
--------------------------------------------------------------------------------
1 | import {expect} from 'chai';
2 | import effroi from 'effroi';
3 | import pending from './pending';
4 | import setupSandbox from './setupSandbox';
5 |
6 |
7 |
8 | /**
9 | *
10 | */
11 | export default function createRadioButtonTest(factory) {
12 | return function testRadioButton() {
13 | beforeEach(function() {
14 | this.props = {
15 | id: 'un-groupe-avec-un-bouton-activé',
16 | label: 'Je suis le titre du groupe',
17 | items: [
18 | {text: 'Je suis le 1er élément'},
19 | {text: 'Je suis le 2ème élément et je suis coché par défaut', checked: true},
20 | {text: 'Je suis le 3ème élément'},
21 | {text: 'Je suis le 4ème élément'}
22 | ]
23 | };
24 |
25 | // A dummy button that serves as the focus starting point.
26 | const focusableBefore = document.createElement('button');
27 |
28 | this.sandbox = setupSandbox(
29 | focusableBefore,
30 | factory(this.props)
31 | );
32 |
33 | this.container = this.sandbox.querySelector('[role="radiogroup"]');
34 | this.buttons = this.sandbox.querySelectorAll('[role="radio"]');
35 | this.images = this.sandbox.querySelectorAll('img');
36 | this.presentationImages = this.sandbox.querySelectorAll('img[role="presentation"]');
37 | this.checkedButtons = this.sandbox.querySelectorAll('[aria-checked="true"]');
38 |
39 | effroi.keyboard.focus(focusableBefore);
40 | });
41 |
42 | describe('Critère 1 : L\'implémentation ARIA est-elle conforme ?', function() {
43 | describe('Test 1.1: Chaque composant principal respecte-t-il ces conditions ?', function() {
44 | it('Le composant possède un role="radiogroup".', function() {
45 | expect(this.container).to.exist;
46 | });
47 |
48 | it('Au maximum, un bouton radio du composant est sélectionné.', function() {
49 | expect(this.checkedButtons.length).to.be.at.most(1);
50 | });
51 | });
52 |
53 | describe('Test 1.2 : Chaque bouton radio respecte-t-il ces conditions ?', function() {
54 | it('L\'élément possède un role="radio".', function() {
55 | expect(this.buttons.length).to.equal(this.props.items.length);
56 | });
57 |
58 | it('Lorsque l\'élément n\'est pas sélectionné, il possède une propriété aria-checked="false".'
59 | + '\n\t Lorsque l\'élément est sélectionné, il possède une propriété aria-checked="true".', function() {
60 | this.props.items.forEach((item, i) => {
61 | const button = this.buttons.item(i);
62 |
63 | expect(button.getAttribute('aria-checked'))
64 | .to.equal(item.checked ? 'true' : 'false');
65 | });
66 | });
67 | });
68 |
69 | describe('Test 1.3 : Chaque état d\'un bouton radio, symbolisé par une image, respecte-t-il une de ces conditions ?', function() {
70 | it('L\'image possède un role="presentation".', function() {
71 | if (!this.images.length) {
72 | return pending(this, 'Aucune image trouvée.');
73 | }
74 | expect(this.presentationImages.length).to.equal(props.items.length);
75 | });
76 |
77 | it('L\'image est une image insérée via CSS.', function() {
78 | return pending(this, 'Non testable automatiquement.');
79 | });
80 | });
81 | });
82 |
83 | describe('Critère 2 : Les interactions au clavier sont-elles conformes ?', function() {
84 | beforeEach(function() {
85 | const cleanProps = {
86 | id: 'un-groupe-sans-rien-activé',
87 | label: 'Je suis le titre du groupe sans bouton activé',
88 | items: [
89 | {text: '1er bouton'},
90 | {text: '2ème bouton'},
91 | {text: '3ème bouton'},
92 | {text: '4ème bouton'}
93 | ]
94 | };
95 |
96 | this.dummyInput = document.createElement('input');
97 | this.cleanNode = factory(cleanProps);
98 | this.cleanButtons = this.cleanNode.querySelectorAll('[role="radio"]');
99 | this.sandbox.appendChild(this.dummyInput);
100 | this.sandbox.appendChild(this.cleanNode);
101 | });
102 |
103 | describe('Test 2.1 : L\'utilisation de la touche [TAB] respecte-t-elle ces conditions ?', function() {
104 | it('De l\'extérieur du composant, le focus est donné sur l\'élément actif.', function() {
105 | effroi.keyboard.tab();
106 | expect(document.activeElement).to.equal(this.checkedButtons.item(0));
107 | });
108 |
109 | it('Depuis un élément, le focus est donné sur l\'élément focusable suivant à l\'extérieur du composant.', function() {
110 | effroi.keyboard.tab();
111 | expect(document.activeElement).to.equal(this.checkedButtons.item(0));
112 | effroi.keyboard.tab();
113 | expect(document.activeElement).to.equal(this.dummyInput);
114 | });
115 |
116 | it('De l\'extérieur du composant, si aucun élément n\'est sélectionné, le focus est donné sur le premier élément du composant.', function() {
117 | effroi.keyboard.tab();
118 | expect(document.activeElement).to.equal(this.checkedButtons.item(0));
119 | effroi.keyboard.tab();
120 | expect(document.activeElement).to.equal(this.dummyInput);
121 | effroi.keyboard.tab();
122 | expect(document.activeElement).to.equal(this.cleanButtons.item(0));
123 | });
124 | });
125 |
126 | describe('Test 2.2 : L\'utilisation des [TOUCHES DE DIRECTION] respecte-t-elle ces conditions ?', function() {
127 | // because of the previous test, the current focus is the first button of the second radiogroup
128 | it('À partir d\'un élément, [Bas] déplace le focus sur l\'élément suivant.', function() {
129 | effroi.keyboard.tab();
130 | expect(document.activeElement).to.equal(this.checkedButtons.item(0));
131 | //this.checkedButtons.item(0) === this.buttons.item(1)
132 | effroi.keyboard.hit('Down');
133 | expect(document.activeElement).to.equal(this.buttons.item(2));
134 | });
135 |
136 | it('À partir d\'un élément, [Droit] déplace le focus sur l\'élément suivant.', function() {
137 | effroi.keyboard.tab();
138 | expect(document.activeElement).to.equal(this.checkedButtons.item(0));
139 | //this.checkedButtons.item(0) === this.buttons.item(1)
140 | effroi.keyboard.hit('Right');
141 | expect(document.activeElement).to.equal(this.buttons.item(2));
142 | });
143 |
144 | it('À partir d\'un élément, [Haut] déplace le focus sur l\'élément précédent.', function() {
145 | effroi.keyboard.tab();
146 | expect(document.activeElement).to.equal(this.checkedButtons.item(0));
147 | //this.checkedButtons.item(0) === this.buttons.item(1)
148 | effroi.keyboard.hit('Up');
149 | expect(document.activeElement).to.equal(this.buttons.item(0));
150 | });
151 |
152 | it('À partir d\'un élément, [Gauche] déplace le focus sur l\'élément précédent.', function() {
153 | effroi.keyboard.tab();
154 | expect(document.activeElement).to.equal(this.checkedButtons.item(0));
155 | //this.checkedButtons.item(0) === this.buttons.item(1)
156 | effroi.keyboard.hit('Left');
157 | expect(document.activeElement).to.equal(this.buttons.item(0));
158 | });
159 |
160 | it('À partir du premier élément, [Haut et Gauche] déplace le focus sur le dernier élément.', function() {
161 | effroi.keyboard.tab();
162 | effroi.keyboard.tab();
163 | effroi.keyboard.tab();
164 | expect(document.activeElement).to.equal(this.cleanButtons.item(0));
165 |
166 | const lastIndex = this.cleanButtons.length - 1;
167 | effroi.keyboard.hit('Up');
168 | expect(document.activeElement).to.equal(this.cleanButtons.item(lastIndex));
169 |
170 | effroi.keyboard.hit('Up');
171 | effroi.keyboard.hit('Up');
172 | effroi.keyboard.hit('Up');
173 |
174 | effroi.keyboard.hit('Left');
175 | expect(document.activeElement).to.equal(this.cleanButtons.item(lastIndex));
176 | });
177 |
178 | it('À partir du dernier élément, [Bas et Droit] déplace le focus sur le premier élément.', function() {
179 | effroi.keyboard.tab();
180 | effroi.keyboard.tab();
181 | effroi.keyboard.tab();
182 | expect(document.activeElement).to.equal(this.cleanButtons.item(0));
183 |
184 | effroi.keyboard.hit('Down');
185 | effroi.keyboard.hit('Down');
186 | effroi.keyboard.hit('Down');
187 |
188 | effroi.keyboard.hit('Down');
189 | expect(document.activeElement).to.equal(this.cleanButtons.item(0));
190 |
191 | effroi.keyboard.hit('Down');
192 | effroi.keyboard.hit('Down');
193 | effroi.keyboard.hit('Down');
194 |
195 | effroi.keyboard.hit('Right');
196 | expect(document.activeElement).to.equal(this.cleanButtons.item(0));
197 | });
198 | });
199 | });
200 | };
201 | }
202 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Suite de tests pour composants RGAA 3
2 |
3 | Une suite de tests [mocha](https://github.com/mochajs/mocha) pour tester la conformité de composants JavaScript avec les *design patterns* ARIA *Accordion*, *Dialog*, *ProgressBar*, *RadioButton*, *Checkbox*, *Slider*, *TabPanel* et *Tooltip*.
4 |
5 | Cet outil est particulièrement utile si vous voulez :
6 | - créer ou maintenir un composant JavaScript suivant un *design pattern*, en vous assurant tout au long du développement qu'il est accessible ;
7 | - utiliser une bibliothèque JavaScript existante et vérifier qu'elle est accessible ;
8 | - utiliser un seul outil pour tester des composants implémentés avec différents *frameworks*.
9 |
10 | Note : le référentiel se base sur [les *design patterns* ARIA](https://www.w3.org/TR/wai-aria-practices) et ajoute des règles sur certains composants.
11 | Vous trouverez la grille de tests ayant servi de référence pour l'implémentation de la librairie dans le dossier `./resources` : [2016-11-23-Test_DP_ARIA_grille_de_saisie-V2.1.ods](./resources/2016-11-23-Test_DP_ARIA_grille_de_saisie-V2.1.ods).
12 |
13 | ## Avertissement
14 |
15 | Cette suite de tests permet d'automatiser la plupart des tests nécessaires à s'assurer de l'accessibilité d'un composant. Cependant, certains tests ne peuvent pas être réalisés automatiquement, et sont donc à vérifier manuellement pour s'assurer d'une conformité totale. Ceci est indiqué dans les résultats de tests (plus de détails dans la section *Usage*).
16 |
17 | ## Installation
18 |
19 | Ces tests sont écrits en JavaScript avec la bibliothèque de test [mocha](https://github.com/mochajs/mocha).
20 | Installez la suite de tests en tant que dépendance de votre projet lors de vos développements via [npm](https://www.npmjs.com/get-npm) :
21 |
22 | ```sh
23 | npm install --save-dev rgaa-test-suite
24 | ```
25 |
26 | Les tests nécessitent un DOM pour fonctionner. C'est pourquoi un lanceur de tests comme [karma](https://github.com/karma-runner/karma) ou un DOM virtuel comme [jsdom](https://github.com/tmpvar/jsdom) est requis.
27 |
28 | Pour démarrer, vous pouvez vous inspirer du dossier [./template](./template), qui contient une structure de projet pour lancer des tests avec mocha et karma.
29 | Copiez ce dossier où vous le souhaitez, puis lancez `npm install` à la racine.
30 |
31 | ## Usage
32 |
33 | Les composants devant être initialisés d'une certaine manière pour chaque test, un peu de code est nécessaire pour les mettre en place.
34 |
35 | Typiquement, chaque test nécessite d'écrire une *factory* : une petite fonction pour créer le composant concerné en fonction des paramètres requis par le test. C'est la *factory* qui fait le lien nécessaire entre la bibliothèque de tests et le composant.
36 | Ce fonctionnement permet à la suite de tests de rester générique, et de fonctionner avec des composants écrits en JavaScript pur, jQuery, Angular, ou React par exemple.
37 |
38 | [Comme dit plus haut](#avertissement), certains tests ne peuvent pas être éxécutés automatiquement. Quand vous lancez les tests, ils sont quand même affichés dans les résultats avec le statut *skipped* et un message d'avertissement.
39 |
40 | ### Exemple
41 |
42 | Voici un exemple d'implémentation du test d'une *ProgressBar* :
43 |
44 | ```js
45 | var testSuite = require('rgaa-test-suite');
46 |
47 | /**
48 | * Une factory prenant en paramètre les options nécessaires
49 | * pour le test (ici min, max, et value).
50 | * Cette fonction doit retourner un élément de DOM contenant
51 | * le composant à tester, ici une ProgressBar.
52 | */
53 | function progressBarFactory(options) {
54 | var node = document.createElement('div');
55 | node.setAttribute('role', 'progressbar');
56 | node.setAttribute('aria-valuemin', options.min);
57 | node.setAttribute('aria-valuemax', options.max);
58 | node.setAttribute('aria-value', options.value);
59 |
60 | return node;
61 | }
62 |
63 | /**
64 | * Mise en place du test mocha.
65 | */
66 | describe('Ma super barre de progression', testSuite.progressBar(progressBarFactory));
67 | ```
68 |
69 | Note : si vous avez utilisé le dossier [./template](./template), vous pouvez tester cet exemple en créant un fichier `test/progressBar.js`, et en y copiant le code ci-dessus.
70 |
71 | Au lancement de mocha, `progressBar()` exécutera tous les tests du motif de conception :
72 |
73 | ```sh
74 | Ma super barre de progression
75 | Motif de conception ARIA Progressbar
76 | Critère 1 : L'implémentation ARIA est-elle conforme ?
77 | Test 1.1 : Le composant respecte-t-il ces conditions ?
78 | ✔ Le composant possède un role="progressbar"
79 | ✔ Le composant possède une propriété aria-valuemin="[valeur minimale]"
80 | ✔ Le composant possède une propriété aria-valuemax="[valeur maximale]"
81 | Test 1.2 : Le composant respecte-t-il une de ces conditions ?
82 | ...
83 | ```
84 |
85 | Vous trouverez également des exemples d'implémentation des différents tests dans le dossier [./test](./test).
86 |
87 | ### Options des *factories*
88 |
89 | Chaque test requiert des options particulières pour initialiser les composants.
90 | Vous trouverez ci-dessous la liste de ces options :
91 |
92 | * [Accordion](#accordion)
93 | * [Simple Checkbox](#simple-checkbox)
94 | * [Tristate Checkbox](#tristate-checkbox)
95 | * [Dialog](#dialog)
96 | * [ProgressBar](#progressbar)
97 | * [RadioButton](#radiobutton)
98 | * [Slider](#slider)
99 | * [TabPanel](#tabpanel)
100 | * [Tooltip](#tooltip)
101 |
102 | #### Accordion
103 |
104 | Options :
105 |
106 | ```js
107 | {
108 | // liste des onglets
109 | panels: [
110 | {
111 | title: 'Titre', // {string} titre de l'onglet
112 | content: 'Contenu', // {string} contenu de l'onglet (peut contenir du HTML)
113 | selected: true // {bool} si l'onglet est actif ou non
114 | }
115 | ]
116 | }
117 | ```
118 |
119 | [Exemple](./test/accordion.js)
120 |
121 |
122 | #### Simple Checkbox
123 | Options :
124 |
125 | ```js
126 | {
127 | checked: true // {bool} si la checkbox est cochée
128 | }
129 | ```
130 |
131 | [Exemple](./test/checkbox.js)
132 |
133 | #### Tristate Checkbox
134 | Options :
135 |
136 | ```js
137 | {
138 | state: 'mixed', // {string} si la checkbox est partiellement cochée
139 | items: [
140 | {
141 | label: 'Lettuce', // {string} le label de la checkbox
142 | checked: true // {bool} si la checkbox est cochée
143 | },
144 | {
145 | label: 'Tomato',
146 | checked: false
147 | },
148 | {
149 | label: 'Mustard',
150 | checked: false
151 | },
152 | {
153 | label: 'Sprouts',
154 | checked: false
155 | }
156 | ],
157 | title: 'Sandwich Condiments' // {string} Titre du groupement de checkbox
158 | }
159 | ```
160 |
161 | [Exemple](./test/tristateCheckbox.js)
162 |
163 | #### Dialog
164 |
165 | Options :
166 |
167 | ```js
168 | {
169 | title: 'Titre', // {string} titre de la modale
170 | content: 'Contenu' // {string} contenu de la modale
171 | }
172 | ```
173 |
174 | Pour que le test fonctionne, la factory devra renvoyer une fonction pour ouvrir la modale, et une pour la fermer.
175 | Ceci est dû à la manière dont sont couramment implémentées les modales, qui sont souvent ajoutées à la fin de `` plutôt qu'à côté de l'élement déclencheur.
176 |
177 | [Exemple](./test/dialog.js)
178 |
179 | #### ProgressBar
180 |
181 | Options :
182 |
183 | ```js
184 | {
185 | min: 0, // {int} valeur minimale autorisée
186 | max: 100, // {int} valeur minimale autorisée
187 | value: 50 // {int} valeur courante
188 | }
189 | ```
190 |
191 | [Exemple](./test/progressBar.js)
192 |
193 | #### RadioButton
194 |
195 | Options :
196 |
197 | ```js
198 | {
199 | // liste de boutons
200 | items: [
201 | {
202 | text: 'Premier bouton', // {string} texte du bouton
203 | checked: false // {bool} si le bouton radio est coché
204 | }
205 | // ...
206 | ]
207 | }
208 | ```
209 |
210 | [Exemple](./test/radioButton.js)
211 |
212 | #### Slider
213 |
214 | Options :
215 |
216 | ```js
217 | {
218 | min: 0, // {int} valeur minimale autorisée
219 | max: 100, // {int} valeur maximale autorisée
220 | current: 50, // {int} valeur courante
221 | isVertical: false, // {bool} si le slider est vertical
222 | withLabel: false // {bool} si le slider est titré (aria-valuetext)
223 | }
224 | ```
225 |
226 | [Exemple](./test/slider.js)
227 |
228 | #### TabPanel
229 |
230 | Options :
231 |
232 | ```js
233 | {
234 | // liste des onglets
235 | panels: [
236 | {
237 | title: 'Titre', // {string} titre de l'onglet
238 | content: 'Contenu', // {string} contenu de l'onglet (peut contenir du HTML)
239 | selected: true // {bool} si l'onglet est actif ou non
240 | }
241 | // ...
242 | ]
243 | }
244 | ```
245 |
246 | [Exemple](./test/tabPanel.js)
247 |
248 | #### Tooltip
249 |
250 | Options :
251 |
252 | ```js
253 | {
254 | text: 'Texte' // {string} texte du tooltip
255 | }
256 | ```
257 |
258 | Pour que le test fonctionne, la factory devra renvoyer un élément focusable, sur lequel le tooltip sera mis en place.
259 |
260 | [Exemple](./test/tooltip.js)
261 |
--------------------------------------------------------------------------------
/src/tristateCheckbox.js:
--------------------------------------------------------------------------------
1 | import {expect} from 'chai';
2 | import effroi from 'effroi';
3 | import pending from './pending';
4 | import setupSandbox from './setupSandbox';
5 |
6 |
7 |
8 | /**
9 | *
10 | */
11 | const defaultMakeLabel = ({value}) => `${value}%`;
12 |
13 |
14 | /**
15 | *
16 | */
17 | const getChildrenCheckboxes = (node) => node.querySelectorAll('input[type=checkbox], [role=checkbox]');
18 |
19 |
20 | /**
21 | * Returns a function that tests a tristate checkbox component.
22 | *
23 | * @param function factory A factory function that takes
24 | * a map of options and returns a DOM node containing a
25 | * tristate checkbox.
26 | */
27 | export default function createTristateCheckboxTest(factory, makeLabel = defaultMakeLabel) {
28 | return function testTristateCheckbox() {
29 | describe('Critère 1 : L\'implémentation ARIA est-elle conforme ?', function() {
30 | describe('Test 1.1 : Le composant respecte-t-il ces conditions ?', function() {
31 | it('Le composant possède un role="checkbox".', function() {
32 | const props = {
33 | state: false,
34 | items: [
35 | {label: 'Lettuce', checked: false},
36 | {label: 'Tomato', checked: false},
37 | {label: 'Mustard', checked: false},
38 | {label: 'Sprouts', checked: false}
39 | ],
40 | title: 'Sandwich Condiments'
41 | };
42 |
43 | const sandbox = setupSandbox(factory(props));
44 | const checkboxes = getChildrenCheckboxes(sandbox);
45 | const mainCheckbox = checkboxes[0];
46 |
47 | expect(mainCheckbox).to.be.ok;
48 | });
49 |
50 | it('Le composant possède la propriété aria-checked="true" lorsqu\'il est sélectionné.', function() {
51 | const props = {
52 | state: true,
53 | items: [
54 | {label: 'Lettuce', checked: true},
55 | {label: 'Tomato', checked: true},
56 | {label: 'Mustard', checked: true},
57 | {label: 'Sprouts', checked: true}
58 | ],
59 | title: 'Sandwich Condiments'
60 | };
61 |
62 | const sandbox = setupSandbox(factory(props));
63 | const checkboxes = getChildrenCheckboxes(sandbox);
64 | const mainCheckbox = checkboxes[0];
65 |
66 | expect(mainCheckbox.getAttribute('aria-checked')).to.equal('true');
67 | });
68 |
69 | it('Le composant possède la propriété aria-checked="false" lorsqu\'il n\'est pas sélectionné.', function() {
70 | const props = {
71 | state: false,
72 | items: [
73 | {label: 'Lettuce', checked: false},
74 | {label: 'Tomato', checked: false},
75 | {label: 'Mustard', checked: false},
76 | {label: 'Sprouts', checked: false}
77 | ],
78 | title: 'Sandwich Condiments'
79 | }
80 |
81 | const sandbox = setupSandbox(factory(props));
82 | const checkboxes = getChildrenCheckboxes(sandbox);
83 | const mainCheckbox = checkboxes[0];
84 |
85 | expect(mainCheckbox.getAttribute('aria-checked')).to.equal('false');
86 | });
87 |
88 | it('Le composant possède la propriété aria-checked="mixed" lorsqu\'il est partiellement sélectionné.', function() {
89 | const props = {
90 | state: 'mixed',
91 | items: [
92 | {label: 'Lettuce', checked: true},
93 | {label: 'Tomato', checked: false},
94 | {label: 'Mustard', checked: false},
95 | {label: 'Sprouts', checked: false}
96 | ],
97 | title: 'Sandwich Condiments'
98 | };
99 |
100 | const sandbox = setupSandbox(factory(props));
101 | const checkboxes = getChildrenCheckboxes(sandbox);
102 | const mainCheckbox = checkboxes[0];
103 |
104 | expect(mainCheckbox.getAttribute('aria-checked')).to.equal('mixed');
105 | });
106 |
107 | it('Le composant possède l\'attribut tabindex="0", si nécessaire.', function() {
108 | const props = {
109 | state: false,
110 | items: [
111 | {label: 'Lettuce', checked: false},
112 | {label: 'Tomato', checked: false},
113 | {label: 'Mustard', checked: false},
114 | {label: 'Sprouts', checked: false}
115 | ],
116 | title: 'Sandwich Condiments'
117 | };
118 |
119 | const sandbox = setupSandbox(factory(props));
120 | const checkboxes = getChildrenCheckboxes(sandbox);
121 | const mainCheckbox = checkboxes[0];
122 |
123 | expect(mainCheckbox.getAttribute('tabindex')).to.equal('0');
124 | });
125 | });
126 |
127 | describe('Test 1.2 : Chaque état de composant symbolisé par une image respecte-t-il une de ces conditions ?', function() {
128 | before(function() {
129 | this.props = {
130 | state: false,
131 | items: [
132 | {label: 'Lettuce', checked: false},
133 | {label: 'Tomato', checked: false},
134 | {label: 'Mustard', checked: false},
135 | {label: 'Sprouts', checked: false}
136 | ],
137 | title: 'Sandwich Condiments'
138 | };
139 |
140 | const sandbox = setupSandbox(factory(this.props));
141 | this.images = sandbox.querySelectorAll('img');
142 | this.presentationImages = sandbox.querySelectorAll('img[role="presentation"]');
143 | });
144 |
145 | it('L\'image possède le role="presentation".', function() {
146 | if (!this.images.length) {
147 | return pending(this, 'Aucune image trouvée.');
148 | }
149 | expect(this.presentationImages.length).to.equal(1);
150 | });
151 |
152 | it('L\'image est une image insérée via CSS.', function() {
153 | return pending(this, 'Non testable automatiquement.');
154 | });
155 | });
156 |
157 |
158 | describe('Test 1.3 : Chaque groupement de cases à cocher respecte-t-il ces conditions ?', function() {
159 | beforeEach(function() {
160 | this.props = {
161 | state: false,
162 | items: [
163 | {label: 'Lettuce', checked: false},
164 | {label: 'Tomato', checked: false},
165 | {label: 'Mustard', checked: false},
166 | {label: 'Sprouts', checked: false}
167 | ],
168 | title: 'Sandwich Condiments'
169 | };
170 |
171 | const sandbox = setupSandbox(factory(this.props));
172 | this.structuringNode = sandbox.querySelectorAll('[role=group]')[0];
173 | });
174 |
175 | it('L\'élément structurant le groupe possède un role="group".', function() {
176 | expect(this.structuringNode.getAttribute('role')).to.equal('group');
177 | });
178 |
179 | it('L\'élément structurant est précédé d\'un titre.',
180 | function() {
181 | expect(this.structuringNode.previousSibling.nodeName)
182 | .to.be.oneOf(['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P']);
183 | }
184 | );
185 |
186 | it('L\'élément structurant possède une propriété aria-labelledby="[ID_titre]" référençant le titre.',
187 | function() {
188 | expect(this.structuringNode.getAttribute('aria-labelledby')).to.exist;
189 | }
190 | );
191 | });
192 |
193 | describe('Test 1.4 : Chaque case à cocher qui supporte un triple état et qui représente l\'état d\'un groupe de cases à cocher, respecte-t-elle ces conditions ?', function() {
194 | it('L\'élément possède une propriété aria-checked="false" lorsqu\'aucune case à cocher du groupe n\'est cochée.',
195 | function() {
196 | const props = {
197 | state: 'mixed',
198 | items: [
199 | {label: 'Lettuce', checked: true},
200 | {label: 'Tomato', checked: false},
201 | {label: 'Mustard', checked: false},
202 | {label: 'Sprouts', checked: false}
203 | ],
204 | title: 'Sandwich Condiments'
205 | };
206 |
207 | const sandbox = setupSandbox(factory(props));
208 | const checkboxes = getChildrenCheckboxes(sandbox);
209 | const mainCheckbox = checkboxes[0];
210 | const firstNestedCheckbox = checkboxes[1];
211 |
212 | effroi.mouse.click(firstNestedCheckbox);
213 | expect(mainCheckbox.getAttribute('aria-checked')).to.equal('false');
214 | }
215 | );
216 |
217 | it('L\'élément possède une propriété aria-checked="mixed", lorsqu\'au moins une case à cocher du groupe est cochée.',
218 | function() {
219 | const props = {
220 | state: false,
221 | items: [
222 | {label: 'Lettuce', checked: false},
223 | {label: 'Tomato', checked: false},
224 | {label: 'Mustard', checked: false},
225 | {label: 'Sprouts', checked: false}
226 | ],
227 | title: 'Sandwich Condiments'
228 | };
229 |
230 | const sandbox = setupSandbox(factory(props));
231 | const checkboxes = getChildrenCheckboxes(sandbox);
232 | const mainCheckbox = checkboxes[0];
233 | const firstNestedCheckbox = checkboxes[1];
234 |
235 | effroi.mouse.click(firstNestedCheckbox);
236 | expect(mainCheckbox.getAttribute('aria-checked')).to.equal('mixed');
237 | }
238 | );
239 |
240 | it('L\'élément possède une propriété aria-checked="true", lorsque toutes les cases à cocher du groupe sont cochées.',
241 | function() {
242 | const props = {
243 | state: 'mixed',
244 | items: [
245 | {label: 'Lettuce', checked: false},
246 | {label: 'Tomato', checked: true},
247 | {label: 'Mustard', checked: true},
248 | {label: 'Sprouts', checked: true}
249 | ],
250 | title: 'Sandwich Condiments'
251 | };
252 |
253 | const sandbox = setupSandbox(factory(props));
254 | const checkboxes = getChildrenCheckboxes(sandbox);
255 | const mainCheckbox = checkboxes[0];
256 | const firstNestedCheckbox = checkboxes[1];
257 |
258 | effroi.mouse.click(firstNestedCheckbox);
259 | expect(mainCheckbox.getAttribute('aria-checked')).to.equal('true');
260 | }
261 | );
262 | });
263 | });
264 |
265 | describe('Critère 2 : Les interactions au clavier sont-elles conformes ?', function() {
266 | describe('Test 2.1 : Pour chaque composant, l\'utilisation de la touche [Espace] respecte-t-elle ces conditions ?', function() {
267 | it('[Espace] permet de cocher le composant s\'il n\'est pas coché.',
268 | function() {
269 | const props = {
270 | state: false,
271 | items: [
272 | {label: 'Lettuce', checked: false},
273 | {label: 'Tomato', checked: false},
274 | {label: 'Mustard', checked: false},
275 | {label: 'Sprouts', checked: false}
276 | ],
277 | title: 'Sandwich Condiments'
278 | };
279 |
280 | const sandbox = setupSandbox(factory(props));
281 | const checkboxes = getChildrenCheckboxes(sandbox);
282 | const mainCheckbox = checkboxes[0];
283 |
284 | // Simulates keyboard space event
285 | effroi.keyboard.focus(mainCheckbox);
286 | effroi.keyboard.hit('Spacebar');
287 |
288 | expect(mainCheckbox.getAttribute('aria-checked')).to.equal('true');
289 | }
290 | );
291 |
292 | it('[Espace] permet de décocher le composant s\'il est coché.',
293 | function() {
294 | const props = {
295 | state: true,
296 | items: [
297 | {label: 'Lettuce', checked: true},
298 | {label: 'Tomato', checked: true},
299 | {label: 'Mustard', checked: true},
300 | {label: 'Sprouts', checked: true}
301 | ],
302 | title: 'Sandwich Condiments'
303 | };
304 |
305 | const sandbox = setupSandbox(factory(props));
306 | const checkboxes = getChildrenCheckboxes(sandbox);
307 | const mainCheckbox = checkboxes[0];
308 |
309 | // Simulates keyboard space event
310 | effroi.keyboard.focus(mainCheckbox);
311 | effroi.keyboard.hit('Spacebar');
312 |
313 | expect(mainCheckbox.getAttribute('aria-checked')).to.equal('false');
314 | }
315 | );
316 | });
317 |
318 | describe('Test 2.2 : Pour chaque composant qui supporte un triple état, l\'utilisation de la touche [Espace] respecte-t-elle cette condition ?', function() {
319 | it('Si le composant est partiellement coché, [Espace] permet de cocher le composant.',
320 | function() {
321 | const props = {
322 | state: 'mixed',
323 | items: [
324 | {label: 'Lettuce', checked: false},
325 | {label: 'Tomato', checked: true},
326 | {label: 'Mustard', checked: true},
327 | {label: 'Sprouts', checked: true}
328 | ],
329 | title: 'Sandwich Condiments'
330 | };
331 |
332 | const sandbox = setupSandbox(factory(props));
333 | const checkboxes = getChildrenCheckboxes(sandbox);
334 | const mainCheckbox = checkboxes[0];
335 |
336 | // Simulates keyboard space event
337 | effroi.keyboard.focus(mainCheckbox);
338 | effroi.keyboard.hit('Spacebar');
339 |
340 | expect(mainCheckbox.getAttribute('aria-checked')).to.equal('true');
341 | }
342 | );
343 | });
344 | });
345 | };
346 | }
347 |
--------------------------------------------------------------------------------
/src/accordion.js:
--------------------------------------------------------------------------------
1 | import {expect} from 'chai';
2 | import effroi from 'effroi';
3 | import describeSome from './describeSome';
4 | import setupSandbox from './setupSandbox';
5 |
6 |
7 |
8 | /**
9 | *
10 | */
11 | const defaultMakeLabel = ({value}) => `${value}%`;
12 |
13 |
14 |
15 | /**
16 | * Returns a function that tests an accordion component.
17 | *
18 | * @param function factory A factory function that takes
19 | * a map of options and returns a DOM node containing an
20 | * accordion.
21 | */
22 | export default function createAccordionTest(factory, makeLabel = defaultMakeLabel) {
23 | return function testAccordion() {
24 | describe('Critère 1 : L\'implémentation ARIA est-elle conforme ?', function() {
25 | describeSome('Test 1.1 : Le composant respecte-t-il ces conditions ?', function() {
26 | before(function() {
27 | this.props = {
28 | panels: [
29 | {
30 | title: 'Header 1',
31 | content: 'Content 1',
32 | selected: false
33 | },
34 | {
35 | title: 'Header 2',
36 | content: 'Content 2',
37 | selected: false
38 | },
39 | {
40 | title: 'Header 3',
41 | content: 'Content 3',
42 | selected: false
43 | }
44 | ]
45 | };
46 |
47 | this.sandbox = setupSandbox(factory(this.props));
48 | this.accordion = this.sandbox.querySelector('[role="tablist"]');
49 | });
50 |
51 | it('Le composant possède un role="tablist".', function() {
52 | expect(this.accordion).to.be.ok;
53 | });
54 |
55 | it('Le composant possède la propriété aria-multiselectable="true".', function() {
56 | expect(this.accordion.getAttribute('aria-multiselectable')).to.equal('true');
57 | });
58 | });
59 |
60 | describe('Test 1.2 : Chaque titre respecte-t-il ces conditions ?', function() {
61 | before(function() {
62 | this.props = {
63 | panels: [
64 | {
65 | title: 'Header 1',
66 | content: 'Content 1',
67 | selected: true
68 | },
69 | {
70 | title: 'Header 2',
71 | content: 'Content 2',
72 | selected: false
73 | },
74 | {
75 | title: 'Header 3',
76 | content: 'Content 3',
77 | selected: false
78 | }
79 | ]
80 | };
81 |
82 | this.sandbox = setupSandbox(factory(this.props));
83 | this.accordion = this.sandbox.querySelector('[role="tablist"]');
84 | this.titles = this.sandbox.querySelectorAll('[role="tab"]');
85 | });
86 |
87 | it('Le titre possède un role="tab".', function() {
88 | expect(this.titles.length).to.equal(this.props.panels.length);
89 | });
90 |
91 | it('Le titre possède la propriété aria-selected="true" lorsque le panneau est affiché.'
92 | + '\n\t Le titre possède la propriété aria-selected="false" lorsque le panneau est masqué.',
93 | function() {
94 | this.props.panels.forEach((panel, i) => {
95 | const title = this.titles[i];
96 | expect(title.getAttribute('aria-selected'))
97 | .to.equal(panel.selected ? 'true' : 'false');
98 | });
99 | }
100 | );
101 |
102 | it('Le titre possède la propriété aria-expanded="true" lorsque le panneau est affiché.'
103 | + '\n\t Le titre possède la propriété aria-expanded="false" lorsque le panneau est masqué.',
104 | function() {
105 | this.props.panels.forEach((panel, i) => {
106 | const title = this.titles[i];
107 | expect(title.getAttribute('aria-expanded'))
108 | .to.equal(panel.selected ? 'true' : 'false');
109 | });
110 | }
111 | );
112 | });
113 |
114 | describe('Test 1.3 : Chaque panneau respecte-t-il ces conditions ?', function() {
115 | before(function() {
116 | this.props = {
117 | panels: [
118 | {
119 | title: 'Header 1',
120 | content: 'Content 1',
121 | selected: true
122 | },
123 | {
124 | title: 'Header 2',
125 | content: 'Content 2',
126 | selected: false
127 | },
128 | {
129 | title: 'Header 3',
130 | content: 'Content 3',
131 | selected: false
132 | }
133 | ]
134 | };
135 |
136 | this.sandbox = setupSandbox(factory(this.props));
137 | this.accordion = this.sandbox.querySelector('[role="tablist"]');
138 | this.titles = this.sandbox.querySelectorAll('[role="tab"]');
139 | this.tabPanels = this.accordion.querySelectorAll('[role="tabpanel"]');
140 | });
141 |
142 | it('Le panneau possède un role="tabpanel".', function() {
143 | expect(this.tabPanels.length).to.equal(this.props.panels.length);
144 | });
145 |
146 | it('Le panneau possède la propriété aria-labelledby="[ID_header]".', function() {
147 | this.props.panels.forEach((panel, i) => {
148 | const tabPanel = this.tabPanels[i];
149 | const title = this.titles[i];
150 | expect(tabPanel.getAttribute('aria-labelledby')).to.equal(title.id);
151 | });
152 | });
153 |
154 | it('Le panneau possède la propriété aria-hidden="false" lorsque le panneau est affiché.'
155 | + '\n\t Le panneau possède la propriété aria-hidden="true" lorsque le panneau est masqué.',
156 | function() {
157 | this.props.panels.forEach((panel, i) => {
158 | const tabPanel = this.tabPanels[i];
159 | expect(tabPanel.getAttribute('aria-hidden'))
160 | .to.equal(panel.selected ? 'false' : 'true');
161 | });
162 | }
163 | );
164 | });
165 | });
166 |
167 | describe('Critère 2 : Les interactions au clavier sont-elles conformes ?', function() {
168 | describe('Test 2.1 : L\'utilisation de la touche [TAB] respecte-t-elle ces conditions ?', function() {
169 | it('De l\'extérieur du composant, lorsque aucun panneau n\'est actif, le focus est donné sur le titre'
170 | + ' du premier panneau [TAB].', function() {
171 | const props = {
172 | panels: [
173 | {
174 | title: 'Header 1',
175 | content: 'Content 1',
176 | selected: false
177 | },
178 | {
179 | title: 'Header 2',
180 | content: 'Content 2',
181 | selected: false
182 | },
183 | {
184 | title: 'Header 3',
185 | content: 'Content 3',
186 | selected: false
187 | }
188 | ]
189 | };
190 |
191 | const sandbox = setupSandbox(factory(props));
192 | const input = document.createElement('input');
193 | input.setAttribute('type', 'text');
194 | sandbox.insertBefore(input, sandbox.firstChild);
195 | const titles = sandbox.querySelectorAll('[role="tab"]');
196 |
197 | effroi.keyboard.focus(input);
198 | effroi.keyboard.tab();
199 |
200 | expect(document.activeElement).to.equal(titles[0]);
201 | });
202 |
203 | it('De l\'extérieur du composant, lorsque aucun panneau n\'est actif, le focus est donné sur le titre'
204 | + ' du dernier panneau [SHIFT TAB].', function() {
205 | const props = {
206 | panels: [
207 | {
208 | title: 'Header 1',
209 | content: 'Content 1',
210 | selected: false
211 | },
212 | {
213 | title: 'Header 2',
214 | content: 'Content 2',
215 | selected: false
216 | },
217 | {
218 | title: 'Header 3',
219 | content: 'Content 3',
220 | selected: false
221 | }
222 | ]
223 | };
224 |
225 | const sandbox = setupSandbox(factory(props));
226 | const titles = sandbox.querySelectorAll('[role="tab"]');
227 | const input = document.createElement('input');
228 | input.setAttribute('type', 'text');
229 |
230 | sandbox.appendChild(input);
231 |
232 | effroi.keyboard.focus(input);
233 | effroi.keyboard.shiftTab();
234 | expect(document.activeElement).to.equal(titles[2]);
235 | });
236 |
237 | it('De l\'extérieur du composant, lorsqu\'un panneau est actif, le focus est donné sur le titre du premier panneau actif.',
238 | function() {
239 | const props = {
240 | panels: [
241 | {
242 | title: 'Header 1',
243 | content: 'Content 1',
244 | selected: false
245 | },
246 | {
247 | title: 'Header 2',
248 | content: 'Content 2',
249 | selected: true
250 | },
251 | {
252 | title: 'Header 3',
253 | content: 'Content 3',
254 | selected: false
255 | }
256 | ]
257 | };
258 |
259 | const sandbox = setupSandbox(factory(props));
260 | const titles = sandbox.querySelectorAll('[role="tab"]');
261 |
262 | effroi.keyboard.tab();
263 | expect(document.activeElement).to.equal(titles[1]);
264 | }
265 | );
266 |
267 | it('La tabulation permet d\'atteindre l\'élément suivant ou précédent du panneau actif ou des panneaux actifs lorsque plusieurs panneaux sont activés.',
268 | function() {
269 | const props = {
270 | panels: [
271 | {
272 | title: 'Header 1',
273 | content: 'Content 1',
274 | selected: true
275 | },
276 | {
277 | title: 'Header 2',
278 | content: 'Content 2',
279 | selected: true
280 | },
281 | {
282 | title: 'Header 3',
283 | content: 'Content 3',
284 | selected: false
285 | }
286 | ]
287 | };
288 |
289 | const sandbox = setupSandbox(factory(props));
290 | const accordion = sandbox.querySelector('[role="tablist"]');
291 | const titles = sandbox.querySelectorAll('[role="tab"]');
292 | const tabPanels = accordion.querySelectorAll('[role="tabpanel"]');
293 |
294 | const input = document.createElement('input');
295 | input.setAttribute('type', 'text');
296 |
297 | tabPanels[0].appendChild(input.cloneNode(true));
298 | tabPanels[1].appendChild(input.cloneNode(true));
299 |
300 | const firstTabPanelChildren = tabPanels[0].querySelectorAll('input[type="text"]');
301 | const secondTabPanelChildren = tabPanels[1].querySelectorAll('input[type=text]');
302 |
303 | effroi.keyboard.focus(titles[0]);
304 | effroi.keyboard.tab();
305 | expect(document.activeElement).to.equal(firstTabPanelChildren[0]);
306 |
307 | effroi.keyboard.tab();
308 | expect(document.activeElement).to.equal(secondTabPanelChildren[0]);
309 | }
310 | );
311 |
312 | it('Lorsque le dernier élément focusable du composant est atteint, le focus est donné sur l\'élément focusable suivant à l\'extérieur du composant.',
313 | function() {
314 | const props = {
315 | panels: [
316 | {
317 | title: 'Header 1',
318 | content: 'Content 1',
319 | selected: false
320 | },
321 | {
322 | title: 'Header 2',
323 | content: 'Content 2',
324 | selected: false
325 | },
326 | {
327 | title: 'Header 3',
328 | content: 'Content 3',
329 | selected: true
330 | }
331 | ]
332 | };
333 |
334 | const sandbox = setupSandbox(factory(props));
335 | const input = document.createElement('input');
336 | input.setAttribute('type', 'text');
337 | sandbox.appendChild(input);
338 | const accordion = sandbox.querySelector('[role="tablist"]');
339 |
340 | const tabPanels = accordion.querySelectorAll('[role="tabpanel"]');
341 | tabPanels[2].appendChild(input.cloneNode(true));
342 | const tabPanelChildren = tabPanels[2].querySelectorAll('input[type="text"]');
343 |
344 | effroi.keyboard.focus(tabPanelChildren[0]);
345 | effroi.keyboard.tab();
346 |
347 | expect(document.activeElement).to.equal(input);
348 |
349 | }
350 | );
351 |
352 | it('Lorsque le premier élément focusable du composant est atteint, le focus est donné sur l\'élément focusable précédent à l\'extérieur du composant [SHIFT TAB].',
353 | function() {
354 | const props = {
355 | panels: [
356 | {
357 | title: 'Header 1',
358 | content: 'Content 1',
359 | selected: true
360 | },
361 | {
362 | title: 'Header 2',
363 | content: 'Content 2',
364 | selected: false
365 | },
366 | {
367 | title: 'Header 3',
368 | content: 'Content 3',
369 | selected: false
370 | }
371 | ]
372 | };
373 |
374 | const sandbox = setupSandbox(factory(props));
375 | const input = document.createElement('input');
376 | input.setAttribute('type', 'text');
377 | sandbox.insertBefore(input, sandbox.firstChild);
378 | const titles = sandbox.querySelectorAll('[role="tab"]');
379 | effroi.keyboard.focus(titles[0]);
380 | effroi.keyboard.shiftTab();
381 |
382 | expect(document.activeElement).to.equal(input);
383 | }
384 | );
385 | });
386 |
387 | describe('Test 2.2 : L\'utilisation des [TOUCHES DE DIRECTION] respecte-t-elle ces conditions ?', function() {
388 | before(function() {
389 | this.props = {
390 | panels: [
391 | {
392 | title: 'Header 1',
393 | content: 'Content 1',
394 | selected: false
395 | },
396 | {
397 | title: 'Header 2',
398 | content: 'Content 2',
399 | selected: true
400 | },
401 | {
402 | title: 'Header 3',
403 | content: 'Content 3',
404 | selected: false
405 | }
406 | ]
407 | };
408 |
409 | this.sandbox = setupSandbox(factory(this.props));
410 | this.accordion = this.sandbox.querySelector('[role="tablist"]');
411 | this.titles = this.sandbox.querySelectorAll('[role="tab"]');
412 | });
413 |
414 | it('À partir du titre d\'un accordéon, [Haut et Gauche] permet d\'atteindre le titre précédent.', function() {
415 |
416 | // Focus on second panel
417 | this.titles[1].focus();
418 | effroi.keyboard.hit('Up');
419 |
420 | expect(document.activeElement).to.equal(this.titles[0]);
421 |
422 | effroi.keyboard.hit('Left');
423 |
424 | expect(document.activeElement).to.equal(this.titles[2]);
425 | });
426 |
427 | it('À partir du titre d\'un accordéon, [Bas et Droite] permet d\'atteindre le titre suivant.', function() {
428 |
429 | // Focus on second panel
430 | this.titles[1].focus();
431 | effroi.keyboard.hit('Down');
432 |
433 | expect(document.activeElement).to.equal(this.titles[2]);
434 |
435 | effroi.keyboard.hit('Right');
436 |
437 | expect(document.activeElement).to.equal(this.titles[0]);
438 | });
439 | });
440 |
441 | describe('Test 2.3 : L\'utilisation des touches [Entrée et Espace] respecte-t-elle ces conditions ?', function() {
442 | beforeEach(function() {
443 | this.props = {
444 | panels: [
445 | {
446 | title: 'Header 1',
447 | content: 'Content 1',
448 | selected: true
449 | },
450 | {
451 | title: 'Header 2',
452 | content: 'Content 2',
453 | selected: false
454 | },
455 | {
456 | title: 'Header 3',
457 | content: 'Content 3',
458 | selected: false
459 | }
460 | ]
461 | };
462 |
463 | this.sandbox = setupSandbox(factory(this.props));
464 | this.accordion = this.sandbox.querySelector('[role="tablist"]');
465 | this.titles = this.sandbox.querySelectorAll('[role="tab"]');
466 | this.tabPanels = this.accordion.querySelectorAll('[role="tabpanel"]');
467 | });
468 |
469 | it('Lorsque le focus est sur le titre d\'un panneau fermé, [Espace] permet d\'ouvrir le panneau. (aria-expanded = true et aria-hidden = false)', function() {
470 | // Focus on first panel
471 | this.titles[1].focus();
472 | effroi.keyboard.hit('Spacebar');
473 |
474 | expect(this.tabPanels[1].getAttribute('aria-expanded'))
475 | .to.equal('true');
476 | expect(this.tabPanels[1].getAttribute('aria-hidden'))
477 | .to.equal('false');
478 | });
479 |
480 | it('Lorsque le focus est sur le titre d\'un panneau fermé, [Entrée] permet d\'ouvrir le panneau. (aria-expanded = true et aria-hidden = false)', function() {
481 | // Focus on first panel
482 | this.titles[1].focus();
483 | effroi.keyboard.enter();
484 |
485 | expect(this.tabPanels[1].getAttribute('aria-expanded'))
486 | .to.equal('true');
487 | expect(this.tabPanels[1].getAttribute('aria-hidden'))
488 | .to.equal('false');
489 | });
490 | });
491 | });
492 | };
493 | }
494 |
--------------------------------------------------------------------------------