@uuv/a11y 1.0.0-beta.4 → 1.0.0-beta.40

package/dist/lib/reference/rgaa/selector-helper.d.ts

@@ -3,7 +3,6 @@ declare class SelectorRule {
     readonly ATTRIBUTES: string[];
     constructor(SELECTOR: string, ATTRIBUTES: string[]);
     buildSelectorWithAttributes(): string[];
-    buildSelectorWithoutAttributes(): string;
 }
 export declare const informativeContent: {
     image: SelectorRule;
@@ -14,4 +13,44 @@ export declare const informativeContent: {
     svg: SelectorRule;
     canvas: SelectorRule;
 };
+export declare const siblingElement: {
+    button: SelectorRule;
+    a: SelectorRule;
+};
+/** CSS SELECTOR HELPER *******/
+declare class CssSelectorRule {
+    readonly attributes: string[];
+    readonly selector: string;
+    readonly role: string;
+    constructor(attributes: string[], selector?: string, role?: string);
+    buildSelector(overrideSelector?: string[], overrideRole?: string | undefined): string[];
+}
+export declare const commonCssSelector: {
+    ariaDescribedBy: string[];
+    title: string[];
+    ariaLabelledBy: string[];
+    ariaLabel: string[];
+};
+export declare const tableCssSelector: {
+    complexTh: string[];
+    complexRowHeader: string[];
+    complexColumnHeader: string[];
+};
+export declare const table: {
+    selector: {
+        withFormatting: string;
+        complex: string[];
+        withData: string;
+    };
+    noCaption: CssSelectorRule;
+    caption: CssSelectorRule;
+    summary: CssSelectorRule;
+    ariaDescribedBy: CssSelectorRule;
+    title: CssSelectorRule;
+    ariaLabel: CssSelectorRule;
+    ariaLabelledBy: CssSelectorRule;
+    thColumnHeader: CssSelectorRule;
+    thRowHeader: CssSelectorRule;
+    hasComplexHeader: CssSelectorRule;
+};
 export {};

package/dist/lib/reference/rgaa/selector-helper.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.informativeContent = void 0;
+exports.table = exports.tableCssSelector = exports.commonCssSelector = exports.siblingElement = exports.informativeContent = void 0;
 class SelectorRule {
     SELECTOR;
     ATTRIBUTES;
@@ -11,15 +11,11 @@ class SelectorRule {
         this.ATTRIBUTES = ATTRIBUTES;
     }
     buildSelectorWithAttributes() {
-        return this.ATTRIBUTES.map(value => `${this.SELECTOR}[${value}]`);
-    }
-    buildSelectorWithoutAttributes() {
-        const attributes = this.ATTRIBUTES.map(value => `:not([${value}])`);
-        const emptyAttributes = this.ATTRIBUTES.map(value => `[${value}='']`);
-        const selectors = [];
-        selectors.push(`${this.SELECTOR}${attributes.join("")}`);
-        selectors.push(`${this.SELECTOR}${emptyAttributes.join("")}`);
-        return selectors.join(",");
+        const result = this.ATTRIBUTES.map(value => `${this.SELECTOR}[${value}]`);
+        if (result.length === 0) {
+            return [this.SELECTOR];
+        }
+        return result;
     }
 }
 exports.informativeContent = {
@@ -31,3 +27,79 @@ exports.informativeContent = {
     svg: new SelectorRule("svg:not(a svg,button svg)", ["title", "aria-labelledby", "aria-label"]),
     canvas: new SelectorRule("canvas:not(:empty)", ["title", "aria-labelledby", "aria-label"]),
 };
+exports.siblingElement = {
+    button: new SelectorRule("button", []),
+    a: new SelectorRule("a[href]", []),
+};
+/** CSS SELECTOR HELPER *******/
+class CssSelectorRule {
+    attributes;
+    selector;
+    role;
+    constructor(attributes, selector = "", role = selector) {
+        this.attributes = attributes;
+        this.selector = selector;
+        this.role = role;
+        this.selector = selector;
+        this.role = role;
+        this.attributes = attributes;
+    }
+    buildSelector(overrideSelector = [], overrideRole = overrideSelector[0]) {
+        if (overrideSelector && overrideSelector.length === 0 && !overrideRole) {
+            console.error("selector or role must be provided");
+        }
+        const selectors = [];
+        if (overrideSelector.length > 0) {
+            selectors.push(...overrideSelector);
+        }
+        if (overrideRole) {
+            selectors.push(`[role=${overrideRole}]`);
+        }
+        if (this.attributes.length === 0) {
+            return selectors;
+        }
+        const result = [];
+        selectors.forEach(selector => {
+            this.attributes.forEach(attribute => {
+                result.push(`${selector}${attribute}`);
+            });
+        });
+        return result;
+    }
+}
+exports.commonCssSelector = {
+    ariaDescribedBy: ["[aria-describedby]:not([aria-describedby=''])"],
+    title: ["[title]:not([title=''])"],
+    ariaLabelledBy: ["[aria-labelledby]:not([aria-labelledby=''])"],
+    ariaLabel: ["[aria-label]:not([aria-label=''])"]
+};
+exports.tableCssSelector = {
+    complexTh: [":has(tr:not(:first-child) th:first-child)"],
+    complexRowHeader: [":has([role=row]:not(:first-child) [role=rowheader])"],
+    complexColumnHeader: [":has([role=row]:not(:first-child) [role=columnheader])"],
+};
+exports.table = {
+    selector: {
+        withFormatting: "table[role=presentation]",
+        complex: [
+            ...exports.tableCssSelector.complexTh,
+            ...exports.tableCssSelector.complexRowHeader,
+            ...exports.tableCssSelector.complexColumnHeader
+        ].map(value => `table:not([role=presentation])${value}`),
+        withData: "table:not([role=presentation])"
+    },
+    noCaption: new CssSelectorRule([":not(:has(> caption))", ":has(> caption:empty)"]),
+    caption: new CssSelectorRule(["> caption:not(:empty)"]),
+    summary: new CssSelectorRule(["[summary]:not([summary=''])"]),
+    ariaDescribedBy: new CssSelectorRule(exports.commonCssSelector.ariaDescribedBy),
+    title: new CssSelectorRule(exports.commonCssSelector.title),
+    ariaLabel: new CssSelectorRule(exports.commonCssSelector.ariaLabel),
+    ariaLabelledBy: new CssSelectorRule(exports.commonCssSelector.ariaLabelledBy),
+    thColumnHeader: new CssSelectorRule([" tr:first-child th"]),
+    thRowHeader: new CssSelectorRule([" tr:not(:first-child) th:first-child"]),
+    hasComplexHeader: new CssSelectorRule([
+        ...exports.tableCssSelector.complexTh,
+        ...exports.tableCssSelector.complexRowHeader,
+        ...exports.tableCssSelector.complexColumnHeader
+    ])
+};

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uuv/a11y",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.39",
   "type": "commonjs",
   "author": "Louis Fredice NJAKO MOLOM (https://github.com/luifr10) & Stanley SERVICAL (https://github.com/stanlee974)",
   "description": "A javascript lib for running a11y validation based on multiple reference(RGAA, etc)",
@@ -32,12 +32,14 @@
   ],
   "scripts": {
     "package": "npm pack --pack-destination=\"../../dist/packages\"",
-    "test": "jest",
-    "test:run": "jest --coverage"
+    "test": "npm run e2e-test:run --",
+    "e2e-test:run": "jest --coverage",
+    "dev": "ts-node watch.ts"
   },
   "dependencies": {
     "@testing-library/dom": "^9.3.3",
-    "dom-accessibility-api": "^0.6.3",
+    "dom-accessibility-api": "^0.7.0",
+    "emulate-tab": "^1.2.1",
     "jquery": "^3.7.1",
     "lodash": "^4.17.21",
     "rxjs": "^7.8.1"
@@ -48,12 +50,14 @@
     "@babel/preset-typescript": "^7.23.3",
     "babel-loader": "^9.1.3",
     "babel-plugin-lodash": "^3.3.4",
-    "jest-puppeteer": "^9.0.2",
-    "puppeteer": "^21.6.0",
+    "chokidar": "^3.5.3",
+    "jest-junit": "^16.0.0",
+    "jest-puppeteer": "10.0.1",
+    "puppeteer": "22.15.0",
     "tslib": "^2.3.0",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^5.0.0"
   },
   "files": [
     "dist/**/*",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uuv/a11y",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.40",
   "type": "commonjs",
   "author": "Louis Fredice NJAKO MOLOM (https://github.com/luifr10) & Stanley SERVICAL (https://github.com/stanlee974)",
   "description": "A javascript lib for running a11y validation based on multiple reference(RGAA, etc)",
@@ -32,12 +32,14 @@
   ],
   "scripts": {
     "package": "npm pack --pack-destination=\"../../dist/packages\"",
-    "test": "jest",
-    "test:run": "jest --coverage"
+    "test": "npm run e2e-test:run --",
+    "e2e-test:run": "jest --coverage",
+    "dev": "ts-node watch.ts"
   },
   "dependencies": {
     "@testing-library/dom": "^9.3.3",
-    "dom-accessibility-api": "^0.6.3",
+    "dom-accessibility-api": "^0.7.0",
+    "emulate-tab": "^1.2.1",
     "jquery": "^3.7.1",
     "lodash": "^4.17.21",
     "rxjs": "^7.8.1"
@@ -48,12 +50,14 @@
     "@babel/preset-typescript": "^7.23.3",
     "babel-loader": "^9.1.3",
     "babel-plugin-lodash": "^3.3.4",
-    "jest-puppeteer": "^9.0.2",
-    "puppeteer": "^21.6.0",
+    "chokidar": "^3.5.3",
+    "jest-junit": "^16.0.0",
+    "jest-puppeteer": "10.0.1",
+    "puppeteer": "22.15.0",
     "tslib": "^2.3.0",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^5.0.0"
   },
   "files": [
     "dist/**/*",