From 8ef5c5290fbfc77ae32ab6d712e82a81ce100e59 Mon Sep 17 00:00:00 2001
From: Tom Carden <tomc@rewiringamerica.org>
Date: Mon, 2 Oct 2023 14:26:02 -0600
Subject: [PATCH] ensure wcag2aa checks are run, fix label violation

---
 cypress/e2e/state-calculator.cy.ts |  4 +++-
 src/calculator-form.ts             | 16 ++++++++--------
 src/select.ts                      |  2 ++
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/cypress/e2e/state-calculator.cy.ts b/cypress/e2e/state-calculator.cy.ts
index fee0123..90d0201 100644
--- a/cypress/e2e/state-calculator.cy.ts
+++ b/cypress/e2e/state-calculator.cy.ts
@@ -34,7 +34,9 @@ describe('template spec', () => {
       .find('input#zip')
       .type('02859{enter}');
 
-    cy.checkA11y();
+    cy.checkA11y(null, {
+      runOnly: ['wcag2a', 'wcag2aa'],
+    });
 
     cy.get('rewiring-america-state-calculator')
       .shadow()
diff --git a/src/calculator-form.ts b/src/calculator-form.ts
index cf81198..d3c1661 100644
--- a/src/calculator-form.ts
+++ b/src/calculator-form.ts
@@ -89,18 +89,18 @@ export const formTemplate = (
   onSubmit: (e: SubmitEvent) => void,
   gridClass: string = 'grid-3-2',
 ) => {
+  const labelSlot = html`<label slot="label">
+    Projects you're most interested in
+    <sl-tooltip content="Select the projects you're most interested in." hoist
+      >${questionIcon(tooltipSize, tooltipSize)}</sl-tooltip
+    ></label
+  >`;
+
   const projectField = showProjectField
     ? html`<div>
-        <label for="projects">
-          Projects you're most interested in
-          <sl-tooltip
-            content="Select the projects you're most interested in."
-            hoist
-            >${questionIcon(tooltipSize, tooltipSize)}</sl-tooltip
-          >
-        </label>
         ${multiselect({
           id: 'projects',
+          labelSlot,
           required: true,
           options: Object.entries(PROJECTS)
             .map(([value, data]) => ({ value, label: data.label }))
diff --git a/src/select.ts b/src/select.ts
index 7be1278..624317e 100644
--- a/src/select.ts
+++ b/src/select.ts
@@ -72,6 +72,7 @@ export const select = ({
 export const multiselect = ({
   id,
   label,
+  labelSlot,
   currentValues,
   options,
   helpText,
@@ -93,6 +94,7 @@ export const multiselect = ({
         hoist
         multiple
       >
+        ${labelSlot ?? nothing}
         <sl-icon slot="expand-icon"></sl-icon>
         ${options.map(o => multioption(o))}
       </sl-select>