🐛 Address accessibility of HUC12 search

index.html

@@ -114,16 +114,18 @@ <h4 class="modal-title" id="dtModalLabel">DEP Tillage Codes</h4>
         <h4 class="modal-title" id="myModalLabel">Search for Watershed by Name or ID</h4>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
-      <div class="modal-body" onkeypress="return event.keyCode != 13;">
+            <div class="modal-body">
         <p>Enter some case-insensitive text to search for a watershed by name or
             enter the HUC12 numeric ID.</p>
-      <form name="huc12search">
-        <input type="text" name="q" id="huc12searchtext">
-        <button id="huc12searchbtn" type="button" class="btn btn-secondary">
+            <form name="huc12search" id="huc12searchform">
+                <label class="visually-hidden" for="huc12searchtext">Search for watershed by name or HUC12 ID</label>
+                <input type="text" name="q" id="huc12searchtext" aria-describedby="huc12searchhelp">
+                <button id="huc12searchbtn" type="submit" class="btn btn-secondary">
             <i class="bi-search"></i> Search</button>
-        </form>
+                </form>
         <hr />
-        <div id="huc12searchres"></div>
+                <div id="huc12searchhelp" class="visually-hidden">Type a watershed name or HUC12 ID, then press Enter or activate Search.</div>
+                <div id="huc12searchres"></div>
 
       </div>
       <div class="modal-footer">

src/eventHandlers.js

@@ -188,13 +188,8 @@ export function setupRadioHandlers() {
 }
 
 export function setupSearchHandlers() {
-    requireElement('huc12searchtext').addEventListener('keypress', (event) => {
-            if (event.code === '13') {
-                doHUC12Search();
-            }
-        });
-
-    requireElement('huc12searchbtn').addEventListener('click', () => {
+    requireElement('huc12searchform').addEventListener('submit', (event) => {
+        event.preventDefault();
         doHUC12Search();
     });
 }
@@ -272,9 +267,6 @@ export function setupInlineEventHandlers(setDateSelection) {
         handleSideBarClick();
     });
 
-    requireElement('huc12searchbtn').addEventListener('click', () => {
-        doHUC12Search();
-    });
     // Unit selection radio buttons
     document.querySelectorAll('input[name="units"]').forEach((radio) => {
         radio.addEventListener('change', (event) => {

tests/eventHandlers.test.js

@@ -1,5 +1,6 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { setupRadioHandlers } from '../src/eventHandlers.js';
+import { setupRadioHandlers, setupSearchHandlers } from '../src/eventHandlers.js';
+import { doHUC12Search } from '../src/huc12Utils.js';
 
 // Mock dependencies
 vi.mock('../src/mapManager', () => ({
@@ -14,6 +15,10 @@ vi.mock('../src/state', () => ({
   },
 }));
 
+vi.mock('../src/huc12Utils', () => ({
+  doHUC12Search: vi.fn(),
+}));
+
 describe('eventHandlers', () => {
   beforeEach(() => {
     document.body.innerHTML = '';
@@ -64,4 +69,22 @@ describe('eventHandlers', () => {
       expect(document.getElementById('layer-description').textContent).toBe('Output description');
     });
   });
+
+  describe('setupSearchHandlers', () => {
+    it('submits the HUC12 search form when the form submit event fires', () => {
+      document.body.innerHTML = `
+        <form id="huc12searchform" name="huc12search">
+          <input type="text" id="huc12searchtext" name="q">
+          <button id="huc12searchbtn" type="submit">Search</button>
+        </form>
+      `;
+
+      setupSearchHandlers();
+
+      const form = document.getElementById('huc12searchform');
+      form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+
+      expect(doHUC12Search).toHaveBeenCalledTimes(1);
+    });
+  });
 });

tests/searchAccessibility.test.js

@@ -0,0 +1,29 @@
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+const htmlPath = path.join(process.cwd(), 'index.html');
+const html = readFileSync(htmlPath, 'utf8');
+const documentFragment = new DOMParser().parseFromString(html, 'text/html');
+
+describe('search modal accessibility markup', () => {
+  it('uses a submit form for HUC12 search', () => {
+    const modalBody = documentFragment.querySelector('#myModal .modal-body');
+    const form = documentFragment.getElementById('huc12searchform');
+    const button = documentFragment.getElementById('huc12searchbtn');
+
+    expect(modalBody?.getAttribute('onkeypress')).toBeNull();
+    expect(form).not.toBeNull();
+    expect(button?.getAttribute('type')).toBe('submit');
+  });
+
+  it('provides a programmatic label and help text for the search field', () => {
+    const label = documentFragment.querySelector('label[for="huc12searchtext"]');
+    const input = documentFragment.getElementById('huc12searchtext');
+    const help = documentFragment.getElementById('huc12searchhelp');
+
+    expect(label?.textContent?.trim()).toBe('Search for watershed by name or HUC12 ID');
+    expect(input?.getAttribute('aria-describedby')).toBe('huc12searchhelp');
+    expect(help?.textContent).toContain('press Enter or activate Search');
+  });
+});