Invalid Links Rule

demo/index.html

@@ -66,6 +66,7 @@ <H1>this is a really big heading tag. 51 chars long even. this is a really big h
           <p> - List item</p>
           <p>Split breaks:</p>
           <p>1. List Item<br>2. List Item</p>
+          <a href="weird link">Link</a>
         </textarea>
     </div>
   </div>

package.json

@@ -63,6 +63,7 @@
     "axios": "^0.18.0",
     "format-message": "^6",
     "format-message-generate-id": "^6",
+    "node-fetch": "^2.1.2",
     "prevent-default": "^1.0.0",
     "react": "^0.14.8 || ^15.0.0",
     "react-aria-live": "^1.0.4",

src/rules/__tests__/__snapshots__/valid-links.js.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`data returns the proper object 1`] = `
+Object {
+  "href": null,
+}
+`;
+
+exports[`form returns the proper object 1`] = `
+Array [
+  Object {
+    "dataKey": "href",
+    "disabledIf": [Function],
+    "label": "Ensure this link is correct.",
+  },
+  Object {
+    "checkbox": true,
+    "dataKey": "ignore",
+    "label": "Ignore this link in the future.",
+  },
+]
+`;
+
+exports[`message returns the proper message 1`] = `"This link could not be verified."`;
+
+exports[`why returns the proper why message 1`] = `"Links should not be broken."`;

src/rules/__tests__/valid-links.js

@@ -0,0 +1,89 @@
+import fetch from "node-fetch"
+import rule from "../valid-links"
+
+let body, a
+
+beforeEach(() => {
+  body = document.createElement("body")
+  a = document.createElement("a")
+  body.appendChild(a)
+  a.textContent = "Link Text"
+  window.fetch = () => Promise.resolve({ ok: true })
+})
+
+describe("test", () => {
+  test("returns true if not A element", async () => {
+    expect(await rule.test(document.createElement("div"))).toBe(true)
+  })
+
+  test("returns true for valid links", async () => {
+    window.fetch = () => Promise.resolve({ ok: true })
+    a.setAttribute("href", "https://www.instructure.com/")
+    expect(await rule.test(a)).toBe(true)
+  })
+
+  test("returns false for invalid links", async () => {
+    window.fetch = () => Promise.resolve({ ok: false })
+    a.setAttribute("href", "http://something weird")
+    expect(await rule.test(a)).toBe(false)
+    a.setAttribute("href", "plaintext")
+    expect(await rule.test(a)).toBe(false)
+    window.fetch = () => Promise.reject(new Error())
+    a.setAttribute("href", "http://something-valid-but-not-reachable/123")
+    expect(await rule.test(a)).toBe(false)
+  })
+})
+
+describe("data", () => {
+  test("returns the proper object", () => {
+    expect(rule.data(a)).toMatchSnapshot()
+  })
+})
+
+describe("form", () => {
+  test("returns the proper object", () => {
+    expect(rule.form(a)).toMatchSnapshot()
+  })
+})
+
+describe("update", () => {
+  test("returns same element", () => {
+    expect(rule.update(a, {})).toBe(a)
+  })
+  test("does not change href if href does not change", () => {
+    const href = "http://example.com"
+    a.setAttribute("href", href)
+    expect(rule.update(a, { href })).toBe(a)
+  })
+  test("changes href if it has been changed", () => {
+    const href = "bad"
+    a.setAttribute("href", href)
+    rule.update(a, { href: "https://www.instructure.com/" })
+    expect(a.getAttribute("href")).toBe("https://www.instructure.com/")
+  })
+  test("does not change href if href does not change", () => {
+    const href = "http://example.com"
+    a.setAttribute("href", href)
+    expect(
+      rule.update(a, { ignore: true }).getAttribute("data-ignore-a11y-check")
+    ).toBe("true")
+  })
+})
+
+describe("rootNode", () => {
+  test("returns the parentNode of an element", () => {
+    expect(rule.rootNode(a).tagName).toBe("BODY")
+  })
+})
+
+describe("message", () => {
+  test("returns the proper message", () => {
+    expect(rule.message()).toMatchSnapshot()
+  })
+})
+
+describe("why", () => {
+  test("returns the proper why message", () => {
+    expect(rule.why()).toMatchSnapshot()
+  })
+})

src/rules/index.js

@@ -10,6 +10,7 @@ import headingsSequence from "./headings-sequence"
 import imageAltLength from "./img-alt-length"
 import paragraphsForHeadings from "./paragraphs-for-headings"
 import listStructure from "./list-structure"
+import validLinks from "./valid-links"
 
 export default [
   imgAlt,
@@ -23,5 +24,6 @@ export default [
   headingsSequence,
   imageAltLength,
   paragraphsForHeadings,
-  listStructure
+  listStructure,
+  validLinks
 ]

src/rules/valid-links.js

@@ -0,0 +1,109 @@
+import formatMessage from "../format-message"
+
+const isValidURL = url => {
+  try {
+    // the URL constructor is more accurate than regex
+    // but not supported in IE.
+    new URL(url)
+    return true
+  } catch (_) {
+    // If this does throw, either:
+    // 1. the url is invalid
+    // 2. the URL constructor is not there.
+    // The user will be prompted to check the link manually.
+    return false
+  }
+}
+
+const debouncedFetch = (() => {
+  let timeout = null
+
+  return (...args) =>
+    new Promise((resolve, reject) => {
+      clearTimeout(timeout)
+      timeout = setTimeout(() => {
+        fetch(...args)
+          .then(resolve)
+          .catch(reject)
+      }, 500)
+    })
+})()
+
+export default {
+  test: function(elem) {
+    return new Promise((resolve, reject) => {
+      if (elem.tagName !== "A") return resolve(true)
+      const href = elem.getAttribute("href")
+
+      // If url is invalid
+      if (!isValidURL(href)) return resolve(false)
+
+      // If url is valid, do a HEAD request.
+      debouncedFetch(href, { method: "HEAD" })
+        .then(res => resolve(res.ok))
+        .catch(() => resolve(false))
+
+      // This will always work in jest because there
+      // node does not check cross-origin requests,
+      // but this will cause issues in the browser.
+      //
+      // In the browser, the request will still fire
+      // but will will fail for all links that are
+      // not same-origin.
+      //
+      // For cross-origin urls, the user will be
+      // prompted to check the link, or check ignore
+      // if they so choose.
+      //
+      // Workarounds:
+      //  * Create a service to proxy the request
+      //  * Do something crazy with web workers
+      //  * and importScripts (plausible).
+    })
+  },
+
+  data: elem => {
+    return {
+      href: elem.getAttribute("href")
+    }
+  },
+
+  form: () => [
+    {
+      label: formatMessage("Ensure this link is correct."),
+      dataKey: "href",
+      disabledIf: data => data.ignore
+    },
+    {
+      label: formatMessage("Ignore this link in the future."),
+      checkbox: true,
+      dataKey: "ignore"
+    }
+  ],
+
+  update: function(elem, data) {
+    const rootElem = elem.parentNode
+
+    if (data.ignore) {
+      elem.setAttribute("data-ignore-a11y-check", "true")
+    }
+
+    if (data.href !== elem.getAttribute("href")) {
+      elem.setAttribute("href", data.href)
+    }
+
+    return elem
+  },
+
+  rootNode: function(elem) {
+    return elem.parentNode
+  },
+
+  // Note, these messages are poor and should be replaced with
+  // better text.
+  message: () => formatMessage("This link could not be verified."),
+
+  why: () => formatMessage("Links should not be broken."),
+
+  link: " --- fill in --- "
+}