add more testcases and implement rule better

Co-authored-by: Michiel Pauw <[email protected]> Co-authored-by: NioniosSpeed <[email protected]>
koddsson · May 28, 2024 · 9d81dcf · 9d81dcf
1 parent 21aa07c
commit 9d81dcf
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 4 deletions.
diff --git a/src/rules/html-has-lang.ts b/src/rules/html-has-lang.ts
@@ -6,7 +6,10 @@ const url = `https://dequeuniversity.com/rules/axe/4.4/${id}`;
 
 export default function (el: Element): AccessibilityError[] {
   const htmlElement = el.ownerDocument.documentElement;
-  if (!htmlElement.hasAttribute("lang")) {
+  const langAttribute = htmlElement.getAttribute("lang");
+
+  // Report error if the `lang` attribute is not on the element or if it's just whitespace
+  if (!langAttribute || langAttribute?.trim() === "") {
     return [{ element: htmlElement, url, text }];
   }
   return [];

diff --git a/tests/html-has-lang.ts b/tests/html-has-lang.ts
@@ -1,10 +1,76 @@
-import { expect } from "@open-wc/testing";
+import { expect, fixture, html, nextFrame } from "@open-wc/testing";
 import { scan } from "../src/scanner";
 import htmlHasLang from "../src/rules/html-has-lang";
 
+/**
+ * Create a `<html></html>` in a iframe so that we aren't using the `<html>` element of the test runner.
+ */
+async function createHTMLElement(htmlString: string): Promise<HTMLElement> {
+  return (
+    await fixture(html`<iframe srcdoc="<!DOCTYPE html>${htmlString}"></iframe>`)
+  ).contentDocument // @ts-expect-error Just trust me bro
+    .querySelector("html")!;
+}
+
 describe("html-has-lang", function () {
-  it("empty alt attribute fails", async () => {
-    const container = document.createElement("html");
+  it("html element without a lang attribute fails", async () => {
+    const container = await createHTMLElement("<html></html>");
+
+    // Not sure why there's a timing issue here but this seems to fix it
+    await nextFrame();
+
+    const results = (await scan(container, [htmlHasLang])).map(
+      ({ text, url }) => {
+        return { text, url };
+      },
+    );
+
+    expect(results).to.eql([
+      {
+        text: "<html> element must have a lang attribute",
+        url: "https://dequeuniversity.com/rules/axe/4.4/html-has-lang",
+      },
+    ]);
+  });
+
+  it("html element with a empty lang attribute fails", async () => {
+    const container = await createHTMLElement('<html lang=""></html>');
+
+    const results = (await scan(container, [htmlHasLang])).map(
+      ({ text, url }) => {
+        return { text, url };
+      },
+    );
+
+    expect(results).to.eql([
+      {
+        text: "<html> element must have a lang attribute",
+        url: "https://dequeuniversity.com/rules/axe/4.4/html-has-lang",
+      },
+    ]);
+  });
+
+  it("html element with a boolean lang attribute fails", async () => {
+    const container = await createHTMLElement("<html lang></html>");
+
+    const results = (await scan(container, [htmlHasLang])).map(
+      ({ text, url }) => {
+        return { text, url };
+      },
+    );
+
+    expect(results).to.eql([
+      {
+        text: "<html> element must have a lang attribute",
+        url: "https://dequeuniversity.com/rules/axe/4.4/html-has-lang",
+      },
+    ]);
+  });
+
+  it("html element with a whitespace only lang attribute fails", async () => {
+    const container = await createHTMLElement(
+      '<html lang="                 "></html>',
+    );
 
     const results = (await scan(container, [htmlHasLang])).map(
       ({ text, url }) => {