mats.bosson/PettyUI
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix AlertDialog ARIA

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/core/src/components/alert-dialog/alert-dialog-content.tsx
View File

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

3
packages/core/src/components/alert-dialog/alert-dialog-root.tsx
View File

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

9
packages/core/src/components/alert-dialog/alert-dialog-trigger.tsx
View File

@ -18,7 +18,14 @@ export function AlertDialogTrigger(props: AlertDialogTriggerProps): JSX.Element
}; };
return ( 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} {local.children}
</button> </button>
); );