koddsson · koddsson · Jun 26, 2024 · Jun 26, 2024 · Jun 26, 2024 · Jun 26, 2024
diff --git a/generate-act-tests.js b/generate-act-tests.js
@@ -113,7 +113,6 @@ const rulesToIgnore = [
   "off6ek",
   "oj04fd",
   "ucwvc8",
-  "ye5d6e",
   "bf051a",
 ];
 
@@ -172,9 +171,9 @@ const parser = new DOMParser();
 
 describe("[${ruleId}]${ruleName}", function () {
   it("${testcaseTitle} (${exampleURL})", async () => {
-    const document = parser.parseFromString(\`${html}\`, 'text/html');
+    const el = parser.parseFromString(\`${html}\`, 'text/html');
 
-    const results = (await scan(document.body)).map(({ text, url }) => {
+    const results = (await scan(el)).map(({ text, url }) => {
       return { text, url };
     });
 

diff --git a/src/rules/area-alt.ts b/src/rules/area-alt.ts
@@ -5,7 +5,7 @@ const text = "Elements must only use allowed ARIA attributes";
 const url =
   "https://dequeuniversity.com/rules/axe/4.4/area-alt?application=RuleDescription";
 
-export function areaAlt(el: Element): AccessibilityError[] {
+export function areaAlt(el: Document | Element): AccessibilityError[] {
   const errors = [];
 
   for (const element of querySelectorAll("map area[href]", el)) {

diff --git a/src/rules/aria-allowed-attr.ts b/src/rules/aria-allowed-attr.ts
@@ -11,7 +11,7 @@ const ariaMappings: Record<string, string | undefined> = {
   I: undefined,
 };
 
-export function ariaAllowedAttr(el: Element): AccessibilityError[] {
+export function ariaAllowedAttr(el: Document | Element): AccessibilityError[] {
   const errors = [];
   const selector = Object.keys(ariaMappings).join(",");
   for (const element of querySelectorAll(selector, el)) {

diff --git a/src/rules/aria-hidden-body.ts b/src/rules/aria-hidden-body.ts
@@ -4,12 +4,12 @@ const text = 'aria-hidden="true" must not be present on the document <body>';
 const url =
   "https://dequeuniversity.com/rules/axe/4.4/aria-hidden-body?application=RuleDescription";
 
-export function ariaHiddenBody(el: Element): AccessibilityError[] {
-  const element = el.ownerDocument.body;
-  if (element.getAttribute("aria-hidden") === "true") {
+export function ariaHiddenBody(el: Document | Element): AccessibilityError[] {
+  const body = el instanceof Document ? el.body : el.ownerDocument.body;
+  if (body.getAttribute("aria-hidden") === "true") {
     return [
       {
-        element,
+        element: body,
         text,
         url,
       },

diff --git a/src/rules/aria-roles.ts b/src/rules/aria-roles.ts
@@ -24,7 +24,7 @@ const validRoles = [
   "contentinfo",
 ];
 
-export default function (el: Element): AccessibilityError[] {
+export default function (el: Document | Element): AccessibilityError[] {
   const errors = [];
   for (const element of querySelectorAll("[role]", el)) {
     const role = element.getAttribute("role");

diff --git a/src/rules/aria-tooltip-name.ts b/src/rules/aria-tooltip-name.ts
@@ -31,7 +31,8 @@ function hasAccessibleText(el: Element): boolean {
   return true;
 }
 
-export function ariaTooltipName(el: Element): AccessibilityError[] {
+export function ariaTooltipName(el: Element | Document): AccessibilityError[] {
+  el = el instanceof Document ? el.documentElement : el;
   const errors = [];
   const tooltips = querySelectorAll("[role=tooltip]", el);
   if (el.matches("[role=tooltip]")) tooltips.push(el);

diff --git a/src/rules/aria-valid-attr-value.ts b/src/rules/aria-valid-attr-value.ts
@@ -82,7 +82,10 @@ function valid(el: Element, attribute: string, info: Info) {
   return false;
 }
 
-export function ariaValidAttrValue(el: Element): AccessibilityError[] {
+export function ariaValidAttrValue(
+  el: Element | Document,
+): AccessibilityError[] {
+  el = el instanceof Document ? el.documentElement : el;
   const errors = [];
   const selector = Object.keys(ariaAttributes)
     .map((attributeName) => `[${attributeName}]`)

diff --git a/src/rules/aria-valid-attr.ts b/src/rules/aria-valid-attr.ts
@@ -11,7 +11,8 @@ const url = `https://dequeuniversity.com/rules/axe/4.4/${id}`;
 
 // TODO: Maybe use https://github.com/A11yance/aria-query for this?
 
-export default function (el: Element): AccessibilityError[] {
+export default function (el: Element | Document): AccessibilityError[] {
+  el = el instanceof Document ? el.documentElement : el;
   const errors = [];
   const selector = "*";
   const elements = querySelectorAll(selector, el);

diff --git a/src/rules/audio-caption.ts b/src/rules/audio-caption.ts
@@ -5,7 +5,8 @@ const id = "audio-caption";
 const text = "<audio> elements must have a captions <track>";
 const url = `https://dequeuniversity.com/rules/axe/4.4/${id}`;
 
-export default function (el: Element): AccessibilityError[] {
+export default function (el: Element | Document): AccessibilityError[] {
+  el = el instanceof Document ? el.documentElement : el;
   const errors = [];
   const elements = querySelectorAll("audio", el);
   if (el.matches("audio")) {

diff --git a/src/rules/button-name.ts b/src/rules/button-name.ts
@@ -18,10 +18,10 @@ function getElementText(element: Element): string {
   return label.trim();
 }
 
-export default function (el: Element): AccessibilityError[] {
+export default function (el: Document | Element): AccessibilityError[] {
   const errors = [];
   const elements = querySelectorAll("button", el);
-  if (el.matches("button")) {
+  if (el instanceof HTMLElement && el.matches("button")) {
     elements.push(el as HTMLButtonElement);
   }
   for (const element of elements) {

diff --git a/src/rules/bypass.ts b/src/rules/bypass.ts
@@ -0,0 +1,31 @@
+import { AccessibilityError } from "../scanner";
+import { querySelector, querySelectorAll } from "../utils";
+
+const id = "ye5d6e";
+const url = `https://act-rules.github.io/rules/${id}`;
+const text = "Document has an instrument to move focus to non-repeated content";
+
+// TODO: The tests don't work yet because the document doesn't load correctly in the test harness.
+export default function (el: Document | Element): AccessibilityError[] {
+  const errors = [];
+  const document = el instanceof Document ? el : el.ownerDocument;
+  const links = querySelectorAll("a[href^='#']", document);
+
+  let hasInstrument = false;
+
+  // Loop over all the links and see if there's a instrucment to skip to the main content.
+  // If there's a link
+  for (const link of links) {
+    const href = link.getAttribute("href")!;
+    const target = querySelector(href, document);
+    if (target?.parentElement?.isSameNode(document.body)) hasInstrument = true;
+  }
+  if (!hasInstrument) {
+    errors.push({
+      element: document.body,
+      text,
+      url,
+    });
+  }
+  return errors;
+}
diff --git a/src/rules/duplicate-id-aria.ts b/src/rules/duplicate-id-aria.ts
@@ -5,7 +5,8 @@ const id = "duplicate-id-aria";
 const text = "IDs used in ARIA and labels must be unique";
 const url = `https://dequeuniversity.com/rules/axe/4.4/${id}`;
 
-export default function (el: Element): AccessibilityError[] {
+export default function (el: Element | Document): AccessibilityError[] {
+  el = el instanceof Document ? el.documentElement : el;
   const selector = "[aria-labelledby]";
   const errors = [];
   const elements = querySelectorAll(selector, el);

diff --git a/src/rules/html-has-lang.ts b/src/rules/html-has-lang.ts
@@ -4,8 +4,11 @@ const id = "html-has-lang";
 const text = "<html> element must have a lang attribute";
 const url = `https://dequeuniversity.com/rules/axe/4.4/${id}`;
 
-export default function (el: Element): AccessibilityError[] {
-  const htmlElement = el.ownerDocument.documentElement;
+export default function (el: Element | Document): AccessibilityError[] {
+  const htmlElement =
+    el instanceof Document
+      ? el.documentElement
+      : el.ownerDocument.documentElement;
   const langAttribute = htmlElement.getAttribute("lang");
 
   // Report error if the `lang` attribute is not on the element or if it's just whitespace

diff --git a/src/rules/image-alt.ts b/src/rules/image-alt.ts
@@ -5,10 +5,10 @@ const text = "Images must have alternate text";
 const url =
   "https://dequeuniversity.com/rules/axe/4.4/image-alt?application=RuleDescription";
 
-export default function (el: Element): AccessibilityError[] {
+export default function (el: Document | Element): AccessibilityError[] {
   const errors = [];
   const elements = querySelectorAll("img", el) as HTMLImageElement[];
-  if (el.matches("img")) {
+  if (el instanceof HTMLElement && el.matches("img")) {
     elements.push(el as HTMLImageElement);
   }
   for (const element of elements) {

diff --git a/src/rules/input-button-name.ts b/src/rules/input-button-name.ts
@@ -4,7 +4,8 @@ import { querySelectorAll, labelledByIsValid } from "../utils";
 const text = "Input buttons must have discernible text";
 const url = "https://dequeuniversity.com/rules/axe/4.4/input-button-name";
 
-export default function (el: Element): AccessibilityError[] {
+export default function (el: Element | Document): AccessibilityError[] {
+  el = el instanceof Document ? el.documentElement : el;
   const selector =
     'input[type="button"],input[type="submit"],input[type="reset"]';
   const errors = [];

diff --git a/src/rules/input-image-alt.ts b/src/rules/input-image-alt.ts
@@ -5,7 +5,8 @@ const text = "Image buttons must have alternate text";
 const url =
   "https://dequeuniversity.com/rules/axe/4.4/input-image-alt?application=RuleDescription";
 
-export default function (el: Element): AccessibilityError[] {
+export default function (el: Document | Element): AccessibilityError[] {
+  el = el instanceof Document ? el.documentElement : el;
   const selector = "input[type=image]";
   const errors = [];
   const elements = querySelectorAll(selector, el) as HTMLImageElement[];

diff --git a/src/rules/label.ts b/src/rules/label.ts
@@ -10,12 +10,12 @@ const text = "Form <input> elements must have labels";
 const url =
   "https://dequeuniversity.com/rules/axe/4.4/label?application=RuleDescription";
 
-export default function (el: Element): AccessibilityError[] {
+export default function (el: Document | Element): AccessibilityError[] {
   const errors = [];
   const selector = ["input", "textarea"].map((x) => `form ${x}`).join(", ");
   const elements = querySelectorAll(selector, el) as HTMLInputElement[];
 
-  if (el.matches(selector)) {
+  if (el instanceof HTMLElement && el.matches(selector)) {
     elements.push(el as HTMLInputElement);
   }
   for (const element of elements) {

diff --git a/src/rules/link-name.ts b/src/rules/link-name.ts
@@ -10,10 +10,10 @@ const id = "c487ae";
 const url = `https://act-rules.github.io/rules/${id}`;
 const text = "Link has non-empty accessible name";
 
-export default function (el: Element): AccessibilityError[] {
+export default function (el: Document | Element): AccessibilityError[] {
   const errors = [];
   const elements = querySelectorAll("a", el) as HTMLAnchorElement[];
-  if (el.matches("a")) {
+  if (el instanceof HTMLElement && el.matches("a")) {
     elements.push(el as HTMLAnchorElement);
   }
   for (const element of elements) {

diff --git a/src/rules/meta-refresh.ts b/src/rules/meta-refresh.ts
@@ -4,10 +4,10 @@ const text = "Timed refresh must not exist";
 const url =
   "https://dequeuniversity.com/rules/axe/4.4/meta-refresh?application=RuleDescription";
 
-export default function (el: Element): AccessibilityError[] {
+export default function (el: Document | Element): AccessibilityError[] {
   const errors = [];
   const elements = Array.from(el.querySelectorAll<HTMLMetaElement>("meta"));
-  if (el.matches("meta")) {
+  if (el instanceof HTMLElement && el.matches("meta")) {
     elements.push(el as HTMLMetaElement);
   }
   for (const element of elements) {

diff --git a/src/rules/meta-viewport.ts b/src/rules/meta-viewport.ts
@@ -11,13 +11,14 @@ function parseContent(content: string): Record<string, string> {
   return obj;
 }
 
-export default function metaViewport(el: Element) {
+export default function metaViewport(el: Document | Element) {
   const errors = [];
 
   // TODO: Do the same for all the other rules
   const selector = "meta[name=viewport]";
   const elements = Array.from(el.querySelectorAll<HTMLMetaElement>(selector));
-  if (el.matches(selector)) elements.push(el as HTMLMetaElement);
+  if (el instanceof Element && el.matches(selector))
+    elements.push(el as HTMLMetaElement);
   for (const element of elements) {
     const content = parseContent(element.content);
     if (content["user-scalable"] === "no" || content["user-scalable"] === "0") {

diff --git a/src/rules/nested-interactive.ts b/src/rules/nested-interactive.ts
@@ -15,10 +15,10 @@ const interactiveSelector = [
   "[role=radio]",
 ].join(",");
 
-export default function (el: Element): AccessibilityError[] {
+export default function (el: Document | Element): AccessibilityError[] {
   const errors = [];
   const elements = Array.from(querySelectorAll(interactiveSelector, el));
-  if (el.matches(interactiveSelector)) {
+  if (el instanceof HTMLElement && el.matches(interactiveSelector)) {
     elements.push(el as HTMLImageElement);
   }
 

diff --git a/src/rules/scope-attr-valid.ts b/src/rules/scope-attr-valid.ts
@@ -5,11 +5,12 @@ const text = "Scope attribute should be used correctly on tables";
 const url =
   "https://dequeuniversity.com/rules/axe/4.4/scope-attr-valid?application=RuleDescription";
 
-function checkScopeElements(el: Element) {
+function checkScopeElements(el: Document | Element) {
   const errors = [];
   const selector = "[scope]";
   const elements = querySelectorAll(selector, el);
-  if (el.matches(selector)) elements.push(el as HTMLElement);
+  if (el instanceof Element && el.matches(selector))
+    elements.push(el as HTMLElement);
   for (const element of elements) {
     if (element.tagName !== "TH") {
       errors.push({
@@ -34,11 +35,12 @@ function checkScopeElements(el: Element) {
   return errors;
 }
 
-function checkTableHeaderElements(el: Element) {
+function checkTableHeaderElements(el: Document | Element) {
   const errors = [];
   const selector = "th:not([scope])";
   const elements = querySelectorAll(selector, el);
-  if (el.matches(selector)) elements.push(el as HTMLElement);
+  if (el instanceof HTMLElement && el.matches(selector))
+    elements.push(el as HTMLElement);
   for (const element of elements) {
     errors.push({
       element,
@@ -49,7 +51,7 @@ function checkTableHeaderElements(el: Element) {
   return errors;
 }
 
-export default function metaViewport(el: Element) {
+export default function metaViewport(el: Document | Element) {
   const errors = [];
 
   errors.push(...checkScopeElements(el), ...checkTableHeaderElements(el));

diff --git a/src/rules/select-name.ts b/src/rules/select-name.ts
@@ -10,10 +10,10 @@ const text = "select element must have an accessible name";
 const url =
   "https://dequeuniversity.com/rules/axe/4.4/select-name?application=RuleDescription";
 
-export default function (el: Element): AccessibilityError[] {
+export default function (el: Document | Element): AccessibilityError[] {
   const errors = [];
   const elements = querySelectorAll("select", el) as HTMLSelectElement[];
-  if (el.matches("select")) {
+  if (el instanceof HTMLElement && el.matches("select")) {
     elements.push(el as HTMLSelectElement);
   }
   for (const element of elements) {

diff --git a/src/rules/valid-lang.ts b/src/rules/valid-lang.ts
@@ -34,10 +34,10 @@ function getTexts(element: Element): string[] {
   return [...labels, ...alts];
 }
 
-export default function (el: Element): AccessibilityError[] {
+export default function (el: Document | Element): AccessibilityError[] {
   const errors = [];
   const elements = querySelectorAll("[lang]", el);
-  if (el.matches("[lang]")) {
+  if (el instanceof HTMLElement && el.matches("[lang]")) {
     elements.push(el);
   }
 

diff --git a/src/rules/video-caption.ts b/src/rules/video-caption.ts
@@ -5,10 +5,10 @@ const text = "<video> elements must have a <track> for captions";
 const url =
   "https://dequeuniversity.com/rules/axe/4.4/video-caption?application=RuleDescription";
 
-export default function (el: Element): AccessibilityError[] {
+export default function (el: Document | Element): AccessibilityError[] {
   const errors = [];
   const elements = querySelectorAll("video", el);
-  if (el.matches("video")) {
+  if (el instanceof HTMLElement && el.matches("video")) {
     elements.push(el as HTMLElement);
   }
   for (const element of elements) {

diff --git a/src/scanner.d.ts b/src/scanner.d.ts
@@ -3,4 +3,7 @@ export interface AccessibilityError {
   url: string;
   element: HTMLElement;
 }
-export declare function scan(element: HTMLElement): Promise<void>;
+
+type Scannable = HTMLElement | Document;
+
+export declare function scan(element: Scannable): Promise<void>;
diff --git a/src/scanner.ts b/src/scanner.ts
@@ -11,6 +11,7 @@ import label from "./rules/label";
 import linkName from "./rules/link-name";
 import nestedInteractive from "./rules/nested-interactive";
 import validLang from "./rules/valid-lang";
+import bypass from "./rules/bypass";
 
 import { Logger } from "./logger";
 
@@ -22,7 +23,7 @@ export interface AccessibilityError {
 
 const logger = new Logger();
 
-type Rule = (el: Element) => AccessibilityError[];
+type Rule = (el: Document | Element) => AccessibilityError[];
 
 export const allRules: Rule[] = [
   areaAlt,
@@ -38,6 +39,7 @@ export const allRules: Rule[] = [
   linkName,
   nestedInteractive,
   validLang,
+  bypass,
 ];
 
 export async function requestIdleScan(
@@ -70,7 +72,7 @@ export async function requestIdleScan(
 }
 
 export async function scan(
-  element: Element,
+  element: Element | Document,
   enabledRules?: Rule[],
 ): Promise<AccessibilityError[]> {
   const errors: AccessibilityError[] = [];