swarm-ui: say when the hive or permission list failed to load, and name the permissions group

frontend/packages/swarm-ui/src/pages/CreateAgentForm.tsx

@@ -309,7 +309,9 @@ export function CreateAgentForm({
               disabled={!hivesReady}
               placeholder={
                 !hives
-                  ? "loading…"
+                  ? hivesError
+                    ? "could not load hives"
+                    : "loading…"
                   : hives.length === 0
                     ? "no hives configured"
                     : "select a hive"
@@ -340,8 +342,8 @@ export function CreateAgentForm({
                 )}
               </>
             )}
-            <FormField label="permissions" htmlFor="agent-permissions">
-              <div id="agent-permissions">
+            <FormField label="permissions" labelId="agent-permissions-label">
+              <div role="group" aria-labelledby="agent-permissions-label">
                 {catalogue ? (
                   <MultiselectFilterOptions
                     options={catalogue.all}
@@ -349,7 +351,9 @@ export function CreateAgentForm({
                     onToggle={(v) => setSelected((s) => togglePermission(s, v))}
                   />
                 ) : (
-                  <span>loading…</span>
+                  <span>
+                    {catalogueError ? "could not load permissions" : "loading…"}
+                  </span>
                 )}
               </div>
             </FormField>

frontend/packages/swarm-ui/src/ui/form-field/FormField.tsx

@@ -4,23 +4,36 @@
 // don't each reinvent the label/spacing chrome; a bare labelled `<div>`
 // wrapper has no independent identity worth a `/components` entry of
 // its own.
+//
+// A control a `<label for>` can name (input, select, textarea) passes
+// `htmlFor`. A group of controls (a checkbox set) has no single element to
+// point at: it passes `labelId` instead and puts `role="group"` with
+// `aria-labelledby` on the group.
 import type { ComponentChildren } from "preact";
 import "./FormField.css";
 
 export function FormField({
   label,
   htmlFor,
+  labelId,
   children,
 }: {
   label: string;
-  htmlFor: string;
+  htmlFor?: string;
+  labelId?: string;
   children: ComponentChildren;
 }) {
   return (
     <div class="ui-form-field">
-      <label class="ui-form-field-label" for={htmlFor}>
-        {label}
-      </label>
+      {htmlFor !== undefined ? (
+        <label class="ui-form-field-label" for={htmlFor}>
+          {label}
+        </label>
+      ) : (
+        <span class="ui-form-field-label" id={labelId}>
+          {label}
+        </span>
+      )}
       {children}
     </div>
   );