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) => (