fix: settings/db-provider accessibility

src/frontend/src/alerts/displayArea/__tests__/displayArea.a11y.test.tsx

@@ -34,6 +34,9 @@ describe("AlertDisplayArea accessibility", () => {
   it("keeps_live_regions_mounted_before_alerts_are_inserted", () => {
     const { container } = render(<AlertDisplayArea />);
 
+    expect(
+      screen.getByRole("region", { name: "Notifications" }),
+    ).toBeInTheDocument();
     expect(
       container.querySelector('[aria-live="assertive"]'),
     ).toBeInTheDocument();
@@ -48,7 +51,9 @@ describe("AlertDisplayArea accessibility", () => {
       useAlertStore.getState().setSuccessData({ title: "Flow saved" });
     });
 
+    const region = screen.getByRole("region", { name: "Notifications" });
     const status = screen.getByRole("status");
+    expect(region).toContainElement(status);
     expect(status).toHaveAttribute("aria-live", "polite");
     expect(status).toHaveAttribute("aria-atomic", "true");
     expect(status).toHaveTextContent("Flow saved");

src/frontend/src/alerts/displayArea/index.tsx

@@ -1,9 +1,11 @@
+import { useTranslation } from "react-i18next";
 import useAlertStore from "../../stores/alertStore";
 import ErrorAlert from "../error";
 import NoticeAlert from "../notice";
 import SuccessAlert from "../success";
 
 export default function AlertDisplayArea() {
+  const { t } = useTranslation();
   const removeFromTempNotificationList = useAlertStore(
     (state) => state.removeFromTempNotificationList,
   );
@@ -21,7 +23,11 @@ export default function AlertDisplayArea() {
   );
 
   return (
-    <div style={{ zIndex: 999 }}>
+    <div
+      role="region"
+      aria-label={t("alerts.notificationsTitle")}
+      style={{ zIndex: 999 }}
+    >
       <div
         aria-atomic="true"
         aria-live="assertive"

src/frontend/src/components/ui/__tests__/button.a11y.test.tsx

@@ -24,12 +24,12 @@ describe("Button accessibility", () => {
   });
 
   it("should_keep_accessible_name_while_loading", () => {
-    // Loading visually hides the label ("invisible" class) but must keep
-    // it in the accessibility tree so the name does not disappear.
+    // Loading keeps the label via sr-only (visibility:hidden would drop the name).
     render(<Button loading>Save flow</Button>);
 
     const button = screen.getByRole("button", { name: "Save Flow" });
     expect(button).toBeDisabled();
+    expect(button).toHaveAttribute("aria-busy", "true");
   });
 
   it("should_be_disabled_when_disabled", () => {

src/frontend/src/components/ui/button.tsx

@@ -106,20 +106,24 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
               : cn(className)
           }
           disabled={loading || disabled}
+          aria-busy={loading || undefined}
           {...(asChild ? {} : { type: type || "button" })}
           ref={ref}
           {...props}
         >
           {loading ? (
             <span className="relative flex items-center justify-center">
+              {/* Reserve layout width; hide from a11y so the name comes from sr-only. */}
               <span
+                aria-hidden="true"
                 className={cn(
                   className,
                   "invisible flex items-center justify-center gap-2 !p-0",
                 )}
               >
                 {newChildren}
               </span>
+              <span className="sr-only">{newChildren}</span>
               <span className="absolute inset-0 flex items-center justify-center">
                 <ForwardedIconComponent
                   name={"Loader2"}

src/frontend/src/pages/SettingsPage/pages/DBProvidersPage/index.tsx

@@ -531,7 +531,7 @@ function ProviderListItem({
       className={cn(
         "flex w-full cursor-pointer items-center justify-between rounded-lg px-2 py-3 text-left transition-colors hover:bg-muted/50",
         isSelected && "bg-muted/50",
-        isComingSoon && "cursor-default opacity-70",
+        isComingSoon && "cursor-default",
       )}
       onClick={onSelect}
     >
@@ -553,7 +553,7 @@ function ProviderListItem({
             {provider.label}
           </span>
           {isComingSoon && (
-            <Badge variant="secondaryStatic" size="sq" className="text-xs">
+            <Badge variant="secondary" size="sq" className="text-xs">
               {t("settings.dbProviders.comingSoon")}
             </Badge>
           )}
@@ -644,7 +644,7 @@ function ProviderConfigurationPanel({
                 </Badge>
               )}
               {isComingSoon && (
-                <Badge variant="secondaryStatic" size="sq" className="text-xs">
+                <Badge variant="secondary" size="sq" className="text-xs">
                   {t("settings.dbProviders.comingSoon")}
                 </Badge>
               )}