Add new base module

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## [Unreleased]
 
+- :sparkles: Add new `base` module.
+- :sparkles: Check for horizontal content overflows (`base` module).
+
 ## [2.1.2] - 2022-02-03
 
 - :bug: Fix parsing sitemaps.
@@ -79,7 +82,7 @@
 
 ## [1.4.0] - 2020-11-21
 
-- :bug: List all axe-core violation occurrences.
+- :bug: List all `axe-core` violation occurrences.
 - :hammer: Replace TravisCI with GitHub Actions.
 
 ## [1.3.1] - 2020-10-28
@@ -103,7 +106,7 @@
 
 ## [1.1.0] - 2020-10-25
 
-- :bug: Fix paths to axe-core and nunjucks templates.
+- :bug: Fix paths to `axe-core` and nunjucks templates.
 
 ## [1.0.0] - 2020-10-25
 

README.md

@@ -21,6 +21,7 @@ Check out a demo results page at [https://darekkay.com/evaluatory/demo/](https:/
 
 ## Modules
 
+- **base**: Custom built-in checks.
 - **axe-core**: Checks for accessibility issues using [axe-core](https://github.com/dequelabs/axe-core).
 - **html-validate**: Validates the HTML using [html-validate](https://html-validate.org).
 - **screenshot**: Takes a screenshot of the page.

config.example.json5

@@ -12,7 +12,7 @@
   ],
 
   // Modules to run
-  modules: ["axe-core", "html-validate", "screenshot"],
+  modules: ["base", "axe-core", "html-validate", "screenshot"],
 
   modulesConfig: {
     "axe-core": {

mock/example1.html

@@ -5,6 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Example page 1</title>
     <style>
+      main {
+        max-width: 500px;
+        width: 100%;
+      }
+
       .bad-contrast {
         color: #ccc;
       }
@@ -36,6 +41,7 @@
       <div class="bad-contrast phone-only">Bad contrast (Phone only)</div>
       <div class="bad-contrast">Bad contrast</div>
       <div class="bad-contrast">Bad contrast</div>
+      <div>Loremipsumdolorsitametconsecteturadipisicingelitaperiamducimuseiusexplicaboharumlaboriosamquodrationerecusandaesequivel</div>
     </main>
   </body>
 </html>

src/config.default.js

@@ -8,7 +8,7 @@ module.exports = {
   urls: [],
 
   // Modules to run
-  modules: ["axe-core", "html-validate", "screenshot"],
+  modules: ["base", "axe-core", "html-validate", "screenshot"],
 
   // Max number of parallel connections
   maxConnections: 5,
@@ -51,6 +51,11 @@ module.exports = {
 
   // Module configuration
   modulesConfig: {
+    base: {
+      // check for horizontal overflows
+      "horizontal-content-overflow": true,
+    },
+
     "axe-core": {
       rules: {
         // by default, all rules except "experimental" are executed

src/modules/base/index.js

@@ -0,0 +1,33 @@
+const { join } = require("path");
+
+const { render } = require("../../utils/render");
+const { getDocumentScrollWidth } = require("../../utils/playwright");
+
+/** Base custom checks */
+module.exports = async ({ page, moduleName, config }) => {
+  const moduleConfig = config.modulesConfig[moduleName];
+  const violations = [];
+
+  for (const { name: deviceName, options: deviceOptions } of config.devices) {
+    await page.setViewportSize(deviceOptions.viewport);
+
+    if (moduleConfig["horizontal-content-overflow"]) {
+      // check for horizontal overflows
+      const documentScrollWidth = await getDocumentScrollWidth(page);
+      if (documentScrollWidth > deviceOptions.viewport.width) {
+        violations.push({
+          icon: "icon-severity-moderate",
+          title: `Horizontal content overflow on ${deviceName}`,
+          description: `Device width: <strong>${deviceOptions.viewport.width}</strong>. Document scroll width: <strong>${documentScrollWidth}</strong>.`,
+        });
+      }
+    }
+  }
+
+  const issueCount = violations.length;
+  const html = render(join(__dirname, "template.njk"), {
+    issueCount,
+    violations,
+  });
+  return { issueCount, html };
+};

src/modules/base/template.njk

@@ -0,0 +1,15 @@
+{% set anchorId = "module-base" %}
+<h2 id="{{ anchorId }}">{% include "../../includes/anchor-link.njk" %} base</h2>
+
+<ul>
+  <li>
+    <strong class="{{ 'text-danger' if issueCount > 0 }}">{{ issueCount }} violation(s)</strong>
+  </li>
+</ul>
+
+{% for violation in violations %}
+  <section>
+    <h3><svg class="icon icon-severity {{ violation.icon }}" role="img" aria-hidden="true"><use xlink:href="#{{ violation.icon }}"></use></svg> {{ violation.title }}</h3>
+    <p>{{ violation.description | safe }}</p>
+  </section>
+{% endfor %}

src/utils/playwright.js

@@ -0,0 +1,5 @@
+module.exports = {
+  getDocumentScrollWidth: (page) =>
+    // eslint-disable-next-line no-undef
+    page.evaluate(() => window.document.documentElement.scrollWidth, {}),
+};