fix(web): search 503 vs error (#34); terms/authorities list error states (#31); authority-tab a11y + dead keys (#32); authority-kind test (#37)

web/src/authorities/authorities-page.tsx

@@ -19,7 +19,7 @@ export function AuthoritiesPage() {
 
   const isValidKind = (KINDS as readonly string[]).includes(kind ?? "");
 
-  const { data: authorities } = useAuthorities(isValidKind ? (kind as string) : "person");
+  const { data: authorities, isLoading, isError } = useAuthorities(isValidKind ? (kind as string) : "person");
   const create = useCreateAuthority();
 
   const [labels, setLabels] = useState<LabelInput[]>([]);
@@ -44,22 +44,29 @@ export function AuthoritiesPage() {
 
   return (
     <div className="overflow-auto p-4">
-      <div className="mb-3 flex gap-2">
+      <div role="tablist" className="mb-3 flex gap-2">
         {KINDS.map((k) => (
           <NavLink
             key={k}
             to={`/authorities/${k}`}
+            role="tab"
             className={({ isActive }) =>
               `rounded px-3 py-1 text-sm ${isActive ? "bg-neutral-800 text-white" : "border"}`
             }
           >
-            {t(`authorities.${k}`)}
+            {({ isActive }) => <span aria-selected={isActive}>{t(`authorities.${k}`)}</span>}
           </NavLink>
         ))}
       </div>
 
       <ul className="mb-4">
-        {authorities?.length === 0 && (
+        {isLoading && (
+          <li className="text-sm text-neutral-400">…</li>
+        )}
+        {isError && (
+          <li className="text-sm text-red-600">{t("authorities.loadError")}</li>
+        )}
+        {!isLoading && !isError && authorities?.length === 0 && (
           <li className="text-sm text-neutral-500">{t("authorities.empty")}</li>
         )}
         {authorities?.map((a) => (

web/src/authorities/authorities.test.tsx

@@ -33,7 +33,7 @@ test("lists authorities for the kind and creates one", async () => {
 
 test("kind tabs link to the other kinds", async () => {
   renderApp(tree(), { route: "/authorities/person" });
-  expect(await screen.findByRole("link", { name: /place/i })).toHaveAttribute("href", "/authorities/place");
+  expect(await screen.findByRole("tab", { name: /place/i })).toHaveAttribute("href", "/authorities/place");
 });
 
 test("create without EN label shows required alert and does not POST", async () => {
@@ -51,6 +51,14 @@ test("create without EN label shows required alert and does not POST", async ()
   expect(posted).toBe(false);
 });
 
+test("authorities endpoint error shows loadError", async () => {
+  server.use(
+    http.get("/api/admin/authorities", () => new HttpResponse(null, { status: 500 })),
+  );
+  renderApp(tree(), { route: "/authorities/person" });
+  expect(await screen.findByText(/could not load/i)).toBeInTheDocument();
+});
+
 test("unknown kind redirects to person list", async () => {
   renderApp(tree(), { route: "/authorities/banana" });
   expect(await screen.findByText("Ada Lovelace")).toBeInTheDocument();