@josueavalosjim/taste-check 0.5.0 → 0.5.2

package/README.md

@@ -227,6 +227,15 @@ page's own scripts, which is where a theme belongs because the page reads it at
 boot. `after` runs once there is a document, for opening a panel or focusing a
 field. Each state's setup is removed before the next one, so they cannot leak.
 
+**A foreground composites over its own background. An edge measures against
+what is outside it.** Those are different questions. Text sits on the thing
+behind it, so its own background belongs in the stack. A border is a boundary,
+and 1.4.11 asks whether that boundary can be told apart from what is adjacent
+to it, which is the page rather than the control's own fill. A solid button
+that sets its border to its own background colour measures 1.00:1 the first
+way and 14.68:1 the second, and only one of those is the edge anybody sees.
+Border properties are handled this way for you.
+
 Use `againstParent` when the thing being measured is a fill rather than a
 foreground. A selected row with its own background measured against itself
 scores 1.00, which is a pass that means nothing.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@josueavalosjim/taste-check",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Design review in CI with a line down the middle: measured checks that gate the build (WCAG contrast from your tokens or from a real rendered page, one-off values in your markup) and a fresh-eyes model judge whose verdicts stay advisory. Zero dependencies. Ships no design rules of its own.",
   "keywords": [
     "accessibility",

package/src/cdp.mjs

@@ -224,11 +224,18 @@ export async function connect({ endpoint, browserPath, timeout = 15000 }) {
       return result.value;
     },
     /**
-     * Best effort, and deliberately incapable of throwing. Teardown failing
-     * must never take down a run whose measurements already succeeded, and a
-     * temp directory the browser is still writing into is not worth a crash.
+     * Waits for the browser to actually exit before removing its profile.
+     *
+     * Killing and deleting in the same breath loses a race with Chrome, which
+     * is still flushing its profile when the signal arrives. Best effort was
+     * not good enough: it left a directory behind on nearly every run, and a
+     * tool that litters the temp directory every time CI runs is not one to
+     * inflict on anybody.
+     *
+     * Still incapable of throwing. Teardown must never take down a run whose
+     * measurements already succeeded.
      */
-    close() {
+    async close() {
       try {
         ws.close();
       } catch {
@@ -236,7 +243,20 @@ export async function connect({ endpoint, browserPath, timeout = 15000 }) {
       }
       if (!child) return;
       try {
-        child.kill();
+        if (child.exitCode === null && child.signalCode === null) {
+          const exited = new Promise((resolve) => child.once('exit', resolve));
+          child.kill();
+          // SIGTERM is usually enough. If it is not, stop being polite.
+          const forced = new Promise((resolve) => setTimeout(resolve, 2000)).then(() => {
+            try {
+              child.kill('SIGKILL');
+            } catch {
+              /* already gone */
+            }
+            return new Promise((resolve) => setTimeout(resolve, 300));
+          });
+          await Promise.race([exited, forced]);
+        }
       } catch {
         /* already gone */
       }

package/src/runtime.mjs

@@ -17,6 +17,10 @@
  *   2. It can measure a state, because it can put the page into one first.
  *      A theme, an opened panel, a focused input.
  *
+ * A foreground composites over its own background. An edge measures against
+ * what is outside it. Those are different questions and getting them the same
+ * way round produces confident nonsense in both directions.
+ *
  * A selector that matches nothing is a failure, not a skipped target. So is a
  * border with no width: you asked for the contrast of an edge that is not
  * being drawn, and the honest answer is that the question is wrong.
@@ -42,7 +46,18 @@ const MEASURE = `(targets) => targets.map(({ selector, prop, againstParent }) =>
     if (!width) return { error: 'has a ' + prop + ' but no width, so no edge is drawn' };
   }
   const layers = [];
-  let node = againstParent ? el.parentElement : el;
+  // Two reasons to start one level up.
+  //
+  // A fill measured against itself scores 1.00, so againstParent hands us the
+  // parent instead.
+  //
+  // A border is the same, for a different reason. 1.4.11 asks whether the
+  // boundary of a control can be told apart from what is adjacent to it, and
+  // what is adjacent is the page, not the control's own fill. A solid button
+  // that sets its border to its own background colour measures 1.00:1 against
+  // that background: true, and an answer to a question nobody asked.
+  const outside = againstParent || prop.indexOf('border') === 0;
+  let node = outside ? el.parentElement : el;
   if (!node) return { error: 'has no parent to measure against' };
   while (node) {
     const bg = getComputedStyle(node).backgroundColor;
@@ -147,7 +162,7 @@ export async function runRuntime(config, cwd, { connect: open = connect } = {})
   } catch (error) {
     problems.push(`the page could not be measured: ${error.message}`);
   } finally {
-    page.close();
+    await page.close();
   }
 
   return {