Suite de tests pour composants RGAA 3
Une suite de tests mocha pour tester la conformité de composants JavaScript avec les design patterns ARIA Accordion, Dialog, ProgressBar, RadioButton, Checkbox, Slider, TabPanel et Tooltip.
Cet outil est particulièrement utile si vous voulez :
- créer ou maintenir un composant JavaScript suivant un design pattern, en vous assurant tout au long du développement qu'il est accessible ;
- utiliser une bibliothèque JavaScript existante et vérifier qu'elle est accessible ;
- utiliser un seul outil pour tester des composants implémentés avec différents frameworks.
Note : le référentiel se base sur les design patterns ARIA et ajoute des règles sur certains composants.
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.
Avertissement
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).
Installation
Ces tests sont écrits en JavaScript avec la bibliothèque de test mocha.
Installez la suite de tests en tant que dépendance de votre projet lors de vos développements via npm :
npm install --save-dev rgaa-test-suite
Les tests nécessitent un DOM pour fonctionner. C'est pourquoi un lanceur de tests comme karma ou un DOM virtuel comme jsdom est requis.
Pour démarrer, vous pouvez vous inspirer du dossier ./template, qui contient une structure de projet pour lancer des tests avec mocha et karma.
Copiez ce dossier où vous le souhaitez, puis lancez npm install
à la racine.
Usage
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.
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.
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.
Comme dit plus haut, 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.
Exemple
Voici un exemple d'implémentation du test d'une ProgressBar :
var testSuite = ; /** * Une factory prenant en paramètre les options nécessaires * pour le test (ici min, max, et value). * Cette fonction doit retourner un élément de DOM contenant * le composant à tester, ici une ProgressBar. */ { var node = document; node; node; node; node; return node;} /** * Mise en place du test mocha. */;
Note : si vous avez utilisé le dossier ./template, vous pouvez tester cet exemple en créant un fichier test/progressBar.js
, et en y copiant le code ci-dessus.
Au lancement de mocha, progressBar()
exécutera tous les tests du motif de conception :
Ma super barre de progression Motif de conception ARIA Progressbar Critère 1 : L'implémentation ARIA est-elle conforme ? Test 1.1 : Le composant respecte-t-il ces conditions ? ✔ Le composant possède un role="progressbar" ✔ Le composant possède une propriété aria-valuemin="[valeur minimale]" ✔ Le composant possède une propriété aria-valuemax="[valeur maximale]" Test 1.2 : Le composant respecte-t-il une de ces conditions ? ...
Vous trouverez également des exemples d'implémentation des différents tests dans le dossier ./test.
Options des factories
Chaque test requiert des options particulières pour initialiser les composants. Vous trouverez ci-dessous la liste de ces options :
Accordion
Options :
// liste des onglets panels: title: 'Titre' // {string} titre de l'onglet content: 'Contenu' // {string} contenu de l'onglet (peut contenir du HTML) selected: true // {bool} si l'onglet est actif ou non
Simple Checkbox
Options :
checked: true // {bool} si la checkbox est cochée
Tristate Checkbox
Options :
state: 'mixed' // {string} si la checkbox est partiellement cochée items: label: 'Lettuce' // {string} le label de la checkbox checked: true // {bool} si la checkbox est cochée label: 'Tomato' checked: false label: 'Mustard' checked: false label: 'Sprouts' checked: false title: 'Sandwich Condiments' // {string} Titre du groupement de checkbox
Dialog
Options :
title: 'Titre' // {string} titre de la modale content: 'Contenu' // {string} contenu de la modale
Pour que le test fonctionne, la factory devra renvoyer une fonction pour ouvrir la modale, et une pour la fermer.
Ceci est dû à la manière dont sont couramment implémentées les modales, qui sont souvent ajoutées à la fin de <body />
plutôt qu'à côté de l'élement déclencheur.
ProgressBar
Options :
min: 0 // {int} valeur minimale autorisée max: 100 // {int} valeur minimale autorisée value: 50 // {int} valeur courante
RadioButton
Options :
// liste de boutons items: text: 'Premier bouton' // {string} texte du bouton checked: false // {bool} si le bouton radio est coché // ...
Slider
Options :
min: 0 // {int} valeur minimale autorisée max: 100 // {int} valeur maximale autorisée current: 50 // {int} valeur courante isVertical: false // {bool} si le slider est vertical withLabel: false // {bool} si le slider est titré (aria-valuetext)
TabPanel
Options :
// liste des onglets panels: title: 'Titre' // {string} titre de l'onglet content: 'Contenu' // {string} contenu de l'onglet (peut contenir du HTML) selected: true // {bool} si l'onglet est actif ou non // ...
Tooltip
Options :
text: 'Texte' // {string} texte du tooltip
Pour que le test fonctionne, la factory devra renvoyer un élément focusable, sur lequel le tooltip sera mis en place.