version 0.26.0

Jonathan Vallet · Jonathan Vallet · commit 32c60eef510c · 2024-06-28T17:03:52.000+02:00
diff --git a/README.md b/README.md
@@ -67,7 +67,7 @@ Que vous travailliez sur des sites en développement ou que vous souhaitiez éva
 | 8.7     |     | ✅  |     |            |                                                                                                                        |
 | 8.8     |     | ✅  | ✅  |            |                                                                                                                        |
 | 8.10    |     | ✅  |     |            |                                                                                                                        |
-| 9.1     |     | ✅  | ✅  |            |                                                                                                                        |
+| 9.1     |     | ✅  | ✅  |            | Vérifie si la hiérarchie des titres est correcte.                                                                      |
 | 9.3     |     |     |     |     ✅     | Met en avant les listes                                                                                                |
 | 9.4     |     |     |     |     ✅     | Met en avant les citations                                                                                             |
 | 10.1    |     | ✅  |     |            |                                                                                                                        |
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "accessibility-extension",
-  "version": "0.25.1",
+  "version": "0.26.0",
   "description": "Extension d'accessibilité",
   "repository": {
     "type": "git",
diff --git a/styleguide/assets/manifest_chrome.json b/styleguide/assets/manifest_chrome.json
@@ -31,6 +31,9 @@
       ]
     }
   ],
+  "permissions": [
+    "storage"
+  ],
   "devtools_page": "rgaa-checker-devtools.html",
   "web_accessible_resources": [
     {
diff --git a/styleguide/assets/manifest_firefox.json b/styleguide/assets/manifest_firefox.json
@@ -8,15 +8,14 @@
     "96": "images/icon96.png"
   },
   "browser_action": {
-    "default_popup": "rgaa-checker-panel.html",
+    "default_popup": "rgaa-checker-popup.html",
     "default_icon": {
       "48": "images/icon48.png",
       "96": "images/icon96.png"
     }
   },
   "permissions": [
-    "activeTab",
-    "scripting"
+    "storage"
   ],
   "background": {
     "scripts": ["background.js"],
diff --git a/styleguide/assets/scripts/extension/criteria/Criterion1_1.ts b/styleguide/assets/scripts/extension/criteria/Criterion1_1.ts
@@ -29,7 +29,7 @@ export default class Criterion1_1 extends BaseCriterion {
     this.messageList = {
       'NT': 'Toutes les images de la page ont une alternative textuelle.' + warningMessage,
       'NC': 'Toutes les images de la page n\'ont pas d\'alternative textuelle.' + warningMessage,
-      'NA': 'Aucune image n\'a été trouvée dans la page.' + warningMessage
+      'NA': 'Aucune image n\'a été trouvée dans la page.'
     }
   }
 
@@ -149,7 +149,7 @@ export default class Criterion1_1 extends BaseCriterion {
       this.logResults('1.1 - Liste des images sans alternative textuelle', $noLabelImageList);
     }
 
-    this.elementList = $noLabelImageList;
+    this.elementList = Array.from($allImageList) as HTMLElement[];
 
     return this.status;
   }
diff --git a/styleguide/assets/scripts/extension/criteria/Criterion3_2.ts b/styleguide/assets/scripts/extension/criteria/Criterion3_2.ts
@@ -0,0 +1,38 @@
+/*
+ * Criterion3_2.ts - Copyright (c) 2023-2024 - Arneo
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import BaseCriterion from '../common/BaseCriterion';
+
+/**
+ * Dans chaque page web, le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé (hors cas particuliers) ?
+ * Traite: C, NC
+ */
+export default class Criterion2_2 extends BaseCriterion {
+  constructor(isTestMode: boolean = false) {
+    super(isTestMode);
+    this.messageList = {
+      'C': 'Le contraste entre la couleur du texte et la couleur de son arrière-plan est suffisamment élevé pour tous les éléments textuels.',
+      'NC': 'Le contraste entre la couleur du texte et la couleur de son arrière-plan n\'est pas suffisamment élevé pour tous les éléments textuels.'
+    }
+  }
+
+  runTest() {
+    this.status = 'NA';
+
+    return this.status;
+  }
+}
+
diff --git a/styleguide/assets/scripts/extension/criteria/Criterion5_6.ts b/styleguide/assets/scripts/extension/criteria/Criterion5_6.ts
@@ -35,6 +35,7 @@ export default class Criterion5_6 extends BaseCriterion {
 
     let $tableList = document.querySelectorAll(this.querySelector);
     if ($tableList.length) {
+      this.status = 'NT';
     }
 
     if ($tableList.length > 0) {
diff --git a/styleguide/assets/scripts/extension/criteria/Criterion9_1.ts b/styleguide/assets/scripts/extension/criteria/Criterion9_1.ts
@@ -25,10 +25,10 @@ export default class Criterion9_1 extends BaseCriterion {
     super(isTestMode);
     this.querySelector = 'h1, h2, h3, h4, h5, h6, [role="heading"][aria-level]';
     this.messageList = {
-      'NT': 'Vérifiez si les titres sont présents et correctement balisés.',
+      'NT': 'La hiérachie des titres est correcte.<br />Vérifiez si les titres sont présents et correctement balisés.',
       'NA': "Aucun titre n'a été trouvé",
       'NC': 'La hiérarchie des titres n\'est pas respectée.',
-      'C': 'La hiérarchie des titres est respectée.'
+      'C': 'La hiérarchie des titres est respectée et les titres sont correctement balisés.'
     };
   }
 
diff --git a/styleguide/components/20-organisms/summary/_summary.scss b/styleguide/components/20-organisms/summary/_summary.scss
@@ -12,9 +12,17 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    flex-wrap: wrap;
     gap: 6px;
 }
 
+.o-summary__top__url {
+    flex-shrink: 0;
+    font-size: 12px;
+    font-weight: 500;
+    width: 100%;
+}
+
 .o-summary__top__title {
     font-size: 14px;
     font-weight: 800;
@@ -31,6 +39,53 @@
     display: none;
 }
 
+.o-summary__differences {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    flex-shrink: 0;
+    gap: 6px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    background-color: $color-white;
+}
+
+.o-summary__differences__title {
+    font-size: 12px;
+    font-weight: 700;
+}
+
+.o-summary__differences__list {
+    padding-left: 16px;
+    font-size: 12px;
+
+    li {
+        list-style: disc;
+    }
+
+    span {
+        display: inline-block;
+        padding: 4px;
+        border-radius: 4px;
+        font-weight: 700;
+
+        &.-status-c {
+            background-color: var(--secondary-color-green-soft);
+            color: var(--secondary-color-green);
+        }
+
+        &.-status-nc {
+            background-color: var(--secondary-color-red-soft);
+            color: var(--secondary-color-red);
+        }
+
+        &.-status-na {
+            background-color: var(--secondary-color-orange-soft);
+            color: var(--secondary-color-orange);
+        }
+    }
+}
+
 .o-summary__frame {
     padding: 8px;
     border-radius: 8px;
diff --git a/styleguide/components/20-organisms/summary/summary.html.twig b/styleguide/components/20-organisms/summary/summary.html.twig
@@ -17,6 +17,11 @@
 {% endfor %}
 <{{ tag }}{% for attribute, value in attributeList %} {{ attribute }}="{{ value }}"{% endfor %}>
     <div class="o-summary__top">
+        <p class="o-summary__top__url"><strong>URL testée :</strong> <span class="js-summary__host"></span><span class="js-summary__url"></span></p>
+        <div class="o-summary__differences o-summary__frame -hidden js-summary__differences">
+            <h2 class="o-summary__differences__title">Différences depuis les derniers tests:</h2>
+            <ul class="o-summary__differences__list js-summary__differences__list"></ul>
+        </div>
         <h2 class="o-summary__top__title">Simplifiez votre audit</h2>
         <button class="o-summary__top__download js-summary__copyButton">Copier le résultat</button>
         <textarea id="summary__result" class="js-summary__textarea o-summary__top__textarea"></textarea>
diff --git a/styleguide/components/25-templates/devtools/devtools.ts b/styleguide/components/25-templates/devtools/devtools.ts
@@ -16,6 +16,10 @@
 import MessageSender from "../../00-base/utils/message-sender";
 import Highlight from "../../00-base/utils/highlight";
 
+interface StorageData {
+  [key: string]: any;  // Utilise `any`, ou un type plus spécifique si possible
+}
+
 export default class Devtools {
   criteriaCardList: Array<any>;
 
@@ -38,7 +42,8 @@ export default class Devtools {
         MessageSender.sendMessage('devtools_runTests');
         break;
       case 'background_testsCompleted':
-        this.parseResults(request.result);
+        this.updateUrl(request.host, request.url);
+        this.parseResults(request);
         const criteriaUpdatedEvent = new Event('rgaachecker-initialized', {
           bubbles: true, // L'événement peut se propager à travers la hiérarchie DOM
           cancelable: true, // L'événement peut être annulé
@@ -56,7 +61,11 @@ export default class Devtools {
     return true;
   }
 
-  parseResults(criteriaList: any) {
+  parseResults(request: any) {
+    console.log('Parse results', request);
+    let host = request.host || '';
+    let url = request.url || '';
+    let criteriaList = request.result || {};
     // results data structure
     // 4.2: {
     //   topicNumber: 4,
@@ -77,5 +86,109 @@ export default class Devtools {
       }
       criterion.loadData(criterionData);
     });
+
+    if(!host || !url) {
+      return;
+    }
+
+    let previousStorageData: StorageData = {};
+    if(typeof browser !== 'undefined' && browser) {
+      browser.storage.local.get('rgaachecker-results').then((data: StorageData) => {
+        console.log('Loaded previous results from local storage', previousStorageData);
+        previousStorageData = data['rgaachecker-results'] || {};
+      });
+    }
+    else {
+      chrome.storage.local.get('rgaachecker-results').then((data: StorageData) => {
+        previousStorageData = data['rgaachecker-results'] || {};
+        this.saveResults(previousStorageData, host, url, criteriaList);
+      });
+    }
+  }
+
+  updateUrl(host: string, url: string) {
+    let $host = document.querySelector('.js-summary__host') as HTMLElement;
+    if($host) {
+      $host.textContent = host;
+    }
+
+    let $url = document.querySelector('.js-summary__url') as HTMLElement;
+    if($url) {
+      $url.textContent = url;
+    }
+  }
+
+  saveResults(previousStorageData: StorageData, host: string, url: string, criteriaList: any) {
+    // Save the results in the devtools local storage, separated by host and url
+    if(!host || !url) {
+      return;
+    }
+
+    if(!previousStorageData[host]) {
+      previousStorageData[host] = {};
+    }
+    if(!previousStorageData[host][url]) {
+      previousStorageData[host][url] = {
+        'user': JSON.stringify({}),
+        'runner': JSON.stringify(criteriaList)
+      }
+    } else {
+      // Save the new results
+      let resultList: any = {};
+      Object.keys(criteriaList).forEach((key: string) => {
+        resultList[key] = criteriaList[key]['status'];
+      });
+
+      // Check if there are differences between the previous and the new results
+      let previousCriterionData = JSON.parse(previousStorageData[host][url]['runner']);
+      const diff: any = {};
+      Object.keys(resultList).forEach((key: string) => {
+        if(typeof previousCriterionData[key] !== 'undefined' && previousCriterionData[key] !== resultList[key]) {
+          diff[key] = {
+            'previous': previousCriterionData[key],
+            'current': resultList[key]
+          };
+          return;
+        }
+      });
+      if(Object.keys(diff).length > 0) {
+        this.showDiff(diff);
+      }
+
+      previousStorageData[host][url]['runner'] = JSON.stringify(resultList);
+    }
+
+    if(typeof browser !== 'undefined' && browser) {
+      browser.storage.local.set({ 'rgaachecker-results': previousStorageData });
+    } else {
+      chrome.storage.local.set({ 'rgaachecker-results': previousStorageData }).then(() => {
+        console.log('Saved results in local storage', previousStorageData);
+      });
+    }
+  }
+
+  showDiff(diff: any) {
+    let $diffContainer = document.querySelector('.js-summary__differences') as HTMLElement;
+    if(!$diffContainer) {
+      return;
+    }
+
+    $diffContainer.classList.remove('-hidden');
+    let $diffList = document.querySelector('.js-summary__differences__list') as HTMLElement;
+    if(!$diffList) {
+      return;
+    }
+
+    // Clear the list
+    $diffList.innerHTML = '';
+
+    Object.keys(diff).forEach((key: string) => {
+      let $diffItem = document.createElement('li');
+      $diffItem.classList.add(`-status-${diff[key].current}`);
+      $diffItem.innerHTML = `Critere <strong>${key}</strong>:
+          <span class="-status-${diff[key].previous.toLowerCase()}">${diff[key].previous}</span>
+          ➡ <span class="-status-${diff[key].current.toLowerCase()}">${diff[key].current}</span>`;
+      $diffList.appendChild($diffItem);
+    });
   }
 }
diff --git a/styleguide/components/25-templates/panel/_panel.scss b/styleguide/components/25-templates/panel/_panel.scss
diff --git a/styleguide/components/25-templates/popup/popup.html.twig b/styleguide/components/25-templates/popup/popup.html.twig
diff --git a/styleguide/components/background.ts b/styleguide/components/background.ts
diff --git a/styleguide/components/content.ts b/styleguide/components/content.ts

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "accessibility-extension",`
`3`		`- "version": "0.25.1",`
	`3`	`+ "version": "0.26.0",`
`4`	`4`	`"description": "Extension d'accessibilité",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`
Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,9 @@`
`31`	`31`	`]`
`32`	`32`	`}`
`33`	`33`	`],`
	`34`	`+ "permissions": [`
	`35`	`+ "storage"`
	`36`	`+ ],`
`34`	`37`	`"devtools_page": "rgaa-checker-devtools.html",`
`35`	`38`	`"web_accessible_resources": [`
`36`	`39`	`{`
Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ export default class Criterion1_1 extends BaseCriterion {`
`29`	`29`	`this.messageList = {`
`30`	`30`	`'NT': 'Toutes les images de la page ont une alternative textuelle.' + warningMessage,`
`31`	`31`	`'NC': 'Toutes les images de la page n\'ont pas d\'alternative textuelle.' + warningMessage,`
`32`		`- 'NA': 'Aucune image n\'a été trouvée dans la page.' + warningMessage`
	`32`	`+ 'NA': 'Aucune image n\'a été trouvée dans la page.'`
`33`	`33`	`}`
`34`	`34`	`}`
`35`	`35`
`@@ -149,7 +149,7 @@ export default class Criterion1_1 extends BaseCriterion {`
`149`	`149`	`this.logResults('1.1 - Liste des images sans alternative textuelle', $noLabelImageList);`
`150`	`150`	`}`
`151`	`151`
`152`		`- this.elementList = $noLabelImageList;`
	`152`	`+ this.elementList = Array.from($allImageList) as HTMLElement[];`
`153`	`153`
`154`	`154`	`return this.status;`
`155`	`155`	`}`
Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,7 @@ export default class Criterion5_6 extends BaseCriterion {`
`35`	`35`
`36`	`36`	`let $tableList = document.querySelectorAll(this.querySelector);`
`37`	`37`	`if ($tableList.length) {`
	`38`	`+ this.status = 'NT';`
`38`	`39`	`}`
`39`	`40`
`40`	`41`	`if ($tableList.length > 0) {`