[WIP] Minimize conflicts across Styles

README.md

@@ -114,7 +114,7 @@ tufte:
 
 - [ ] Static Generator: Simplify options, add Page button
 - [x] Styles
-  - [ ] Minimize conflicts across styles
+  - [ ] Minimize conflicts across Styles
   - [ ] Naive night-mode: https://dev.to/wgao19/night-mode-with-mix-blend-mode-difference-23lm
 - [x] Components loader for Page Types (templates)
   - [ ] Separate metadata.html.twig into generalized and specific for templates

cypress.json

@@ -1 +1,32 @@
-{ "baseUrl": "http://127.0.0.1:8000/", "numTestsKeptInMemory": 100 }
+{
+  "baseUrl": "http://127.0.0.1:8000/",
+  "numTestsKeptInMemory": 1000,
+  "env": {
+    "context": {
+      "exclude": [["#query"], ["label[for=\"query\"]"], [".search-button"]]
+    },
+    "config": {
+      "runOnly": ["wcag2a", "section508", "best-practice"],
+      "rules": {
+        "landmark-complementary-is-top-level": { "enabled": false }
+      }
+    },
+    "routes": {
+      "docs": "/docs"
+    },
+    "routesBack": {
+      "index": "/",
+      "article": "/article",
+      "blog": "/blog",
+      "cv": "/cv",
+      "docs": "/docs"
+    },
+    "elements": {
+      "index": ["header[role=\"banner\"] .menu .search-button", "a"],
+      "article": ["a"],
+      "blog": ["a"],
+      "cv": ["a"],
+      "docs": ["a"]
+    }
+  }
+}

cypress/integration/accessibility/aria.js

@@ -0,0 +1,13 @@
+/// <reference types="Cypress" />
+
+for (const [index, route] of Object.entries(Cypress.env("routes"))) {
+  describe(`ARIA at ${index} (${route})`, () => {
+    before(function() {
+      cy.visit(route);
+      cy.injectAxe();
+    });
+    it("Has no violations", function() {
+      cy.checkA11y(Cypress.env("context"), Cypress.env("config"));
+    });
+  });
+}

cypress/integration/accessibility/contrast.spec.js

@@ -0,0 +1,63 @@
+/// <reference types="Cypress" />
+
+// cy.get('header[role="banner"] .menu .search input[type="search"]')
+//   .focus()
+//   .type("Hello World");
+// cy.screenshot(route + "/styles/" + style);
+
+for (const [index, route] of Object.entries(Cypress.env("routes"))) {
+  describe(`Contrast at ${index} (${route})`, () => {
+    beforeEach(function() {
+      cy.visit(route);
+      cy.injectAxe();
+    });
+    it(index + " has active elements", function() {
+      expect(Object.keys(Cypress.env("elements"))).to.include(index);
+      expect(Cypress.env("elements")[index].length).to.be.at.least(1);
+    });
+    Cypress.env("styles").forEach(style => {
+      it(style + " has sufficient contrast", function() {
+        cy.document().then(doc => {
+          let cssLink = doc.querySelector(
+            "link[href^='/user/themes/scholar/css/styles/']"
+          );
+          if (cssLink) {
+            cssLink.setAttribute(
+              "href",
+              "/user/themes/scholar/css/styles/" + style
+            );
+            doc.querySelector("title").innerHTML = style;
+          }
+        });
+        const config = Cypress.env("config");
+        config.runOnly = ["cat.color"];
+        cy.checkA11y(Cypress.env("context"), config);
+      });
+      if (
+        index in Cypress.env("elements") &&
+        Cypress.env("elements")[index].length > 0
+      ) {
+        it(style + " has sufficient active contrast", function() {
+          cy.document().then(doc => {
+            let cssLink = doc.querySelector(
+              "link[href^='/user/themes/scholar/css/styles/']"
+            );
+            if (cssLink) {
+              cssLink.setAttribute(
+                "href",
+                "/user/themes/scholar/css/styles/" + style
+              );
+              doc.querySelector("title").innerHTML = style;
+            }
+          });
+          Cypress.env("elements")[index].forEach(element => {
+            cy.get(element).invoke("attr", "class", "active");
+          });
+          const config = Cypress.env("config");
+          config.runOnly = ["cat.color"];
+          cy.checkA11y(Cypress.env("context"), config);
+        });
+      }
+    });
+  });
+}

cypress/integration/accessibility/contrast/amber-contrast.spec.js

@@ -0,0 +1,48 @@
+/// <reference types="Cypress" />
+
+// cy.get('header[role="banner"] .menu .search input[type="search"]')
+//   .focus()
+//   .type("Hello World");
+// cy.screenshot("/docs" + "/styles/" + style);
+
+describe(`Contrast at ${"docs"} (${"/docs"})`, () => {
+  beforeEach(function() {
+    cy.visit("/docs/security/overview?theme=amber");
+    cy.injectAxe();
+  });
+  it("amber.css" + " has sufficient contrast", function() {
+    // cy.document().then(doc => {
+    //   let cssLink = doc.querySelector(
+    //     "link[href^='/user/themes/scholar/css/styles/']"
+    //   );
+    //   if (cssLink) {
+    //     cssLink.setAttribute(
+    //       "href",
+    //       "/user/themes/scholar/css/styles/" + "amber.css"
+    //     );
+    //     doc.querySelector("title").innerHTML = "amber.css";
+    //   }
+    // });
+    const config = Cypress.env("config");
+    config.runOnly = ["cat.color"];
+    cy.checkA11y(Cypress.env("context"), config);
+  });
+  it("amber.css" + " has sufficient active contrast", function() {
+    // cy.document().then(doc => {
+    //   let cssLink = doc.querySelector(
+    //     "link[href^='/user/themes/scholar/css/styles/']"
+    //   );
+    //   if (cssLink) {
+    //     cssLink.setAttribute(
+    //       "href",
+    //       "/user/themes/scholar/css/styles/" + "amber.css"
+    //     );
+    //     doc.querySelector("title").innerHTML = "amber.css";
+    //   }
+    // });
+    cy.get("a").invoke("attr", "class", "active");
+    const config = Cypress.env("config");
+    config.runOnly = ["cat.color"];
+    cy.checkA11y(Cypress.env("context"), config);
+  });
+});

cypress/plugins/index.js

@@ -15,21 +15,12 @@ const path = require("path");
 const fs = require("fs");
 
 module.exports = (on, config) => {
-  config.env.routes = ["/", "/article", "/blog", "/cv", "/docs"];
-  config.env.stylesFolder = path.join(__dirname, "../../css/styles");
+  // config.env.stylesFolder = path.join(__dirname, "../../css/styles");
   let styles = [];
-  var files = fs.readdirSync(config.env.stylesFolder);
+  var files = fs.readdirSync(path.join(__dirname, "../../css/styles"));
   files.forEach(function(file) {
     styles.push(file);
   });
   config.env.styles = styles;
-  config.env.testElementsIndex = [
-    'header[role="banner"] h1 a',
-    'header[role="banner"] .links a:first-of-type',
-    "aside article:first-of-type header a:first-of-type",
-    "aside article:first-of-type footer a:first-of-type",
-    'header[role="banner"] .menu .search-button',
-    "footer p a",
-  ];
   return config;
 };