Fix AlertDialog ARIA

This commit is contained in:
Mats Bosson 2026-03-29 08:22:31 +07:00
parent 3388dbd371
commit 576001f89f
3 changed files with 13 additions and 3 deletions

View File

@ -43,8 +43,8 @@ export function AlertDialogContent(props: AlertDialogContentProps): JSX.Element
id={ctx.contentId()}
role="alertdialog"
aria-modal="true"
aria-labelledby={ctx.titleId() ?? undefined}
aria-describedby={ctx.descriptionId() ?? undefined}
aria-labelledby={ctx.titleId() || undefined}
aria-describedby={ctx.descriptionId() || undefined}
data-state={ctx.isOpen() ? "open" : "closed"}
{...rest}
>

View File

@ -13,8 +13,11 @@ import {
/** Props for the AlertDialog root. */
export interface AlertDialogRootProps {
/** Controls open state externally. */
open?: boolean;
/** Initial open state when uncontrolled. */
defaultOpen?: boolean;
/** Called when open state changes. */
onOpenChange?: (open: boolean) => void;
children: JSX.Element;
}

View File

@ -18,7 +18,14 @@ export function AlertDialogTrigger(props: AlertDialogTriggerProps): JSX.Element
};
return (
<button type="button" aria-haspopup="dialog" onClick={handleClick} {...rest}>
<button
type="button"
aria-haspopup="dialog"
aria-controls={ctx.contentId()}
aria-expanded={ctx.isOpen() ? "true" : "false"}
onClick={handleClick}
{...rest}
>
{local.children}
</button>
);