feat: add accessibility tab and arrows, #166

e2e-test-quest · Jul 31, 2023 · 9b926cd · 9b926cd · vercel · Jul 31, 2023
1 parent 9fdfaf9
commit 9b926cd
Show file tree

Hide file tree

Showing 20 changed files with 698 additions and 480 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "cypress-real-events": "1.9.1",
     "tslib": "2.5.0"
   },
   "devDependencies": {

diff --git a/packages/assistant/src/assets/en.json b/packages/assistant/src/assets/en.json
@@ -29,6 +29,16 @@
     "description": "Writes the sentence passed as a parameter (useful for example to fill in a form field)",
     "wording": "I type the sentence {string}"
   },
+  {
+    "key": "key.when.keyboard.press",
+    "description": "Press specified key: <table><thead><tr><th>Key</th><th>Description</th></tr></thead><tbody><tr><td>{tab}</td><td>Tabulation</td></tr><tr><td>{reverseTab}</td><td>Reverse tabulation</td></tr><tr><td>{down}</td><td>Arrow Down</td></tr><tr><td>{right}</td><td>Arrow Right</td></tr><tr><td>{left}</td><td>Arrow Left</td></tr><tr><td>{up}</td><td>Arrow Up</td></tr></tbody></table>",
+    "wording": "I press {string}"
+  },
+  {
+    "key": "key.when.keyboard.multiplePress",
+    "description": "Press specified key multiple times using | as: num|{key}",
+    "wording": "I press {int} times on {string}"
+  },
   {
     "key": "key.when.visit",
     "description": "Navigate to the Uri passed as a argument (full url consisting of the BASE_URL + Uri) or navigate to Url if begin with http:// or https://",
@@ -174,21 +184,11 @@
     "description": "Check that the current page have no accessibility issue [with an option](https://github.com/dequelabs/axe-core/blob/HEAD/doc/API.md#options-parameter) on the specific [context](https://github.com/dequelabs/axe-core/blob/HEAD/doc/API.md#context-parameter)",
     "wording": "I should not have any accessibility issue with context json fixture {} and option json fixture {}"
   },
-  {
-    "key": "key.then.a11y.check.withAllowFailureAndFixtureContextAndFixtureOption",
-    "description": "Check if the current page have accessibility issue or not, [with an option](https://github.com/dequelabs/axe-core/blob/HEAD/doc/API.md#options-parameter) on the specific [context](https://github.com/dequelabs/axe-core/blob/HEAD/doc/API.md#context-parameter)",
-    "wording": "I could have accessibility issue with context json fixture {} and option json fixture {}"
-  },
   {
     "key": "key.then.a11y.check.withFixtureOption",
     "description": "Check that the current page have no accessibility issue [with an option](https://github.com/dequelabs/axe-core/blob/HEAD/doc/API.md#options-parameter)",
     "wording": "I should not have any accessibility issue with option json fixture {}"
   },
-  {
-    "key": "key.then.a11y.check.withAllowFailure",
-    "description": "Check if the current page have accessibility issue or not",
-    "wording": "I could have accessibility issue"
-  },
   {
     "key": "key.then.a11y.check.onlyCritical",
     "description": "Check that the current page have not critical accessibility issue",

diff --git a/packages/runner-commons/src/assets/i18n/en.json b/packages/runner-commons/src/assets/i18n/en.json
diff --git a/packages/runner-commons/src/assets/i18n/fr.json b/packages/runner-commons/src/assets/i18n/fr.json
@@ -29,6 +29,16 @@
     "description": "Saisit de la phrase passée en paramètre (utile par exemple de remplir un champ de formulaire)",
     "wording": "je saisie le(s) mot(s) {string}"
   },
+  {
+    "key": "key.when.keyboard.press",
+    "description": "Simule un appui sur la touche spécifiée : <table><thead><tr><th>Touche</th><th>Description</th></tr></thead><tbody><tr><td>{tab}</td><td>Tabulation</td></tr><tr><td>{reverseTab}</td><td>Tabulation arrière</td></tr><tr><td>{down}</td><td>Flèche du bas</td></tr><tr><td>{right}</td><td>Flèche de droite</td></tr><tr><td>{left}</td><td>Flèche de gauche</td></tr><tr><td>{up}</td><td>Flèche du haut</td></tr></tbody></table>",
+    "wording": "j'appuie sur {string}"
+  },
+  {
+    "key": "key.when.keyboard.multiplePress",
+    "description": "Répète la touche le nombre de fois spécifié en utilisant | comme ceci : num|{key}",
+    "wording": "j'appuie {int} fois sur {string}"
+  },
   {
     "key": "key.when.visit",
     "description": "Navigue vers l'Uri passé en paramètre (url complète étant constituée de la BASE_URL + Uri) ou navigue vers l'Url si ça commence par http:// ou https://",
@@ -175,9 +185,9 @@
     "wording": "je ne dois pas avoir de problèmes d'accessibilité avec le fichier json suivant d'option {}"
   },
   {
-    "key": "key.then.a11y.check.withAllowFailureAndFixtureContextAndFixtureOption",
-    "description": "Vérifie sur la page courante qu'il n'y a aucune erreur d'accessibilité sans que ce soit bloquant [avec l'option](https://github.com/dequelabs/axe-core/blob/HEAD/doc/API.md#options-parameter) sur le [contexte donné](https://github.com/dequelabs/axe-core/blob/HEAD/doc/API.md#context-parameter)",
-    "wording": "je peux avoir des problèmes d'accessibilité sur le fichier json suivant de contexte {} et avec le fichier json suivant d'option {}"
+    "key": "key.then.a11y.check.withFixtureContextAndFixtureOption",
+    "description": "Vérifie sur la page courante qu'il n'y a aucune erreur d'accessibilité [avec l'option](https://github.com/dequelabs/axe-core/blob/HEAD/doc/API.md#options-parameter) sur le [contexte donné](https://github.com/dequelabs/axe-core/blob/HEAD/doc/API.md#context-parameter)",
+    "wording": "je ne dois pas avoir de problèmes d'accessibilité sur le fichier json suivant de contexte {} et avec le fichier json suivant d'option {}"
   },
   {
     "key": "key.then.a11y.check.onlyCritical",

diff --git a/packages/runner-commons/src/assets/i18n/template.json b/packages/runner-commons/src/assets/i18n/template.json
@@ -3,6 +3,10 @@
     "visit": "",
     "click": "",
     "type": "",
+    "keyboard": {
+      "multiplePress": "",
+      "press": ""
+    },
     "timeout": "",
     "withinElement": {
       "roleAndName": "",

diff --git a/packages/runner-commons/src/step-definition-generator/common.ts b/packages/runner-commons/src/step-definition-generator/common.ts
@@ -46,6 +46,15 @@ export enum STEP_DEFINITION_FILE_NAME {
     BY_ROLE = "based-role-check-engine"
 }
 
+export enum KEY_PRESS {
+    TAB = "{tab}",
+    REVERSE_TAB = "{reverseTab}",
+    UP = "{up}",
+    DOWN = "{down}",
+    LEFT = "{left}",
+    RIGHT = "{right}",
+}
+
 export class Common {
     static buildDirIfNotExists(directory: string): void {
         console.log(

diff --git a/packages/runner-cypress/e2e/en-accessibility.feature b/packages/runner-cypress/e2e/en-accessibility.feature
@@ -1,36 +1,37 @@
 Feature: Accessibility Step Definition
 
-  Scenario: key.then.a11y.check.default
-    When I visit path "https://e2e-test-quest.github.io/simple-webapp/"
-    Then I should not have any accessibility issue
+  Rule: a11y
+    Scenario: key.then.a11y.check.default
+      When I visit path "https://e2e-test-quest.github.io/simple-webapp/"
+      Then I should not have any accessibility issue
 
-  Scenario: key.then.a11y.check.onlyCritical
-    When I visit path "https://e2e-test-quest.github.io/weather-app/"
-    When Within a button named "Get started"
-    And I click
-    And I reset context
-    Then I should not have any critical accessibility issue
+    Scenario: key.then.a11y.check.onlyCritical
+      When I visit path "https://e2e-test-quest.github.io/weather-app/"
+      When Within a button named "Get started"
+      And I click
+      And I reset context
+      Then I should not have any critical accessibility issue
 
-  Scenario: key.then.a11y.check.withFixtureOption
-    When I visit path "https://e2e-test-quest.github.io/weather-app/"
-    And Within a button named "Get started"
-    And I click
-    And I reset context
-    Then I should not have any accessibility issue with option json fixture withExperimentalOption.json
+    Scenario: key.then.a11y.check.withFixtureOption
+      When I visit path "https://e2e-test-quest.github.io/weather-app/"
+      And Within a button named "Get started"
+      And I click
+      And I reset context
+      Then I should not have any accessibility issue with option json fixture withExperimentalOption.json
 
-  Scenario: key.then.a11y.check.withImpacts
-    When I visit path "https://e2e-test-quest.github.io/weather-app/"
-    And Within a button named "Get started"
-    And I click
-    And I reset context
-    Then I should not have any accessibility issue with critical impact
+    Scenario: key.then.a11y.check.withImpacts
+      When I visit path "https://e2e-test-quest.github.io/weather-app/"
+      And Within a button named "Get started"
+      And I click
+      And I reset context
+      Then I should not have any accessibility issue with critical impact
 
-  Scenario: key.then.a11y.check.withFixtureContextAndFixtureOption
-    When I visit path "https://e2e-test-quest.github.io/weather-app/"
-    And Within a button named "Get started"
-    And I click
-    And I reset context
-    Then I should not have any accessibility issue with context json fixture withExcludeErrorContext.json and option json fixture withBestPracticeOption.json
+    Scenario: key.then.a11y.check.withFixtureContextAndFixtureOption
+      When I visit path "https://e2e-test-quest.github.io/weather-app/"
+      And Within a button named "Get started"
+      And I click
+      And I reset context
+      Then I should not have any accessibility issue with context json fixture withExcludeErrorContext.json and option json fixture withBestPracticeOption.json
 
   Scenario: key.then.a11y.check.withTags
     When I visit path "https://e2e-test-quest.github.io/weather-app/"
@@ -39,3 +40,55 @@ Feature: Accessibility Step Definition
     And I reset context
     Then I should not have any accessibility issue with accessibility standards wcag2a
 
+  Rule: accessibility keys
+    Scenario: key.then.keyboard.press - Reverse Tab & Tab
+      When I visit path "https://e2e-test-quest.github.io/weather-app/"
+      And Within an button named "Get started"
+      And I press "{reverseTab}"
+      And I press "{tab}"
+      And I click
+
+    Scenario: key.then.keyboard.multiplePress - Reverse Tab & Tab
+      When I visit path "https://e2e-test-quest.github.io/weather-app/"
+      And Within an button named "Get started"
+      And I click
+      And I reset context
+      And Within an text box named "Search for a town"
+      And I type the sentence "i"
+      And I reset context
+      And Within a link named "Home"
+      And I press 2 times on "{tab}"
+      And I click
+      And I reset context
+      Then I should see elements of the list with name "Available Towns"
+        | Tunis   |
+        | Limoges |
+
+    Scenario: key.then.keyboard.press - Left right
+      When I visit path "https://e2e-test-quest.github.io/weather-app/"
+      And Within an button named "Get started"
+      And I click
+      And I reset context
+      And Within an text box named "Search for a town"
+      And I type the sentence "mo"
+      And I press 2 times on "{left}"
+      And I type the sentence "Li"
+      And I press 2 times on "{right}"
+      And I type the sentence "ges"
+      And I reset context
+      Then I should see an text box named "Search for a town" and containing "Limoges"
+
+    Scenario: key.then.keyboard.press - Up Down
+      When I visit path "https://e2e-test-quest.github.io/weather-app/"
+      And Within an button named "Get started"
+      And I click
+      And I reset context
+      And Within an text box named "Search for a town"
+      And I type the sentence "mo"
+      And I press "{up}"
+      And I type the sentence "Li"
+      And I press "{down}"
+      And I type the sentence "ges"
+      And I reset context
+      Then I should see an text box named "Search for a town" and containing "Limoges"
+
diff --git a/packages/runner-cypress/e2e/fr-accessibility.feature b/packages/runner-cypress/e2e/fr-accessibility.feature
@@ -1,9 +1,10 @@
 #language: fr
 Fonctionnalité: Accessibility Step Definition
 
-  Scénario: key.then.a11y.check.default
-    Lorsque je visite l'Url "https://e2e-test-quest.github.io/simple-webapp/"
-    Alors je ne dois pas avoir de problèmes d'accessibilité
+  Règle: a11y
+    Scénario: key.then.a11y.check.default
+      Lorsque je visite l'Url "https://e2e-test-quest.github.io/simple-webapp/"
+      Alors je ne dois pas avoir de problèmes d'accessibilité
 
   Scénario: key.then.a11y.check.onlyCritical
     Lorsque je visite l'Url "https://e2e-test-quest.github.io/weather-app/"
@@ -12,31 +13,82 @@ Fonctionnalité: Accessibility Step Definition
     Et je reinitialise le contexte
     Alors I should not have any critical accessibility issue
 
-  Scénario: key.then.a11y.check.withFixtureOption
-    Lorsque je visite l'Url "https://e2e-test-quest.github.io/weather-app/"
-    Et je vais à l'intérieur de bouton nommée "Get started"
-    Et je clique
-    Et je reinitialise le contexte
-    Alors I should not have any accessibility issue with option json fixture withExperimentalOption.json
+    Scénario: key.then.a11y.check.withFixtureOption
+      Lorsque je visite l'Url "https://e2e-test-quest.github.io/weather-app/"
+      Et je vais à l'intérieur de bouton nommée "Get started"
+      Et je clique
+      Et je reinitialise le contexte
+      Alors I should not have any accessibility issue with option json fixture withExperimentalOption.json
 
-  Scénario: key.then.a11y.check.withImpacts
-    Lorsque je visite l'Url "https://e2e-test-quest.github.io/weather-app/"
-    Et je vais à l'intérieur de bouton nommée "Get started"
-    Et je clique
-    Et je reinitialise le contexte
-    Alors je ne dois pas avoir de problèmes d'accessibilité avec les impacts critical
+    Scénario: key.then.a11y.check.withImpacts
+      Lorsque je visite l'Url "https://e2e-test-quest.github.io/weather-app/"
+      Et je vais à l'intérieur de bouton nommée "Get started"
+      Et je clique
+      Et je reinitialise le contexte
+      Alors je ne dois pas avoir de problèmes d'accessibilité avec les impacts critical
 
-  Scénario: key.then.a11y.check.withFixtureContextAndFixtureOption
-    Lorsque je visite l'Url "https://e2e-test-quest.github.io/weather-app/"
-    Et je vais à l'intérieur de bouton nommée "Get started"
-    Et je clique
-    Et je reinitialise le contexte
-    Alors je ne dois pas avoir de problèmes d'accessibilité sur le fichier json suivant de contexte withExcludeErrorContext.json et avec le fichier json suivant d'option withBestPracticeOption.json
+    Scénario: key.then.a11y.check.withFixtureContextAndFixtureOption
+      Lorsque je visite l'Url "https://e2e-test-quest.github.io/weather-app/"
+      Et je vais à l'intérieur de bouton nommée "Get started"
+      Et je clique
+      Et je reinitialise le contexte
+      Alors je ne dois pas avoir de problèmes d'accessibilité sur le fichier json suivant de contexte withExcludeErrorContext.json et avec le fichier json suivant d'option withBestPracticeOption.json
 
-  Scénario: key.then.a11y.check.withTags
-    Lorsque je visite l'Url "https://e2e-test-quest.github.io/weather-app/"
-    Et je vais à l'intérieur de bouton nommée "Get started"
-    Et je clique
-    Et je reinitialise le contexte
-    Alors je ne dois pas avoir de problèmes d'accessibilité avec le standard wcag2a
+    Scénario: key.then.a11y.check.withTags
+      Lorsque je visite l'Url "https://e2e-test-quest.github.io/weather-app/"
+      Et je vais à l'intérieur de bouton nommée "Get started"
+      Et je clique
+      Et je reinitialise le contexte
+      Alors je ne dois pas avoir de problèmes d'accessibilité avec le standard wcag2a
+
+  Règle: touches d'accessibilité
+    Scénario: key.then.keyboard.press - Reverse Tab & Tab
+      Lorsque je visite l'Url "https://e2e-test-quest.github.io/weather-app/"
+      Et je vais à l'intérieur de bouton nommée "Get started"
+      Et j'appuie sur "{reverseTab}"
+      Et j'appuie sur "{tab}"
+      Et je clique
+
+    Scénario: key.then.keyboard.multiplePress - Reverse Tab & Tab
+      Lorsque je visite l'Url "https://e2e-test-quest.github.io/weather-app/"
+      Et je vais à l'intérieur de bouton nommé "Get started"
+      Et je clique
+      Et je reinitialise le contexte
+      Et je vais à l'intérieur de boîte à texte nommée "Search for a town"
+      Et je saisie les mots "i"
+      Et je reinitialise le contexte
+      Et Within a link named "Home"
+      Et j'appuie 2 fois sur "{tab}"
+      Et je clique
+      Et je reinitialise le contexte
+      Alors I should see elements of the list with name "Available Towns"
+        | Tunis   |
+        | Limoges |
+
+    Scénario: key.then.keyboard.press - Left right
+      Lorsque je visite l'Url "https://e2e-test-quest.github.io/weather-app/"
+      Et je vais à l'intérieur de bouton nommée "Get started"
+      Et je clique
+      Et je reinitialise le contexte
+      Et Within an text box named "Search for a town"
+      Et je saisie les mots "mo"
+      Et j'appuie 2 fois sur "{left}"
+      Et je saisie les mots "Li"
+      Et j'appuie 2 fois sur "{right}"
+      Et je saisie les mots "ges"
+      Et je reinitialise le contexte
+      Alors je dois voir une boîte à texte nommée "Search for a town" et contenant "Limoges"
 
+    Scénario: key.then.keyboard.press - Up Down
+      Lorsque je visite l'Url "https://e2e-test-quest.github.io/weather-app/"
+      Et je vais à l'intérieur de bouton nommée "Get started"
+      Et je clique
+      Et je reinitialise le contexte
+      Et Within an text box named "Search for a town"
+      Et je saisie les mots "mo"
+      Et j'appuie sur "{up}"
+      Et je saisie les mots "Li"
+      Et j'appuie sur "{down}"
+      Et je saisie les mots "ges"
+      Et je reinitialise le contexte
+      Alors je dois voir une boîte à texte nommée "Search for a town" et contenant "Limoges"