Use buttonface for UA <button> background color (#1472)

* Use for UA background color * Set up button background color where needed
Siteimprove · Sep 26, 2023 · 0337ca8 · 0337ca8
1 parent ff127a0
commit 0337ca8
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 5 deletions.
diff --git a/.changeset/stupid-lies-hang.md b/.changeset/stupid-lies-hang.md
@@ -0,0 +1,7 @@
+---
+"@siteimprove/alfa-cascade": patch
+---
+
+**Changed:** `<button>`'s `background-color` now defaults to `buttonface`.
+
+`<button>` elements default `background-color` is somewhat different between user-agents. Rather than picking one, we use the system `buttonface` color instead. This notably opens way to handle it with a branched value, possibly also detecting whether we are in forced colors mode.
diff --git a/packages/alfa-cascade/src/user-agent.ts b/packages/alfa-cascade/src/user-agent.ts
@@ -199,10 +199,18 @@ export const UserAgent = h.sheet([
 
   h.rule.style("textarea", { whiteSpace: "pre-wrap" }),
 
-  // <button> element defaults applied consistently by browsers.
   h.rule.style("button", {
+    // <button> element defaults applied consistently by browsers.
     fontStyle: "normal",
     fontWeight: "400",
+    // <button> colors differ between browsers, additionally they can be
+    // overwritten by OS settings which we do not really have access to (although
+    // forced-color media query could help), so we default to the system color.
+    // as of 21.09.23, Chrome uses rgb(240, 240, 240) but Firefox uses
+    // rgb(233, 233, 233).
+    backgroundColor: "buttonface",
+    // color seems to rather consistently defaults to black, which is the default.
+    // color: "buttontext",
   }),
 
   /**

diff --git a/packages/alfa-rules/test/sia-dr66/rule.spec.tsx b/packages/alfa-rules/test/sia-dr66/rule.spec.tsx
@@ -245,7 +245,7 @@ test("evaluate() passes text nodes in widgets with good contrast", async (t) =>
 
   const document = h.document([
     <html>
-      <button>{target}</button>
+      <button style={{ backgroundColor: "white" }}>{target}</button>
     </html>,
   ]);
 

diff --git a/packages/alfa-rules/test/sia-dr69/rule.spec.tsx b/packages/alfa-rules/test/sia-dr69/rule.spec.tsx
@@ -306,7 +306,7 @@ test("evaluate() passes text nodes in widgets with good contrast", async (t) =>
 
   const document = h.document([
     <html>
-      <button>{target}</button>
+      <button style={{ backgroundColor: "white" }}>{target}</button>
     </html>,
   ]);
 

diff --git a/packages/alfa-rules/test/sia-r66/rule.spec.tsx b/packages/alfa-rules/test/sia-r66/rule.spec.tsx
@@ -245,7 +245,7 @@ test("evaluate() passes text nodes in widgets with good contrast", async (t) =>
 
   const document = h.document([
     <html>
-      <button>{target}</button>
+      <button style={{ backgroundColor: "white" }}>{target}</button>
     </html>,
   ]);
 

diff --git a/packages/alfa-rules/test/sia-r69/rule.spec.tsx b/packages/alfa-rules/test/sia-r69/rule.spec.tsx
@@ -308,7 +308,7 @@ test("evaluate() passes text nodes in widgets with good contrast", async (t) =>
 
   const document = h.document([
     <html>
-      <button>{target}</button>
+      <button style={{ backgroundColor: "white" }}>{target}</button>
     </html>,
   ]);