catch mid colors outside of WCAG AA

templates/components/role.html

@@ -2,7 +2,7 @@
 <div
   class="role"
   style="--role-color: {{.Colors.Main}}; --contrast-color: {{.Colors.Alt}};"
-  data-testid="role-{{.ID}}"
+  data-testid="{{$for}}"
 >
   <input type="{{.InputType}}" id="{{$for}}" {{if eq .InputType
   "radio"}}name="category_group_{{.CategoryID}}"{{end}} />

templates/components/role_test.go

@@ -35,9 +35,9 @@ func TestRole(t *testing.T) {
 	assert.Contains(t, html, "--role-color: #a20000;", "role color is set")
 	assert.Contains(t, html, `type="checkbox"`, "multi has input type=checkbox")
 	assert.Contains(t, html, fmt.Sprintf("--contrast-color: %s;", utils.RgbToString(utils.AltColor(162, 0, 0))), "contrast color is set")
-	assert.Contains(t, html, fmt.Sprintf(`id="%s"`, roleInputID(c, r)), "input has ID attr")
-	assert.Contains(t, html, fmt.Sprintf(`for="%s"`, roleInputID(c, r)), "label has for attr")
-	assert.NotContains(t, html, fmt.Sprintf(`name="%s"`, roleInputName(c)), "multi has no name attr")
+	assert.Contains(t, html, fmt.Sprintf(`id="%s"`, utils.RoleInputID(c, r)), "input has ID attr")
+	assert.Contains(t, html, fmt.Sprintf(`for="%s"`, utils.RoleInputID(c, r)), "label has for attr")
+	assert.NotContains(t, html, fmt.Sprintf(`name="%s"`, utils.RoleInputName(c)), "multi has no name attr")
 	// TODO: selected?
 
 	c = &fixtures.CategorySingle
@@ -45,14 +45,7 @@ func TestRole(t *testing.T) {
 	html = renderRole(t, c, r, true)
 	assert.Contains(t, html, `type="radio"`, "single has input type=radio")
 	assert.Contains(t, html, fmt.Sprintf("--contrast-color: %s;", utils.RgbToString(utils.AltColor(0xff, 0xaa, 0x88))), "contrast color")
-	assert.Contains(t, html, fmt.Sprintf(`name="%s"`, roleInputName(c)), "single has name attr")
+	assert.Contains(t, html, fmt.Sprintf(`name="%s"`, utils.RoleInputName(c)), "single has name attr")
 }
 
 // TODO: these can probably be string utils that are injected as functions into template
-func roleInputID(c *types.Category, r *types.Role) string {
-	return fmt.Sprintf("category-%s_role-%s", c.ID, r.ID)
-}
-
-func roleInputName(c *types.Category) string {
-	return fmt.Sprintf("category_group_%s", c.ID)
-}

templates/layouts/main.html

@@ -5,7 +5,7 @@
     <title>{{ .HeadTitle }}</title>
     <link rel="preconnect" href="https://fonts.bunny.net" />
     <link
-      href="https://fonts.bunny.net/css?family=atkinson-hyperlegible:400,400i"
+      href="https://fonts.bunny.net/css?family=atkinson-hyperlegible:400,400i,600,600i"
       rel="stylesheet"
     />
     <link rel="stylesheet" href="/static/main.css" />

templates/testing/templates.go

@@ -0,0 +1,14 @@
+// Package testing provides test helpers that support fiber templates
+package testing
+
+import (
+	"html/template"
+
+	"git.sapphic.engineer/roleypoly/v4/templates"
+)
+
+var (
+	Templates = template.Must(template.ParseFS(templates.FS, "*.html")).Funcs(template.FuncMap{
+		"embed": func() {},
+	})
+)

templates/testing/templates_test.go

@@ -0,0 +1,7 @@
+package testing_test
+
+// func Test(t *testing.T) {
+
+// }
+
+// TODO: test the template tester

templates/tests/picker.html

@@ -7,10 +7,10 @@
 <div class="container">
   <div class="cat-multi">
     {{ template "components/role" .TestRole }} {{ template "components/role"
-    .TestRole2 }}
+    .TestRole2 }} {{ template "components/role" .TestRole3 }}
   </div>
   <div class="cat-single">
-    {{ template "components/role" .TestRole3 }} {{ template "components/role"
-    .TestRole4 }}
+    {{ template "components/role" .TestRole4 }} {{ template "components/role"
+    .TestRole5 }} {{ template "components/role" .TestRole6 }}
   </div>
 </div>