chore(selector): fix head element query selecting [#19]

a11ywatch · Nov 22, 2023 · 5cd2cf5 · 5cd2cf5
1 parent 87ed443
commit 5cd2cf5
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -265,4 +265,4 @@ One of the main goals was to have the audit run quickly since we noticed some of
 Check the license file in the root of each project.
 
 [discord-badge]: https://img.shields.io/discord/860982761137111040.svg?logo=discord
-[discord-url]: https://discord.gg/ukmJcjQ5
+[discord-url]: https://discord.gg/ukmJcjQ5
diff --git a/kayle/lib/runner.ts b/kayle/lib/runner.ts
@@ -157,7 +157,7 @@
   };
 
   // get css selelector todo: shortest path https://patents.google.com/patent/CN105094940A/en
-  const getElementSelector = (element: HTMLElement) => {
+  const getElementSelector = (element: HTMLElement, initial?: boolean) => {
     if (!element || element.nodeName == "HTML") {
       return "";
     }
@@ -171,9 +171,14 @@
       return "body";
     }
 
-    return `${getElementSelector(
-      element.parentNode as HTMLElement
-    )}>:nth-child(${siblingPosition(element)})`;
+    const elementSelector = getElementSelector(
+      element.parentNode as HTMLElement,
+      true
+    );
+
+    return `${
+      !elementSelector && initial ? "html" : elementSelector
+    }>:nth-child(${siblingPosition(element)})`;
   };
 
   // runner to get accessibility issues

diff --git a/kayle/package.json b/kayle/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kayle",
-  "version": "0.7.12",
+  "version": "0.7.13",
   "description": "Extremely fast and accurate accessibility engine built for any headless tool like playwright or puppeteer.",
   "main": "./build/index.js",
   "keywords": [

diff --git a/kayle/tests/innate.ts b/kayle/tests/innate.ts
@@ -18,14 +18,19 @@ import { _audit_not_ready } from "kayle_innate";
     origin: "https://www.drake.com",
     html: drakeMock,
   });
-
-  const mock = html.replace(
-    "<title>Drake Industries | Custom, Durable, High-Quality Labels, Asset Tags and Custom Server Bezels</title>",
-    ""
-  ).replace(`<body class="   hs-content-id-8839032963 hs-site-page page " style="">`, `<body class="   hs-content-id-8839032963 hs-site-page page " style=""><form action="/something" method="post">
+
+  const mock = html
+    .replace(
+      "<title>Drake Industries | Custom, Durable, High-Quality Labels, Asset Tags and Custom Server Bezels</title>",
+      ""
+    )
+    .replace(
+      `<body class="   hs-content-id-8839032963 hs-site-page page " style="">`,
+      `<body class="   hs-content-id-8839032963 hs-site-page page " style=""><form action="/something" method="post">
   <label for="name">Name:</label>
   <input type="text" id="name" name="name">
-  </form>`);
+  </form>`
+    );
 
   const startTime = performance.now();
   const audit = await _audit_not_ready(mock, css, false);