fix(design): distinguish border geometry and conditional controls

Author: Bill Leoutsakos

scripts/check-design-conformance-colour-assignments.test.ts

@@ -568,3 +568,16 @@ test('imperative paint properties inspect literals, tokens and unresolved values
     ).toBeGreaterThan(0)
   }
 })
+
+test('imperative neutral paint and border geometry do not become colour findings', () => {
+  for (const expression of [
+    "node.style.background='transparent'",
+    "node.style.border='0'",
+    "node.style.border='2px solid var(--text-body)'",
+  ]) {
+    expect(flagged({ [ui]: `export function update(node){${expression}}` })).toEqual([])
+  }
+  expect(
+    flagged({ [ui]: `export function update(node){node.style.border='2px solid #ff00ff'}` }).length
+  ).toBeGreaterThan(0)
+})

scripts/check-design-conformance-controls.test.ts

@@ -274,3 +274,18 @@ test('native image inputs require an accessible name from alt or ARIA', () => {
     )
   ).toEqual([])
 })
+
+test('finite image and text input branches still inspect the image action name', () => {
+  expect(
+    matching(
+      run('<input type={condition ? "image" : "text"} src="/action.png"/>'),
+      'control-accessible-name'
+    )
+  ).toHaveLength(1)
+  expect(
+    matching(
+      run('<input type={condition ? "image" : "text"} src="/action.png" alt="Submit"/>'),
+      'control-accessible-name'
+    )
+  ).toEqual([])
+})

scripts/design-conformance/control-colour-assignments.ts

@@ -13,7 +13,7 @@ import { productScope } from '#control-analysis/scope'
 import { type Expr, expression, type StaticInputs, unknown } from '#control-analysis/static-inputs'
 import { centralFile } from '#design-conformance/contracts'
 import { canonical, type Finding, hash, TOKEN_FILE } from '#design-conformance/model'
-import { rawColours, utility, variablesIn } from '#design-conformance/normalize'
+import { borderDeclarations, rawColours, utility, variablesIn } from '#design-conformance/normalize'
 
 interface Site {
   file: string
@@ -638,6 +638,23 @@ export class ColourAssignments {
         }
       const shadowSink = assignment.direct && /^(?:box|text)-shadow$/.test(assignment.name)
       const checks = assignment.values.map((value): Check => {
+        const border = assignment.direct ? borderDeclarations(assignment.name, value) : null
+        if (border) {
+          const paint = border.filter((declaration) => declaration.category === 'colours')
+          if (!paint.length)
+            return {
+              status: 'verified',
+              reason: 'Border shorthand authors no colour',
+              references: [],
+            }
+          return combine(
+            paint.map((declaration) =>
+              checkColourValue(declaration.value, (name, context) =>
+                checkVariable(name, seen, context)
+              )
+            )
+          )
+        }
         const shadow = shadowSink ? /^var\((--shadow-[\w-]+)\)$/.exec(value.trim()) : null
         if (shadow) {
           const name = shadow[1]
@@ -848,6 +865,8 @@ function checkColourValue(
   shadowGeometry = false,
   channelContext = false
 ): Check {
+  if (/^(?:none|transparent)$/i.test(text.trim()))
+    return { status: 'verified', reason: 'No authored paint colour', references: [] }
   if (/^(?:currentColor|inherit|unset|revert|revert-layer)$/i.test(text.trim()))
     return {
       status: 'unresolved',

scripts/design-conformance/control-simplifications.ts

@@ -780,7 +780,7 @@ export function inspectSimplifications(
       use.target === 'native:input' &&
       !use.inputs.type?.unresolved &&
       !!use.inputs.type?.values?.length &&
-      use.inputs.type.values.every((value) => value === 'image')
+      use.inputs.type.values.some((value) => value === 'image')
     const isButton =
       use.target === 'native:button' ||
       imageInput ||

scripts/design-conformance/normalize.ts

@@ -99,6 +99,28 @@ const internal: Record<string, string> = {
   '--tw-scale-x': 'scale',
   '--tw-scale-y': 'scale',
 }
+/** Split authored border geometry and style from its colour input. */
+export function borderDeclarations(property: string, value: string): Declaration[] | null {
+  if (!/^(?:border(?:-(?:top|bottom|left|right))?|outline)$/.test(property)) return null
+  const prefix = property.startsWith('outline') ? 'outline' : 'border'
+  return valueParser(value)
+    .nodes.filter((node) => node.type !== 'space' && node.type !== 'comment')
+    .map((node) => {
+      const part = valueParser.stringify(node)
+      const suffix = /^(?:none|hidden|solid|dashed|dotted|double|groove|ridge|inset|outset)$/.test(
+        part
+      )
+        ? 'style'
+        : /^(?:[\d.]+(?:px|em)|0|thin|medium|thick)$/.test(part) || part.includes('--border-width')
+          ? 'width'
+          : 'color'
+      return {
+        property: `${prefix}-${suffix}`,
+        value: part,
+        category: suffix === 'color' ? 'colours' : 'borders',
+      }
+    })
+}
 export function declarations(
   atom: Atom,
   system: Compiler,
@@ -163,23 +185,11 @@ export function declarations(
     if (/^(?:padding|margin|gap|border-radius)$/.test(family(prop))) {
       for (const part of parts.filter((x) => x !== '/'))
         found.push({ property: family(prop), value: part, category: cat })
-    } else if (/^(?:border(?:-(?:top|bottom|left|right))?|outline)$/.test(prop)) {
-      const prefix = prop.startsWith('outline') ? 'outline' : 'border'
-      for (const part of parts) {
-        const suffix =
-          /^(?:none|hidden|solid|dashed|dotted|double|groove|ridge|inset|outset)$/.test(part)
-            ? 'style'
-            : /^(?:[\d.]+(?:px|em)|0|thin|medium|thick)$/.test(part) ||
-                part.includes('--border-width')
-              ? 'width'
-              : 'color'
-        found.push({
-          property: `${prefix}-${suffix}`,
-          value: part,
-          category: suffix === 'color' ? 'colours' : 'borders',
-        })
-      }
-    } else found.push({ property: family(prop), value, category: cat })
+    } else {
+      const border = borderDeclarations(prop, value)
+      if (border) found.push(...border)
+      else found.push({ property: family(prop), value, category: cat })
+    }
   })
   return [...new Map(found.map((x) => [JSON.stringify(x), x])).values()]
 }