chore(htmlcs): add contrast bg-gradient warning

a11ywatch · Dec 24, 2023 · 32e073a · 32e073a
1 parent 19d39a9
commit 32e073a
Show file tree

Hide file tree

Showing 17 changed files with 113 additions and 25 deletions.
diff --git a/fast_htmlcs/Standards/WCAG2AAA/Sniffs/Principle1/Guideline1_4/1_4_3.ts b/fast_htmlcs/Standards/WCAG2AAA/Sniffs/Principle1/Guideline1_4/1_4_3.ts
@@ -29,6 +29,7 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_3 = {
         const required = failure.required;
         const recommend = failure.recommendation;
         const hasBgImg = failure.hasBgImage || false;
+        const hasBgGradient = failure.hasBgGradient || false;        
         const isAbsolute = failure.isAbsolute || false;
         const hasAlpha = failure.hasAlpha || false;
 
@@ -46,6 +47,7 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_3 = {
             Math.pow(10, decimals);
         }
 
+
         if (required === 4.5) {
           code = "G18";
         } else if (required === 3.0) {
@@ -83,7 +85,18 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_3 = {
             ".";
         }
 
-        if (isAbsolute === true) {
+        if (hasBgGradient === true) {
+          code += ".BgGradient";
+          HTMLCS.addMessage(
+            HTMLCS.WARNING,
+            element,
+            _global.HTMLCS.getTranslation("1_4_3_G18_or_G145.BgGradient").replace(
+              /\{\{required\}\}/g,
+              required + ""
+            ),
+            code
+          );
+        } else if (isAbsolute === true) {
           code += ".Abs";
           HTMLCS.addMessage(
             HTMLCS.WARNING,

diff --git a/fast_htmlcs/Standards/WCAG2AAA/Sniffs/Principle1/Guideline1_4/1_4_3_Contrast.ts b/fast_htmlcs/Standards/WCAG2AAA/Sniffs/Principle1/Guideline1_4/1_4_3_Contrast.ts
@@ -1,17 +1,17 @@
+// This logic needs refactoring.
 _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_3_Contrast = {
   testContrastRatio: function (top, minContrast, minLargeContrast) {
     const failures = [];
-    let toProcess = [];
+    const toProcess = [];
 
     if (!top.ownerDocument) {
-      toProcess = [];
       const body = top.getElementsByTagName("body");
       if (body.length) {
         // SVG objects will not have a body element. Don't check them.
-        toProcess = [body[0]];
+        toProcess.push(body[0]);
       }
     } else {
-      toProcess = [top];
+      toProcess.push(top);
     }
 
     while (toProcess.length > 0) {
@@ -50,11 +50,17 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_3_Contrast = {
             let foreColour = style.color;
             let hasBgImg = false;
             let isAbsolute = false;
+            let hasBgGradient = false;
 
             if (style.backgroundImage !== "none") {
               hasBgImg = true;
             }
 
+            if (style.background && style.background.includes("gradient(")) {
+              hasBgGradient = true;
+              break;
+            }
+
             if (style.position == "absolute") {
               isAbsolute = true;
             }
@@ -93,6 +99,10 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_3_Contrast = {
 
               bgColour = parentStyle.backgroundColor;
 
+              if (parentStyle.background && parentStyle.background.includes("gradient(")) {
+                hasBgGradient = true;
+                break;
+              }
               if (parentStyle.backgroundImage !== "none") {
                 hasBgImg = true;
               }
@@ -103,17 +113,23 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_3_Contrast = {
               // Search for the smooth scrolling willChange: 'transform' background hack
               // See http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property
               const beforeStyle = HTMLCS.util.style(parent, ":before");
+
+              if (beforeStyle.background.includes("gradient(")) {
+                hasBgGradient = true;
+                break;
+              }
+
               if (
                 beforeStyle &&
                 beforeStyle.position == "fixed" &&
                 beforeStyle.willChange == "transform" &&
                 //Make sure it is trying to cover the entire content area
                 beforeStyle.width == parentStyle.width &&
                 parseInt(beforeStyle.height, 10) <=
-                  parseInt(parentStyle.height, 10) &&
-                //And finally it needs a background image
-                beforeStyle.backgroundImage !== "none"
+                  parseInt(parentStyle.height, 10) && 
+                  beforeStyle.backgroundImage !== "none"
               ) {
+                //And finally it needs a background image
                 hasBgImg = true;
                 break;
               }
@@ -123,7 +139,18 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_3_Contrast = {
             const bgAlpha = HTMLCS.util.colourStrToRGB(bgColour).alpha;
             const fgAlpha = HTMLCS.util.colourStrToRGB(foreColour).alpha;
 
-            if (bgColour && bgAlpha < 1.0 && bgAlpha > 0) {
+            if (hasBgGradient) {
+              failures.push({
+                element: node,
+                colour: foreColour,
+                bgColour: bgColour,
+                value: undefined,
+                required: reqRatio,
+                hasAlpha: false,
+                hasBgGradient: true
+              });
+              continue;
+            } else if (bgColour && bgAlpha < 1.0 && bgAlpha > 0) {
               // If we have a rgba background colour, skip the contrast ratio checks,
               // and push a warning instead.
               failures.push({

diff --git a/fast_htmlcs/Standards/WCAG2AAA/Sniffs/Principle1/Guideline1_4/1_4_6.ts b/fast_htmlcs/Standards/WCAG2AAA/Sniffs/Principle1/Guideline1_4/1_4_6.ts
@@ -29,7 +29,9 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_6 = {
         const recommend = failure.recommendation;
         const hasBgImg = failure.hasBgImage || false;
         const isAbsolute = failure.isAbsolute || false;
+        const hasBgGradient = failure.hasBgGradient || false;
         const element = failure.element;
+
         let code = "";
         let decimals = 2;
         let value =
@@ -80,7 +82,18 @@ _global.HTMLCS_WCAG2AAA_Sniffs_Principle1_Guideline1_4_1_4_6 = {
             ".";
         }
 
-        if (isAbsolute === true) {
+        if (hasBgGradient === true) {
+          code += ".BgGradient";
+          HTMLCS.addMessage(
+            HTMLCS.WARNING,
+            element,
+            _global.HTMLCS.getTranslation("1_4_6_G18_or_G145.BgGradient").replace(
+              /\{\{required\}\}/g,
+              required + ""
+            ),
+            code
+          );
+        }  else if (isAbsolute === true) {
           code += ".Abs";
           HTMLCS.addMessage(
             HTMLCS.WARNING,

diff --git a/fast_htmlcs/Translations/en.ts b/fast_htmlcs/Translations/en.ts
@@ -183,6 +183,8 @@ _global.translation["en"] = {
     "This element is absolutely positioned and the background color can not be determined. Ensure the contrast ratio between the text and all covered parts of the background are at least {{required}}:1.",
   "1_4_3_G18_or_G145.BgImage":
     "This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least {{required}}:1.",
+    "1_4_3_G18_or_G145.BgGradient":
+    "This element's text is placed on a gradient. Ensure the contrast ratio between the text and all covered parts of the gradient are at least {{required}}:1.",
   "1_4_3_G18_or_G145.Alpha":
     "This element's text or background contains transparency. Ensure the contrast ratio between the text and background are at least {{required}}:1.",
   "1_4_3_G18_or_G145.Fail":
@@ -200,6 +202,8 @@ _global.translation["en"] = {
     "This element is absolutely positioned and the background color can not be determined. Ensure the contrast ratio between the text and all covered parts of the background are at least {{required}}:1.",
   "1_4_6_G18_or_G17.BgImage":
     "This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least {{required}}:1.",
+  "1_4_6_G18_or_G17.BgGradient":
+    "This element's text is placed on a background gradient. Ensure the contrast ratio between the text and all covered parts of the gradient are at least {{required}}:1.",
   "1_4_6_G18_or_G17.Fail":
     "This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least {{required}}:1, but text in this element has a contrast ratio of {{value}}:1.",
   "1_4_6_G18_or_G17.Fail.Recomendation": "Recommendation: ",

diff --git a/fast_htmlcs/Translations/es.ts b/fast_htmlcs/Translations/es.ts
@@ -196,6 +196,8 @@ _global.translation["es"] = {
     "Este elemento está posicionado absolutamente y no se puede determinar el color de fondo. Asegúrate de que la relación de contraste entre el texto y todas las partes cubiertas del fondo sea al menos de {{required}}:1.",
   "1_4_3_G18_or_G145.BgImage":
     "El texto de este elemento se coloca sobre una imagen de fondo. Asegúrate de que la relación de contraste entre el texto y todas las partes cubiertas de la imagen sea al menos de {{required}}:1.",
+  "1_4_3_G18_or_G17.BgGradient":
+    "El texto de este elemento se coloca sobre una gradiente de fondo. Asegúrate de que la relación de contraste entre el texto y todas las partes cubiertas de el gradiente sea al menos de {{required}}:1.",
   "1_4_3_G18_or_G145.Alpha":
     "El texto o el fondo de este elemento contienen transparencia. Asegúrate de que la relación de contraste entre el texto y el fondo sea de al menos de {{required}}:1.",
 
@@ -215,9 +217,10 @@ _global.translation["es"] = {
     "Este elemento está posicionado absolutamente y no se puede determinar el color de fondo. Asegúrate de que la relación de contraste entre el texto y todas las partes cubiertas del fondo sea al menos de {{required}}:1.",
   "1_4_6_G18_or_G17.BgImage":
     "El texto de este elemento se coloca sobre una imagen de fondo. Asegúrate de que la relación de contraste entre el texto y todas las partes cubiertas de la imagen sea al menos de {{required}}:1.",
+  "1_4_6_G18_or_G17.BgGradient":
+    "El texto de este elemento se coloca sobre una gradiente de fondo. Asegúrate de que la relación de contraste entre el texto y todas las partes cubiertas de el gradiente sea al menos de {{required}}:1.",
   "1_4_6_G18_or_G17.Fail":
     "Este elemento tiene un contraste insuficiente en este nivel de conformidad. Se espera una relación de contraste de al menos {{required}}:1, pero el texto de este elemento tiene una relación de contraste de {{value}}:1.",
-
   "1_4_6_G18_or_G17.Fail.Recomendation": "Recomendación: ",
   "1_4_6_G18_or_G17.Fail.Recomendation.Text":
     "cambiar el color del texto a {{value}}",

diff --git a/fast_htmlcs/Translations/fr.ts b/fast_htmlcs/Translations/fr.ts
@@ -236,6 +236,9 @@ _global.translation["fr"] = {
     "Cet élément est absolument positionné et la couleur de fond ne peut pas être déterminée. Assurez-vous que le rapport de contraste entre le texte et toutes les parties couvertes de l'arrière-plan est d'au moins {{nécessaire}}:1.",
   "1_4_3_G18_or_G145.BgImage":
     "Le texte de cet élément est placé sur une image de fond. Assurez-vous que le rapport de contraste entre le texte et toutes les parties couvertes de l'image est d'au moins {{nécessaire}}:1.",
+  "1_4_3_G18_or_G145.BgGradient":
+    "Le texte de cet élément est placé sur une pente de fond. Assurez-vous que le rapport de contraste entre le texte et toutes les parties couvertes de l'pente est d'au moins {{nécessaire}}:1.",
+
   "1_4_3_G18_or_G145.Alpha":
     "Le texte ou l'arrière-plan de cet élément contient de la transparence. Assurez-vous que le rapport de contraste entre le texte et l'arrière-plan est d'au moins {{nécessaire}}:1.",
   "1_4_3_G18_or_G145.Fail":
@@ -259,6 +262,8 @@ _global.translation["fr"] = {
     "Cet élément est absolument positionné et la couleur de fond ne peut pas être déterminée. Assurez-vous que le rapport de contraste entre le texte et toutes les parties couvertes de l'arrière-plan est d'au moins {{nécessaire}}:1.",
   "1_4_6_G18_or_G17.BgImage":
     "Le texte de cet élément est placé sur une image de fond. Assurez-vous que le rapport de contraste entre le texte et toutes les parties couvertes de l'image est d'au moins {{nécessaire}}:1.",
+  "1_4_6_G18_or_G145.BgGradient":
+    "Le texte de cet élément est placé sur une pente de fond. Assurez-vous que le rapport de contraste entre le texte et toutes les parties couvertes de l'pente est d'au moins {{nécessaire}}:1.",
   "1_4_6_G18_or_G17.Fail":
     "Cet élément a un contraste insuffisant à ce niveau de conformité. On s'attendait à un rapport de contraste d'au moins {{required}}:1, mais le texte dans cet élément a un rapport de contraste de {{value}}:1.",
   "1_4_6_G18_or_G17.Fail.Recomendation": "Recommandation : ",

diff --git a/fast_htmlcs/Translations/it.ts b/fast_htmlcs/Translations/it.ts
@@ -155,6 +155,8 @@ _global.translation["it"] = {
     "Check that this element has an inherited background colour or image to complement the corresponding inline foreground colour.",
   "1_4_3_G18_or_G145.Abs":
     "This element is absolutely positioned and the background color can not be determined. Ensure the contrast ratio between the text and all covered parts of the background are at least {{required}}:1.",
+  "1_4_3_G18_or_G145.BgGradient":
+    "This element's text is placed on a gradient. Ensure the contrast ratio between the text and all covered parts of the gradient are at least {{required}}:1.",
   "1_4_3_G18_or_G145.BgImage":
     "This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least {{required}}:1.",
   "1_4_3_G18_or_G145.Alpha":
@@ -172,6 +174,8 @@ _global.translation["it"] = {
     "This element is absolutely positioned and the background color can not be determined. Ensure the contrast ratio between the text and all covered parts of the background are at least {{required}}:1.",
   "1_4_6_G18_or_G17.BgImage":
     "This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least {{required}}:1.",
+  "1_4_6_G18_or_G145.BgGradient":
+    "This element's text is placed on a gradient. Ensure the contrast ratio between the text and all covered parts of the gradient are at least {{required}}:1.",
   "1_4_6_G18_or_G17.Fail":
     "This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least {{required}}:1, but text in this element has a contrast ratio of {{value}}:1.",
   "1_4_6_G18_or_G17.Fail.Recomendation": "Recommendation: change",

diff --git a/fast_htmlcs/Translations/ja.ts b/fast_htmlcs/Translations/ja.ts
@@ -182,6 +182,10 @@ _global.translation["ja"] = {
     "この要素は絶対位置に配置されているため、背景色を決定できません。テキストと背景の覆われた部分すべてのコントラスト比が少なくとも{{required}}:1であることを確認してください。",
   "1_4_3_G18_or_G145.BgImage":
     "この要素のテキストは背景画像に配置されます。テキストと画像の覆われている部分すべてのコントラスト比が少なくとも{{required}}:1であることを確認してください。",
+
+  "1_4_3_G18_or_G145.BgGradient":
+    "この要素のテキストはグラデーションの上に配置されます。テキストとグラデーションのすべての覆われた部分のコントラスト比が少なくとも {{required}}:1 であることを確認してください。",
+
   "1_4_3_G18_or_G145.Alpha":
     "この要素のテキストまたは背景は透明部分を含みます。テキストと背景のコントラスト比が少なくとも{{required}}:1であることを確認してください。",
   "1_4_3_G18_or_G145.Fail":
@@ -204,6 +208,9 @@ _global.translation["ja"] = {
     "この要素は絶対位置に配置されているため、背景色を決定できません。テキストと背景の覆われた部分すべてのコントラスト比が少なくとも{{required}}:1であることを確認してください。",
   "1_4_6_G18_or_G17.BgImage":
     "この要素のテキストは背景画像に配置されます。テキストと画像の覆われている部分すべてのコントラスト比が少なくとも{{required}}:1であることを確認してください。",
+  "1_4_6_G18_or_G145.BgGradient":
+    "この要素のテキストはグラデーションの上に配置されます。テキストとグラデーションのすべての覆われた部分のコントラスト比が少なくとも {{required}}:1 であることを確認してください。",
+
   "1_4_6_G18_or_G17.Fail":
     "この要素は、この適合レベルではコントラストが不十分です。少なくとも{{required}}:1のコントラスト比が必要ですが、この要素のテキストのコントラスト比は{{value}}:1です。",
   "1_4_6_G18_or_G17.Fail.Recomendation": "推奨: ",

diff --git a/fast_htmlcs/Translations/nl.ts b/fast_htmlcs/Translations/nl.ts
@@ -233,8 +233,10 @@ _global.translation["nl"] = {
   //1_4_3.js
   "1_4_3_G18_or_G145.Abs":
     "Dit element is absoluut gepositioneerd en de achtergrondkleur kan niet bepaald worden. Zorg ervoor dat de contrastverhouding tussen de tekst en alle bedekte delen van de achtergond minstens {{required}}:1 is.",
-  "1_4_3_G18_or_G145.BgImage":
+    "1_4_3_G18_or_G145.BgImage":
     "De tekst van dit element werd geplaatst op een achtergrondafbeelding. Zorg ervoor dat de contrastverhouding tussen de tekst en alle bedekte delen van de achtergrondafbeelding minstens {{required}}:1 is.",
+  "1_4_3_G18_or_G145.BgGradient":
+    "De tekst van dit element is op een achtergrondverloop geplaatst. Zorg ervoor dat de contrastverhouding tussen de tekst en alle bedekte delen van het achtergrondverloop minimaal {{vereist}}:1 is.",
   "1_4_3_G18_or_G145.Alpha":
     "De tekst of achtergrond van dit element bevat transparantie. Zorg ervoor dat de contrastverhouding tussen de tekst en de achtergond minstens {{required}}:1 is.",
   "1_4_3_G18_or_G145.Fail":
@@ -258,6 +260,10 @@ _global.translation["nl"] = {
     "Dit element is absoluut gepositioneerd en de achtergrondkleur kan niet bepaald worden. Zorg ervoor dat de contrastverhouding tussen de tekst en alle bedekte delen van de achtergond minstens {{required}}:1 is.",
   "1_4_6_G18_or_G17.BgImage":
     "De tekst van dit element werd geplaatst op een achtergrondafbeelding. Zorg ervoor dat de contrastverhouding tussen de tekst en alle bedekte delen van de achtergrondafbeelding minstens {{required}}:1 is.",
+
+  "1_4_6_G18_or_G145.BgGradient":
+    "De tekst van dit element is op een achtergrondverloop geplaatst. Zorg ervoor dat de contrastverhouding tussen de tekst en alle bedekte delen van het achtergrondverloop minimaal {{vereist}}:1 is.",
+
   "1_4_6_G18_or_G17.Fail":
     "Dit element heeft onvoldoende contrast op dit conformantie-niveau. Een contrastverhouding van minstens {{required]}}:1 wordt verwacht, maar de tekst in dit element heeft een contrastverhouding van {{value}}:1.",
   "1_4_6_G18_or_G17.Fail.Recomendation": "Aanbeveling:",

diff --git a/fast_htmlcs/Translations/pl.ts b/fast_htmlcs/Translations/pl.ts
@@ -234,8 +234,10 @@ _global.translation["pl"] = {
   //1_4_3.js
   "1_4_3_G18_or_G145.Abs":
     "Ten element jest pozycjonowany absolutnie i nie jest możliwe zweryfikowanie jego kontrastu. Sprawdź, czy kontrast jest na wystarczającym poziomie: {{required}}:1.",
-  "1_4_3_G18_or_G145.BgImage":
+    "1_4_3_G18_or_G145.BgImage":
     "Tekst elementu wyświetlany jest na obrazku. Należy upewnić się, że stosunek kontrastu tekstu do tła wynosi co najmniej {{required}}:1.",
+  "1_4_3_G18_or_G145.BgGradient":
+      "Tekst tego elementu jest umieszczony na gradiencie. Upewnij się, że współczynnik kontrastu między tekstem a wszystkimi zakrytymi częściami gradientu wynosi co najmniej {{required}}:1.",
   "1_4_3_G18_or_G145.Alpha":
     "Tekst lub tło tego elementu jest przezroczyste. Upewnij się, że współczynnik kontrastu między tekstem a tłem wynosi co najmniej {{required}}:1.",
   "1_4_3_G18_or_G145.Fail":
@@ -259,6 +261,9 @@ _global.translation["pl"] = {
     "Ten element jest pozycjonowany absolutnie i nie jest możliwe zweryfikowanie jego kontrastu. Sprawdź samodzielnie czy kontrast jest na wystarczającym poziomie: {{required}}:1.",
   "1_4_6_G18_or_G17.BgImage":
     "Tekst elementu wyświetlany jest na obrazku. Należy upewnić się, że stosunek kontrastu tekstu do tła wynosi conajmniej {{required}}:1.",
+  "1_4_6_G18_or_G145.BgGradient":
+    "Tekst tego elementu jest umieszczony na gradiencie. Upewnij się, że współczynnik kontrastu między tekstem a wszystkimi zakrytymi częściami gradientu wynosi co najmniej {{required}}:1.",
+
   "1_4_6_G18_or_G17.Fail":
     "Ten element ma niewystarczający stosunek kontrastu tekstu do tła. Powinien wynosić co najmniej {{required}}:1, a tekst umieszczony w tym elemencie posiada stosunek {{value}}:1.",
   "1_4_6_G18_or_G17.Fail.Recomendation": "Zalecenie: ",