Add cypress-axe for accessibility testing (#180)

Add cypress-axe cypress-axe as our main CI accesibility testing tool. Adding instructions on how to run the tests will be tackled on T302321 tput: No value for $TERM and no -T specified warning showing in CI is a known bug and still an open issue in cypress. cypress-io/cypress#15679 Bug: T307910 Co-authored-by: Lucas Werkmeister <[email protected]>
wmde · May 12, 2022 · f2a9df4 · f2a9df4
1 parent 6dcfe8b
commit f2a9df4
Show file tree

Hide file tree

Showing 5 changed files with 183 additions and 93 deletions.
diff --git a/cypress/integration/NewLexemeForm.spec.js b/cypress/integration/NewLexemeForm.spec.js
@@ -1,8 +1,41 @@
+import 'cypress-axe';
+
+function terminalLog( violations ) {
+ cy.task(
+ 'log',
+ `${violations.length} accessibility violation${
+ violations.length === 1 ? '' : 's'
+ } ${violations.length === 1 ? 'was' : 'were'} detected`,
+ );
+ // pluck specific keys to keep the table readable
+ const violationData = violations.map(
+ ( { id, impact, description, nodes } ) => ( {
+ id,
+ impact,
+ description,
+ nodes: nodes.length,
+ } ),
+ );
+
+ cy.task( 'table', violationData );
+}
+
+function checkA11y( context = null ) {
+ cy.checkA11y( context, null, terminalLog );
+}
+
 describe( 'NewLexemeForm', () => {
 
- it( 'submits form data with inferred language code', () => {
+ beforeEach( () => {
  cy.visit( '/' );
+ cy.injectAxe();
+ } );
+
+ afterEach( () => {
+ checkA11y();
+ } );
 
+ it( 'submits form data with inferred language code', () => {
  cy.on( 'window:alert', cy.stub().as( 'alert' ) );
 
  cy.intercept( { query: { action: 'wbgetclaims' } }, {
@@ -25,11 +58,14 @@ describe( 'NewLexemeForm', () => {
  },
  } ).as( 'LanguageCodeRetrieval' );
 
+ checkA11y();
+
  cy.get( 'input[name=lemma]' )
  .type( 'test lemma' );
 
  cy.get( '.wbl-snl-language-lookup input' )
  .type( '=Q123', { delay: 0 } );
+ checkA11y( '.wbl-snl-language-lookup' );
  cy.get( '.wbl-snl-language-lookup .wikit-OptionsMenu__item' ).click();
 
  cy.wait( '@LanguageCodeRetrieval' );
@@ -52,8 +88,6 @@ describe( 'NewLexemeForm', () => {
  } );
 
  it( 'submits form data with explicitly set spelling variant', () => {
- cy.visit( '/' );
-
  cy.on( 'window:alert', cy.stub().as( 'alert' ) );
 
  cy.intercept( { query: { action: 'wbgetclaims' } }, {

diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
@@ -7,7 +7,21 @@
  * @type {Cypress.PluginConfig}
  */
 
-module.exports = ( _on, _config ) => {
+module.exports = ( on, _config ) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
+ on( 'task', {
+ log( message ) {
+ // eslint-disable-next-line no-console
+ console.log( message );
+
+ return null;
+ },
+ table( message ) {
+ // eslint-disable-next-line no-console
+ console.table( message );
+
+ return null;
+ },
+ } );
 };
diff --git a/index.html b/index.html
@@ -6,106 +6,109 @@
  <title>New Lexeme</title>
  </head>
  <body>
- <div id="wbl-snl-intro-text-wrapper"></div>
- <div id="app"></div>
- <script type="module">
- import createAndMount from './src/main.ts';
- import DevMessagesRepository from './src/plugins/MessagesPlugin/DevMessagesRepository';
- import DevItemSearcher from './src/data-access/DevItemSearcher';
- import DevLexemeCreator from './src/data-access/DevLexemeCreator';
- import DevLangCodeRetriever from './src/data-access/DevLangCodeRetriever';
+ <main>
+ <h1>New Lexeme</h1>
+ <div id="wbl-snl-intro-text-wrapper"></div>
+ <div id="app"></div>
+ <script type="module">
+ import createAndMount from './src/main.ts';
+ import DevMessagesRepository from './src/plugins/MessagesPlugin/DevMessagesRepository';
+ import DevItemSearcher from './src/data-access/DevItemSearcher';
+ import DevLexemeCreator from './src/data-access/DevLexemeCreator';
+ import DevLangCodeRetriever from './src/data-access/DevLangCodeRetriever';
 
- const config = {
- rootSelector: '#app',
- licenseUrl: 'https://creativecommons.org/publicdomain/zero/1.0/',
- licenseName: 'Creative Commons CC0',
- wikibaseLexemeTermLanguages: new Map([
- [ 'en', 'English' ],
- [ 'en-ca', 'Canadian English' ],
- [ 'en-gb', 'British English' ],
- [ 'enm', 'Middle English' ],
- [ 'es', 'Spanish' ],
- [ 'de', 'German' ],
- [ 'aeb', 'Tunisian Arabic' ],
- [ 'af', 'Afrikaans' ],
- [ 'eo', 'Esperanto' ],
- [ 'ha-arab', 'Hausa in Arab script' ]
- ]),
- lexicalCategorySuggestions: [
- {
- id: 'Q1084',
- display: {
- label: {
- language: 'en',
- value: 'noun',
- },
- description: {
- language: 'en',
- value: 'part of speech in grammar denoting a figurative or real thing or person',
+ const config = {
+ rootSelector: '#app',
+ licenseUrl: 'https://creativecommons.org/publicdomain/zero/1.0/',
+ licenseName: 'Creative Commons CC0',
+ wikibaseLexemeTermLanguages: new Map([
+ [ 'en', 'English' ],
+ [ 'en-ca', 'Canadian English' ],
+ [ 'en-gb', 'British English' ],
+ [ 'enm', 'Middle English' ],
+ [ 'es', 'Spanish' ],
+ [ 'de', 'German' ],
+ [ 'aeb', 'Tunisian Arabic' ],
+ [ 'af', 'Afrikaans' ],
+ [ 'eo', 'Esperanto' ],
+ [ 'ha-arab', 'Hausa in Arab script' ]
+ ]),
+ lexicalCategorySuggestions: [
+ {
+ id: 'Q1084',
+ display: {
+ label: {
+ language: 'en',
+ value: 'noun',
+ },
+ description: {
+ language: 'en',
+ value: 'part of speech in grammar denoting a figurative or real thing or person',
+ },
  },
  },
- },
- {
- id: 'Q34698',
- display: {
- label: {
- language: 'en',
- value: 'adjective',
- },
- description: {
- language: 'en',
- value: 'part of speech that describes a noun or pronoun',
+  {
+  id: 'Q34698',
+  display: {
+  label: {
+  language: 'en',
+  value: 'adjective',
+ },
+  description: {
+  language: 'en',
+  value: 'part of speech that describes a noun or pronoun',
+ },
  },
  },
- },
- {
- id: 'Q24905',
- display: {
- label: {
- language: 'en',
- value: 'verb',
- },
- description: {
- language: 'en',
- value: 'Lexical Category',
+  {
+  id: 'Q24905',
+  display: {
+  label: {
+  language: 'en',
+  value: 'verb',
+ },
+  description: {
+  language: 'en',
+  value: 'Lexical Category',
+ },
  },
  },
- },
- {
- id: 'Q380057',
- display: {
- label: {
- language: 'en',
- value: 'adverb',
- },
- description: {
- language: 'en',
- value: 'word that modifies a verb, adjective, or another adverb',
+  {
+  id: 'Q380057',
+  display: {
+  label: {
+  language: 'en',
+  value: 'adverb',
+ },
+  description: {
+  language: 'en',
+  value: 'word that modifies a verb, adjective, or another adverb',
+ },
  },
  },
+ ],
+ };
+ const services = {
+ itemSearcher: new DevItemSearcher(),
+ langCodeRetriever: new DevLangCodeRetriever(),
+ messagesRepository: new DevMessagesRepository(),
+ lexemeCreator: new DevLexemeCreator(),
+ searchLinker: {
+ getSearchUrlForLexeme( searchTerm ) {
+ const search = encodeURIComponent( searchTerm );
+ return `https://www.wikidata.org/w/index.php?search=${search}&ns146=1`;
+ },
  },
- ],
- };
- const services = {
- itemSearcher: new DevItemSearcher(),
- langCodeRetriever: new DevLangCodeRetriever(),
- messagesRepository: new DevMessagesRepository(),
- lexemeCreator: new DevLexemeCreator(),
- searchLinker: {
- getSearchUrlForLexeme( searchTerm ) {
- const search = encodeURIComponent( searchTerm );
- return `https://www.wikidata.org/w/index.php?search=${search}&ns146=1`;
- },
- },
- tracker: {
- increment( name ) {
- console.log( `TRACK: increment ${name}` );
+ tracker: {
+ increment( name ) {
+ console.log( `TRACK: increment ${name}` );
+ },
  },
- },
- wikiRouter: { goToTitle( title ) { alert( `Navigating to: ${title}` ); } },
- };
+ wikiRouter: { goToTitle( title ) { alert( `Navigating to: ${title}` ); } },
+ };
 
- createAndMount( config, services );
- </script>
+ createAndMount( config, services );
+ </script>
+ </main>
  </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -61,7 +61,9 @@
  "@vue/test-utils": "^2.0.0-rc.17",
  "@vue/vue3-jest": "^27.0.0-alpha.4",
  "@wmde/eslint-config-wikimedia-typescript": "^0.2.3",
+ "axe-core": "^4.4.1",
  "cypress": "^9.4.1",
+ "cypress-axe": "^0.14.0",
  "eslint": "^8.8.0",
  "eslint-config-wikimedia": "^0.22.1",
  "eslint-plugin-cypress": "^2.12.1",