ensure wcag2aa checks are run, fix label violation

rewiringamerica · Oct 2, 2023 · 8ef5c52 · 8ef5c52
1 parent 772f046
commit 8ef5c52
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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>