@qualweb/act-rules 0.7.4 → 0.7.6

package/dist/rules/QW-ACT-R37.d.ts

@@ -1,23 +1,21 @@
 import type { QWElement } from '@qualweb/qw-element';
-import { Test } from '@qualweb/core/evaluation';
 import { AtomicRule } from '../lib/AtomicRule.object';
 declare class QW_ACT_R37 extends AtomicRule {
     execute(element: QWElement): void;
-    getBackground(element: QWElement): string;
-    isImage(color: string): boolean;
-    evaluateGradient(test: Test, element: QWElement, parsedGradientString: any, fgColor: any, opacity: number, fontSize: string, fontWeight: string, fontStyle: string, fontFamily: string, elementText: string): boolean;
-    isHumanLanguage(text: string): boolean;
-    equals(color1: any, color2: any): boolean;
-    getGradientDirection(gradient: string): string | undefined;
-    parseGradientString(gradient: string, opacity: number): any;
-    parseRGBString(colorString: string, opacity: number): any;
-    getRelativeLuminance(red: number, green: number, blue: number): number;
-    flattenColors(fgColor: any, bgColor: any): any;
+    private isHumanLanguage;
+    private evaluateGradient;
+    private parseGradientString;
+    private getColorInGradient;
+    private getTextSize;
+    private getBackground;
+    private isImage;
+    private parseRGBString;
+    private flattenColors;
+    private getContrast;
+    private getLuminance;
+    private hasValidContrastRatio;
     private isBold;
-    getContrast(bgColor: any, fgColor: any): number;
-    hasValidContrastRatio(contrast: number, fontSize: string, isBold: boolean): boolean;
-    getTextSize(font: string, fontSize: number, bold: boolean, italic: boolean, text: string): number;
-    getColorInGradient(fromColor: any, toColor: any, ratio: number): any;
+    private equals;
 }
 export { QW_ACT_R37 };
 //# sourceMappingURL=QW-ACT-R37.d.ts.map

package/dist/rules/QW-ACT-R37.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QW-ACT-R37.d.ts","sourceRoot":"","sources":["../../src/rules/QW-ACT-R37.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAQrD,OAAO,EAAE,IAAI,EAAW,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,cAAM,UAAW,SAAQ,UAAU;IAMjC,OAAO,CAAC,OAAO,EAAE,SAAS,GAAG,IAAI;IAuOjC,aAAa,CAAC,OAAO,EAAE,SAAS,GAAG,MAAM;IAczC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAS/B,gBAAgB,CACd,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,SAAS,EAClB,oBAAoB,EAAE,GAAG,EACzB,OAAO,EAAE,GAAG,EACZ,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,GAClB,OAAO;IAoDV,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAItC,MAAM,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,GAAG,OAAO;IASzC,oBAAoB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAY1D,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,GAAG;IAW3D,cAAc,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,GAAG;IAiCzD,oBAAoB,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM;IAYtE,aAAa,CAAC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,GAAG,GAAG;IAU9C,OAAO,CAAC,MAAM;IAId,WAAW,CAAC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,GAAG,MAAM;IAW/C,qBAAqB,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,OAAO;IAWnF,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM;IAIjG,kBAAkB,CAAC,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,GAAG,GAAG;CAOrE;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"QW-ACT-R37.d.ts","sourceRoot":"","sources":["../../src/rules/QW-ACT-R37.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAQrD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAUtD,cAAM,UAAW,SAAQ,UAAU;IAKjC,OAAO,CAAC,OAAO,EAAE,SAAS,GAAG,IAAI;IAqIjC,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,gBAAgB;IA+BxB,OAAO,CAAC,mBAAmB;IAW3B,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,qBAAqB;IAM7B,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,MAAM;CAGf;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/rules/QW-ACT-R37.js

@@ -8,42 +8,44 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.QW_ACT_R37 = void 0;
 const applicability_1 = require("@qualweb/util/applicability");
 const evaluation_1 = require("@qualweb/core/evaluation");
 const AtomicRule_object_1 = require("../lib/AtomicRule.object");
+const colorjs_io_1 = __importDefault(require("colorjs.io"));
 class QW_ACT_R37 extends AtomicRule_object_1.AtomicRule {
     execute(element) {
+        var _a;
         const visible = window.DomUtils.isElementVisible(element);
-        if (!visible) {
+        if (!visible)
             return;
-        }
-        const hasTextNode = element.hasTextNode();
-        const elementText = element.getElementOwnText();
-        if (!hasTextNode && elementText.trim() === '') {
+        const nodeName = element.getElementTagName();
+        const isInputField = ['input', 'select', 'textarea'].includes(nodeName);
+        const elementText = element.getElementOwnText().trim();
+        const placeholder = (_a = element.getElementAttribute('placeholder')) === null || _a === void 0 ? void 0 : _a.trim();
+        if (elementText === '' && !isInputField && !placeholder) {
             return;
         }
-        const isHTML = element.isElementHTMLElement();
-        if (!isHTML) {
+        if (!element.isElementHTMLElement())
             return;
-        }
         const disabledWidgets = window.disabledWidgets;
         const elementSelectors = element.getElementSelector();
         for (const disableWidget of disabledWidgets || []) {
-            const selectors = window.AccessibilityUtils.getAccessibleNameSelector(disableWidget);
-            if (disableWidget && selectors && selectors.includes(elementSelectors)) {
+            const selectorsResult = window.AccessibilityUtils.getAccessibleNameSelector(disableWidget);
+            const selectors = typeof selectorsResult === 'string' ? [selectorsResult] : selectorsResult;
+            if (disableWidget && selectors && selectors.includes(elementSelectors))
                 return;
-            }
-            if (disableWidget.getElementSelector() === elementSelectors) {
+            if (disableWidget.getElementSelector() === elementSelectors)
                 return;
-            }
             const children = disableWidget.getElementChildren();
             if (children) {
                 for (const child of children) {
-                    if (child.getElementSelector() === elementSelectors) {
+                    if (child.getElementSelector() === elementSelectors)
                         return;
-                    }
                 }
             }
         }
@@ -51,27 +53,25 @@ class QW_ACT_R37 extends AtomicRule_object_1.AtomicRule {
         if (role === 'group') {
             const disable = element.getElementAttribute('disabled') !== null;
             const ariaDisable = element.getElementAttribute('aria-disabled') !== null;
-            if (disable || ariaDisable) {
+            if (disable || ariaDisable)
                 return;
-            }
         }
         const test = new evaluation_1.Test();
         const fgColor = element.getElementStyleProperty('color', null);
         let bgColor = this.getBackground(element);
-        const opacity = parseFloat(element.getElementStyleProperty('opacity', null));
+        const opacity = parseFloat(element.getElementStyleProperty('opacity', null) || '1');
         const fontSize = element.getElementStyleProperty('font-size', null);
         const fontWeight = element.getElementStyleProperty('font-weight', null);
         const fontFamily = element.getElementStyleProperty('font-family', null);
         const fontStyle = element.getElementStyleProperty('font-style', null);
         const textShadow = element.getElementStyleProperty('text-shadow', null);
-        if (textShadow.trim() !== 'none') {
-            const properties = textShadow.trim().split(' ');
-            if (properties.length === 6) {
-                const vs = parseInt(properties[3], 0);
-                const hs = parseInt(properties[4], 0);
-                const blur = parseInt(properties[5], 0);
-                const validateTextShadow = vs === 0 && hs === 0 && blur > 0 && blur <= 15;
-                if (validateTextShadow) {
+        if (textShadow && textShadow.trim() !== 'none' && textShadow.trim() !== '') {
+            const pixelValues = textShadow.match(/(-?\d+px)/g);
+            if (pixelValues && pixelValues.length >= 3) {
+                const hs = Math.abs(parseInt(pixelValues[0].replace('px', ''), 10));
+                const vs = Math.abs(parseInt(pixelValues[1].replace('px', ''), 10));
+                const blur = parseInt(pixelValues[2].replace('px', ''), 10);
+                if (blur > 0 || hs > 1 || vs > 1) {
                     test.verdict = evaluation_1.Verdict.WARNING;
                     test.resultCode = 'W1';
                     test.addElement(element);
@@ -90,9 +90,8 @@ class QW_ACT_R37 extends AtomicRule_object_1.AtomicRule {
         const regexGradient = /((\w-?)*gradient.*)/gm;
         let regexGradientMatches = bgColor.match(regexGradient);
         if (regexGradientMatches) {
-            if (this.isHumanLanguage(elementText)) {
-                const parsedGradientString = regexGradientMatches[0];
-                this.evaluateGradient(test, element, parsedGradientString, fgColor, opacity, fontSize, fontWeight, fontStyle, fontFamily, elementText);
+            if (this.isHumanLanguage(elementText || placeholder || "")) {
+                this.evaluateGradient(test, element, regexGradientMatches[0], fgColor, opacity, fontSize, fontWeight, fontStyle, fontFamily, elementText || placeholder || "");
             }
             else {
                 test.verdict = evaluation_1.Verdict.PASSED;
@@ -100,85 +99,40 @@ class QW_ACT_R37 extends AtomicRule_object_1.AtomicRule {
                 test.addElement(element);
                 this.addTestResult(test);
             }
+            return;
         }
-        else {
-            let parsedBG = this.parseRGBString(bgColor, opacity);
-            let elementAux = element;
-            let opacityAUX;
-            while (parsedBG === undefined ||
-                (parsedBG.red === 0 && parsedBG.green === 0 && parsedBG.blue === 0 && parsedBG.alpha === 0)) {
-                const parent = elementAux.getElementParent();
-                if (parent) {
-                    bgColor = this.getBackground(parent);
-                    if (this.isImage(bgColor)) {
-                        test.verdict = evaluation_1.Verdict.WARNING;
-                        test.resultCode = 'W2';
-                        test.addElement(element);
-                        this.addTestResult(test);
-                        return;
-                    }
-                    else {
-                        regexGradientMatches = bgColor.match(regexGradient);
-                        if (regexGradientMatches) {
-                            const parsedGradientString = regexGradientMatches[0];
-                            if (this.evaluateGradient(test, element, parsedGradientString, fgColor, opacity, fontSize, fontWeight, fontStyle, fontFamily, elementText)) {
-                                return;
-                            }
-                        }
-                        else {
-                            opacityAUX = parseFloat(parent.getElementStyleProperty('opacity', null));
-                            parsedBG = this.parseRGBString(parent.getElementStyleProperty('background', null), opacityAUX);
-                            elementAux = parent;
-                        }
-                    }
-                }
-                else {
-                    break;
-                }
-            }
-            if (parsedBG === undefined ||
-                (parsedBG.red === 0 && parsedBG.green === 0 && parsedBG.blue === 0 && parsedBG.alpha === 0)) {
-                parsedBG = { red: 255, green: 255, blue: 255, alpha: 1 };
-            }
-            let secondElement = elementAux;
-            if (parsedBG.alpha !== 1) {
-                let secondOpacity = opacityAUX;
-                let parsedSecondBG = parsedBG;
-                while (parsedSecondBG && parsedSecondBG.alpha !== 1) {
-                    const parent = secondElement.getElementParent();
-                    if (!parent) {
-                        break;
-                    }
-                    else {
-                        secondOpacity = parseFloat(parent.getElementStyleProperty('opacity', null));
-                        parsedSecondBG = this.parseRGBString(parent.getElementStyleProperty('background', null), secondOpacity);
-                        secondElement = parent;
-                    }
-                }
-                if (parsedSecondBG && parsedSecondBG.alpha === 1) {
-                    const outputRed = Math.round(parsedBG.red * parsedBG.alpha + parsedSecondBG.red * (1.0 - parsedBG.alpha));
-                    const outputGreen = Math.round(parsedBG.green * parsedBG.alpha + parsedSecondBG.green * (1.0 - parsedBG.alpha));
-                    const outputBlue = Math.round(parsedBG.blue * parsedBG.alpha + parsedSecondBG.blue * (1.0 - parsedBG.alpha));
-                    parsedBG = { red: outputRed, green: outputGreen, blue: outputBlue, alpha: 1 };
-                }
-            }
-            const parsedFG = this.parseRGBString(fgColor, opacity);
+        let parsedBG = this.parseRGBString(bgColor);
+        if (parsedBG)
+            parsedBG.alpha *= opacity;
+        let elementAux = element;
+        while (!parsedBG || (parsedBG.red === 0 && parsedBG.green === 0 && parsedBG.blue === 0 && parsedBG.alpha === 0)) {
+            const parent = elementAux.getElementParent();
+            if (!parent)
+                break;
+            const parentOpacity = parseFloat(parent.getElementStyleProperty('opacity', null) || '1');
+            parsedBG = this.parseRGBString(this.getBackground(parent));
+            if (parsedBG)
+                parsedBG.alpha *= parentOpacity;
+            elementAux = parent;
+        }
+        if (!parsedBG || parsedBG.alpha === 0) {
+            parsedBG = { red: 255, green: 255, blue: 255, alpha: 1 };
+        }
+        if (parsedBG.alpha < 1) {
+            parsedBG = this.flattenColors(parsedBG, { red: 255, green: 255, blue: 255, alpha: 1 });
+        }
+        const parsedFG = this.parseRGBString(fgColor);
+        if (parsedFG) {
+            parsedFG.alpha *= opacity;
             if (!this.equals(parsedBG, parsedFG)) {
-                if (this.isHumanLanguage(elementText)) {
+                const textToVerify = elementText || placeholder || "";
+                if (this.isHumanLanguage(textToVerify)) {
                     const contrastRatio = this.getContrast(parsedBG, parsedFG);
                     const isValid = this.hasValidContrastRatio(contrastRatio, fontSize, this.isBold(fontWeight));
-                    if (isValid) {
-                        test.verdict = evaluation_1.Verdict.PASSED;
-                        test.resultCode = 'P1';
-                        test.addElement(element);
-                        this.addTestResult(test);
-                    }
-                    else {
-                        test.verdict = evaluation_1.Verdict.FAILED;
-                        test.resultCode = 'F1';
-                        test.addElement(element);
-                        this.addTestResult(test);
-                    }
+                    test.verdict = isValid ? evaluation_1.Verdict.PASSED : evaluation_1.Verdict.FAILED;
+                    test.resultCode = isValid ? 'P1' : 'F1';
+                    test.addElement(element);
+                    this.addTestResult(test);
                 }
                 else {
                     test.verdict = evaluation_1.Verdict.PASSED;
@@ -189,168 +143,130 @@ class QW_ACT_R37 extends AtomicRule_object_1.AtomicRule {
             }
         }
     }
-    getBackground(element) {
-        const backgroundImage = element.getElementStyleProperty('background-image', null);
-        if (backgroundImage === 'none') {
-            let bg = element.getElementStyleProperty('background', null);
-            if (bg === '') {
-                bg = element.getElementStyleProperty('background-color', null);
-            }
-            return bg;
-        }
-        else {
-            return backgroundImage;
-        }
-    }
-    isImage(color) {
-        return (color.toLowerCase().includes('.jpeg') ||
-            color.toLowerCase().includes('.jpg') ||
-            color.toLowerCase().includes('.png') ||
-            color.toLowerCase().includes('.svg'));
+    isHumanLanguage(text) {
+        return window.DomUtils.isHumanLanguage(text);
     }
     evaluateGradient(test, element, parsedGradientString, fgColor, opacity, fontSize, fontWeight, fontStyle, fontFamily, elementText) {
         if (parsedGradientString.startsWith('linear-gradient')) {
-            const gradientDirection = this.getGradientDirection(parsedGradientString);
-            if (gradientDirection === 'to do') {
-                const colors = this.parseGradientString(parsedGradientString, opacity);
-                let isValid = true;
-                let contrastRatio;
-                const textSize = this.getTextSize(fontFamily.toLowerCase().replace(/['"]+/g, ''), parseInt(fontSize.replace('px', '')), this.isBold(fontWeight), fontStyle.toLowerCase().includes('italic'), elementText);
-                if (textSize !== -1) {
-                    const elementWidth = element.getElementStyleProperty('width', null);
-                    const lastCharRatio = textSize / parseInt(elementWidth.replace('px', ''));
-                    const lastCharBgColor = this.getColorInGradient(colors[0], colors[colors.length - 1], lastCharRatio);
-                    contrastRatio = this.getContrast(colors[0], this.parseRGBString(fgColor, opacity));
-                    isValid = isValid && this.hasValidContrastRatio(contrastRatio, fontSize, this.isBold(fontWeight));
-                    contrastRatio = this.getContrast(lastCharBgColor, this.parseRGBString(fgColor, opacity));
-                    isValid = isValid && this.hasValidContrastRatio(contrastRatio, fontSize, this.isBold(fontWeight));
-                }
-                else {
-                    for (const color of colors) {
-                        contrastRatio = this.getContrast(color, this.parseRGBString(fgColor, opacity));
-                        isValid = isValid && this.hasValidContrastRatio(contrastRatio, fontSize, this.isBold(fontWeight));
-                    }
-                }
-                if (isValid) {
-                    test.verdict = evaluation_1.Verdict.PASSED;
-                    test.resultCode = 'P3';
-                }
-                else {
-                    test.verdict = evaluation_1.Verdict.FAILED;
-                    test.resultCode = 'F2';
-                }
-            }
-            else if (gradientDirection === 'to left' || gradientDirection === 'to right') {
-                test.verdict = evaluation_1.Verdict.WARNING;
-                test.resultCode = 'W3';
+            const colors = this.parseGradientString(parsedGradientString);
+            let isValid = true;
+            const parsedFG = this.parseRGBString(fgColor);
+            if (!parsedFG)
+                return false;
+            parsedFG.alpha *= opacity;
+            const textSize = this.getTextSize(fontFamily.toLowerCase().replace(/['"]+/g, ''), parseInt(fontSize.replace('px', '')), this.isBold(fontWeight), fontStyle.toLowerCase().includes('italic'), elementText);
+            if (textSize !== -1) {
+                const elementWidth = element.getElementStyleProperty('width', null);
+                const lastCharRatio = textSize / parseInt(elementWidth.replace('px', ''));
+                const lastCharBgColor = this.getColorInGradient(colors[0], colors[colors.length - 1], lastCharRatio);
+                isValid = isValid && this.hasValidContrastRatio(this.getContrast(colors[0], parsedFG), fontSize, this.isBold(fontWeight));
+                isValid = isValid && this.hasValidContrastRatio(this.getContrast(lastCharBgColor, parsedFG), fontSize, this.isBold(fontWeight));
             }
             else {
-                test.verdict = evaluation_1.Verdict.WARNING;
-                test.resultCode = 'W3';
+                for (const color of colors) {
+                    isValid = isValid && this.hasValidContrastRatio(this.getContrast(color, parsedFG), fontSize, this.isBold(fontWeight));
+                }
             }
+            test.verdict = isValid ? evaluation_1.Verdict.PASSED : evaluation_1.Verdict.FAILED;
+            test.resultCode = isValid ? 'P3' : 'F2';
         }
         else {
+            test.verdict = evaluation_1.Verdict.WARNING;
             test.resultCode = 'W3';
         }
         test.addElement(element);
         this.addTestResult(test);
         return true;
     }
-    isHumanLanguage(text) {
-        return window.DomUtils.isHumanLanguage(text);
-    }
-    equals(color1, color2) {
-        return (color1.red === color2.red &&
-            color1.green === color2.green &&
-            color1.blue === color2.blue &&
-            color1.alpha === color2.alpha);
-    }
-    getGradientDirection(gradient) {
-        const direction = gradient.replace('linear-gradient(', '').split(',')[0];
-        if (direction) {
-            if (direction === '90deg')
-                return 'to right';
-            if (direction === '-90deg')
-                return 'to left';
-            return direction;
-        }
-        return undefined;
-    }
-    parseGradientString(gradient, opacity) {
+    parseGradientString(gradient) {
         const regex = /rgb(a?)\((\d+), (\d+), (\d+)+(, +(\d)+)?\)/gm;
         const colorsMatch = gradient.match(regex);
         const colors = [];
         for (const stringColor of colorsMatch || []) {
-            colors.push(this.parseRGBString(stringColor, opacity));
+            const parsed = this.parseRGBString(stringColor);
+            if (parsed)
+                colors.push(parsed);
         }
         return colors;
     }
-    parseRGBString(colorString, opacity) {
-        const rgbRegex = /^rgb\((\d+), (\d+), (\d+)\)/;
-        const rgbaRegex = /^rgba\((\d+), (\d+), (\d+), (\d*(\.\d+)?)\)/;
-        if (colorString === 'transparent') {
+    getColorInGradient(fromColor, toColor, ratio) {
+        return {
+            red: fromColor.red + (toColor.red - fromColor.red) * ratio,
+            green: fromColor.green + (toColor.green - fromColor.green) * ratio,
+            blue: fromColor.blue + (toColor.blue - fromColor.blue) * ratio,
+            alpha: 1
+        };
+    }
+    getTextSize(font, fontSize, bold, italic, text) {
+        return window.DomUtils.getTextSize(font, fontSize, bold, italic, text);
+    }
+    getBackground(element) {
+        const bgImg = element.getElementStyleProperty('background-image', null);
+        if (bgImg && bgImg !== 'none' && bgImg !== '')
+            return bgImg;
+        const bgColor = element.getElementStyleProperty('background-color', null);
+        return (bgColor && bgColor !== '' && bgColor !== 'transparent') ? bgColor : element.getElementStyleProperty('background', null);
+    }
+    isImage(s) {
+        const lower = s.toLowerCase();
+        return lower.includes('.jpg') || lower.includes('.png') || lower.includes('.svg') || lower.includes('url(');
+    }
+    parseRGBString(colorString) {
+        var _a;
+        if (!colorString || colorString === 'transparent' || colorString === 'none')
             return { red: 0, green: 0, blue: 0, alpha: 0 };
-        }
-        let match = colorString.match(rgbRegex);
-        if (match) {
+        const rgb = colorString.match(/^rgb\((\d+), (\d+), (\d+)\)/);
+        if (rgb)
+            return { red: parseInt(rgb[1]), green: parseInt(rgb[2]), blue: parseInt(rgb[3]), alpha: 1.0 };
+        const rgba = colorString.match(/^rgba\((\d+), (\d+), (\d+), (\d*(\.\d+)?)\)/);
+        if (rgba)
+            return { red: parseInt(rgba[1]), green: parseInt(rgba[2]), blue: parseInt(rgba[3]), alpha: Math.round(parseFloat(rgba[4]) * 100) / 100 };
+        try {
+            const color = new colorjs_io_1.default(colorString);
+            const srgb = color.to('srgb');
             return {
-                red: parseInt(match[1], 10),
-                green: parseInt(match[2], 10),
-                blue: parseInt(match[3], 10),
-                alpha: opacity
+                red: Math.round(srgb.coords[0] * 255),
+                green: Math.round(srgb.coords[1] * 255),
+                blue: Math.round(srgb.coords[2] * 255),
+                alpha: (_a = color.alpha) !== null && _a !== void 0 ? _a : 1
             };
         }
-        match = colorString.match(rgbaRegex);
-        if (match) {
-            return {
-                red: parseInt(match[1], 10),
-                green: parseInt(match[2], 10),
-                blue: parseInt(match[3], 10),
-                alpha: Math.round(parseFloat(match[4]) * 100) / 100
-            };
+        catch (e) {
+            return undefined;
         }
     }
-    getRelativeLuminance(red, green, blue) {
-        const rSRGB = red / 255;
-        const gSRGB = green / 255;
-        const bSRGB = blue / 255;
-        const r = rSRGB <= 0.03928 ? rSRGB / 12.92 : Math.pow((rSRGB + 0.055) / 1.055, 2.4);
-        const g = gSRGB <= 0.03928 ? gSRGB / 12.92 : Math.pow((gSRGB + 0.055) / 1.055, 2.4);
-        const b = bSRGB <= 0.03928 ? bSRGB / 12.92 : Math.pow((bSRGB + 0.055) / 1.055, 2.4);
-        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-    }
-    flattenColors(fgColor, bgColor) {
-        const fgAlpha = fgColor['alpha'];
-        const red = (1 - fgAlpha) * bgColor['red'] + fgAlpha * fgColor['red'];
-        const green = (1 - fgAlpha) * bgColor['green'] + fgAlpha * fgColor['green'];
-        const blue = (1 - fgAlpha) * bgColor['blue'] + fgAlpha * fgColor['blue'];
-        const alpha = fgColor['alpha'] + bgColor['alpha'] * (1 - fgColor['alpha']);
-        return { red: red, green: green, blue: blue, alpha: alpha };
+    flattenColors(fg, bg) {
+        const alpha = fg.alpha;
+        return {
+            red: Math.round((1 - alpha) * bg.red + alpha * fg.red),
+            green: Math.round((1 - alpha) * bg.green + alpha * fg.green),
+            blue: Math.round((1 - alpha) * bg.blue + alpha * fg.blue),
+            alpha: fg.alpha + bg.alpha * (1 - fg.alpha)
+        };
     }
-    isBold(fontWeight) {
-        return !!fontWeight && ['bold', 'bolder', '700', '800', '900'].includes(fontWeight);
+    getContrast(bg, fg) {
+        const finalFG = fg.alpha < 1 ? this.flattenColors(fg, bg) : fg;
+        const L1 = this.getLuminance(bg);
+        const L2 = this.getLuminance(finalFG);
+        return (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);
     }
-    getContrast(bgColor, fgColor) {
-        if (fgColor.alpha < 1) {
-            fgColor = this.flattenColors(fgColor, bgColor);
-        }
-        const bL = this.getRelativeLuminance(bgColor['red'], bgColor['green'], bgColor['blue']);
-        const fL = this.getRelativeLuminance(fgColor['red'], fgColor['green'], fgColor['blue']);
-        return (Math.max(fL, bL) + 0.05) / (Math.min(fL, bL) + 0.05);
+    getLuminance(c) {
+        const a = [c.red, c.green, c.blue].map(v => {
+            v /= 255;
+            return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+        });
+        return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
     }
     hasValidContrastRatio(contrast, fontSize, isBold) {
-        const isSmallFont = (isBold && parseFloat(fontSize) < 18.6667) || (!isBold && parseFloat(fontSize) < 24);
-        const expectedContrastRatio = isSmallFont ? 4.5 : 3;
-        return contrast >= expectedContrastRatio;
+        const size = parseFloat(fontSize);
+        const threshold = (isBold && size >= 18.66) || size >= 24 ? 3 : 4.5;
+        return (contrast + 0.02) >= threshold;
     }
-    getTextSize(font, fontSize, bold, italic, text) {
-        return window.DomUtils.getTextSize(font, fontSize, bold, italic, text);
+    isBold(fontWeight) {
+        return !!fontWeight && ['bold', 'bolder', '700', '800', '900'].includes(fontWeight);
     }
-    getColorInGradient(fromColor, toColor, ratio) {
-        const red = fromColor['red'] + (toColor['red'] - fromColor['red']) * ratio;
-        const green = fromColor['green'] + (toColor['green'] - fromColor['green']) * ratio;
-        const blue = fromColor['blue'] + (toColor['blue'] - fromColor['blue']) * ratio;
-        return { red: red, green: green, blue: blue, alpha: 1 };
+    equals(c1, c2) {
+        return c1.red === c2.red && c1.green === c2.green && c1.blue === c2.blue && c1.alpha === c2.alpha;
     }
 }
 exports.QW_ACT_R37 = QW_ACT_R37;
@@ -359,7 +275,6 @@ __decorate([
     applicability_1.ElementIsHTMLElement,
     (0, applicability_1.ElementIsNot)(['html', 'head', 'body', 'script', 'style', 'meta']),
     applicability_1.ElementIsVisible,
-    applicability_1.ElementHasText,
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)

package/dist/rules/QW-ACT-R76.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QW-ACT-R76.d.ts","sourceRoot":"","sources":["../../src/rules/QW-ACT-R76.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAQrD,OAAO,EAAE,IAAI,EAAW,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,cAAM,UAAW,SAAQ,UAAU;IAMjC,OAAO,CAAC,OAAO,EAAE,SAAS,GAAG,IAAI;IAwMjC,aAAa,CAAC,OAAO,EAAE,SAAS,GAAG,MAAM;IAczC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAS/B,gBAAgB,CACd,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,SAAS,EAClB,oBAAoB,EAAE,GAAG,EACzB,OAAO,EAAE,GAAG,EACZ,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,GAClB,OAAO;IAoDV,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAItC,MAAM,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,GAAG,OAAO;IASzC,oBAAoB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAY1D,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,GAAG;IAW3D,cAAc,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,GAAG;IAiCzD,oBAAoB,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM;IAYtE,aAAa,CAAC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,GAAG,GAAG;IAU9C,OAAO,CAAC,MAAM;IAId,WAAW,CAAC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,GAAG,MAAM;IAW/C,qBAAqB,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,OAAO;IAWnF,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM;IAIjG,kBAAkB,CAAC,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,GAAG,GAAG;CAOrE;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"QW-ACT-R76.d.ts","sourceRoot":"","sources":["../../src/rules/QW-ACT-R76.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAQrD,OAAO,EAAE,IAAI,EAAW,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGtD,cAAM,UAAW,SAAQ,UAAU;IAMjC,OAAO,CAAC,OAAO,EAAE,SAAS,GAAG,IAAI;IAwMjC,aAAa,CAAC,OAAO,EAAE,SAAS,GAAG,MAAM;IAczC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAS/B,gBAAgB,CACd,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,SAAS,EAClB,oBAAoB,EAAE,GAAG,EACzB,OAAO,EAAE,GAAG,EACZ,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,GAClB,OAAO;IAoDV,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAItC,MAAM,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,GAAG,OAAO;IASzC,oBAAoB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAY1D,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,GAAG;IAW3D,cAAc,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,GAAG;IAyDzD,oBAAoB,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM;IAYtE,aAAa,CAAC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,GAAG,GAAG;IAU9C,OAAO,CAAC,MAAM;IAId,WAAW,CAAC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,GAAG,MAAM;IAW/C,qBAAqB,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,OAAO;IAWnF,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM;IAIjG,kBAAkB,CAAC,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,GAAG,GAAG;CAOrE;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/rules/QW-ACT-R76.js

@@ -8,11 +8,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.QW_ACT_R76 = void 0;
 const applicability_1 = require("@qualweb/util/applicability");
 const evaluation_1 = require("@qualweb/core/evaluation");
 const AtomicRule_object_1 = require("../lib/AtomicRule.object");
+const colorjs_io_1 = __importDefault(require("colorjs.io"));
 class QW_ACT_R76 extends AtomicRule_object_1.AtomicRule {
     execute(element) {
         const disabledWidgets = window.disabledWidgets;
@@ -258,6 +262,8 @@ class QW_ACT_R76 extends AtomicRule_object_1.AtomicRule {
     parseRGBString(colorString, opacity) {
         const rgbRegex = /^rgb\((\d+), (\d+), (\d+)\)/;
         const rgbaRegex = /^rgba\((\d+), (\d+), (\d+), (\d*(\.\d+)?)\)/;
+        const oklchRegex = /^oklch\((\d*(\.\d+)?) (\d*(\.\d+)?) (\d*(\.\d+)?)\)/;
+        const oklch2Regex = /^oklch\((\d*(\.\d+)?) (\d*(\.\d+)?) (\d*(\.\d+)?) \/ (\d*(\.\d+)?)\)/;
         if (colorString === 'transparent') {
             return { red: 0, green: 0, blue: 0, alpha: 0 };
         }
@@ -279,6 +285,28 @@ class QW_ACT_R76 extends AtomicRule_object_1.AtomicRule {
                 alpha: Math.round(parseFloat(match[4]) * 100) / 100
             };
         }
+        match = colorString.match(oklch2Regex);
+        if (match) {
+            const oklchColor = new colorjs_io_1.default("oklch", [parseFloat(match[1]), parseFloat(match[2]), parseFloat(match[3])]);
+            const rgba = oklchColor.to("srgb");
+            return {
+                red: rgba.srgb.red,
+                green: rgba.srgb.green,
+                blue: rgba.srgb.blue,
+                alpha: parseFloat(match[4])
+            };
+        }
+        match = colorString.match(oklchRegex);
+        if (match) {
+            const oklchColor = new colorjs_io_1.default("oklch", [parseFloat(match[1]), parseFloat(match[2]), parseFloat(match[3])]);
+            const rgba = oklchColor.to("srgb");
+            return {
+                red: rgba.srgb.red,
+                green: rgba.srgb.green,
+                blue: rgba.srgb.blue,
+                alpha: rgba.alpha
+            };
+        }
     }
     getRelativeLuminance(red, green, blue) {
         const rSRGB = red / 255;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qualweb/act-rules",
-  "version": "0.7.4",
+  "version": "0.7.6",
   "description": "ACT rules module for qualweb web accessibility evaluator",
   "files": [
     "dist/*"
@@ -45,16 +45,17 @@
   "author": "João Vicente",
   "license": "ISC",
   "devDependencies": {
-    "@qualweb/core": "^0.8.3",
+    "@qualweb/core": "^0.8.6",
     "@qualweb/locale": "0.2.2",
     "@qualweb/qw-page": "0.3.2",
-    "@qualweb/util": "0.6.3",
+    "@qualweb/util": "0.6.5",
     "@tsconfig/recommended": "^1.0.3",
     "@types/mocha": "^10.0.6",
     "@types/node": "^16.11.11",
     "@types/node-fetch": "^2.6.11",
     "ajv": "^6.12.6",
     "chai": "4.5.0",
+    "colorjs.io": "^0.5.2",
     "mocha": "^10.2.0",
     "node-fetch": "^2.7.0",
     "prettier": "^3.1.1",