admin/goodgo-platform
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(a11y): add DialogContext auto-labelling with aria-labelledby/describedby

Browse Source 
Introduce DialogContext using React.useId() that auto-wires aria-labelledby
and aria-describedby on DialogContent, with matching ids on DialogTitle and
DialogDescription. Adds role="dialog" and aria-modal="true". All 12+ existing
consumers get proper ARIA labels without any call-site changes.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
2026-04-24 10:33:54 +07:00
parent f5118244b7
commit d7961e297c
3 changed files with 232 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
apps/web/components/ui/__tests__/dialog.spec.tsx
View File

@@ -68,4 +68,53 @@ describe('Dialog', () => {
await userEvent.click(screen.getByText('Stay Open'));
expect(onOpenChange).not.toHaveBeenCalled();
});
describe('a11y: DialogContext auto-labelling', () => {
it('renders DialogContent with role="dialog" and aria-modal', () => {
render(
<Dialog open={true} onOpenChange={() => {}}>
<DialogContent>
<DialogTitle>A11y Title</DialogTitle>
</DialogContent>
</Dialog>,
);
const dialog = screen.getByRole('dialog');
expect(dialog).toHaveAttribute('aria-modal', 'true');
});
it('auto-wires aria-labelledby from DialogTitle id', () => {
render(
<Dialog open={true} onOpenChange={() => {}}>
<DialogContent>
<DialogTitle>Auto Label</DialogTitle>
<DialogDescription>Auto Desc</DialogDescription>
</DialogContent>
</Dialog>,
);
const dialog = screen.getByRole('dialog');
const titleId = dialog.getAttribute('aria-labelledby');
const descId = dialog.getAttribute('aria-describedby');
expect(titleId).toBeTruthy();
expect(descId).toBeTruthy();
// The title element should carry the matching id
expect(screen.getByText('Auto Label')).toHaveAttribute('id', titleId);
expect(screen.getByText('Auto Desc')).toHaveAttribute('id', descId);
});
it('allows explicit id override on DialogTitle', () => {
render(
<Dialog open={true} onOpenChange={() => {}}>
<DialogContent>
<DialogTitle id="custom-title">Custom</DialogTitle>
</DialogContent>
</Dialog>,
);
expect(screen.getByText('Custom')).toHaveAttribute('id', 'custom-title');
});
});
});

90
apps/web/components/ui/dialog.tsx
View File

@@ -3,6 +3,23 @@
import * as React from 'react';
import { cn } from '@/lib/utils';
/* ------------------------------------------------------------------ */
/* DialogContext — auto-wires aria-labelledby / aria-describedby */
/* ------------------------------------------------------------------ */
interface DialogContextValue {
titleId: string;
descriptionId: string;
}
const DialogContext = React.createContext<DialogContextValue | null>(null);
function useDialogContext() {
return React.useContext(DialogContext);
}
/* ------------------------------------------------------------------ */
interface DialogProps {
open: boolean;
onOpenChange: (open: boolean) => void;
@@ -10,6 +27,10 @@ interface DialogProps {
}
function Dialog({ open, onOpenChange, children }: DialogProps) {
const reactId = React.useId();
const titleId = `${reactId}-dialog-title`;
const descriptionId = `${reactId}-dialog-desc`;
React.useEffect(() => {
if (open) {
document.body.style.overflow = 'hidden';
@@ -24,34 +45,43 @@ function Dialog({ open, onOpenChange, children }: DialogProps) {
if (!open) return null;
return (
<div className="fixed inset-0 z-50">
<div
className="fixed inset-0 bg-black/80 animate-in fade-in-0"
onClick={() => onOpenChange(false)}
/>
<div className="fixed inset-0 flex items-center justify-center p-4">
{children}
<DialogContext.Provider value={{ titleId, descriptionId }}>
<div className="fixed inset-0 z-50">
<div
className="fixed inset-0 bg-black/80 animate-in fade-in-0"
onClick={() => onOpenChange(false)}
/>
<div className="fixed inset-0 flex items-center justify-center p-4">
{children}
</div>
</div>
</div>
</DialogContext.Provider>
);
}
const DialogContent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, children, ...props }, ref) => (
<div
ref={ref}
className={cn(
'relative z-50 w-full max-w-lg rounded-lg border bg-background p-6 shadow-lg animate-in fade-in-0 zoom-in-95',
className,
)}
onClick={(e) => e.stopPropagation()}
{...props}
>
{children}
</div>
));
>(({ className, children, ...props }, ref) => {
const ctx = useDialogContext();
return (
<div
ref={ref}
role="dialog"
aria-modal="true"
aria-labelledby={ctx?.titleId}
aria-describedby={ctx?.descriptionId}
className={cn(
'relative z-50 w-full max-w-lg rounded-lg border bg-background p-6 shadow-lg animate-in fade-in-0 zoom-in-95',
className,
)}
onClick={(e) => e.stopPropagation()}
{...props}
>
{children}
</div>
);
});
DialogContent.displayName = 'DialogContent';
function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
@@ -60,15 +90,25 @@ function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivEleme
);
}
function DialogTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
function DialogTitle({ className, id, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
const ctx = useDialogContext();
return (
<h2 className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />
<h2
id={id ?? ctx?.titleId}
className={cn('text-lg font-semibold leading-none tracking-tight', className)}
{...props}
/>
);
}
function DialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
function DialogDescription({ className, id, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
const ctx = useDialogContext();
return (
<p className={cn('text-sm text-muted-foreground', className)} {...props} />
<p
id={id ?? ctx?.descriptionId}
className={cn('text-sm text-muted-foreground', className)}
{...props}
/>
);
}