improve NotificationModal accessibility

sumup-oss · Dec 4, 2024 · 16d765e · 16d765e
1 parent 779b407
commit 16d765e
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/packages/circuit-ui/components/NotificationModal/NotificationModal.tsx b/packages/circuit-ui/components/NotificationModal/NotificationModal.tsx
@@ -15,7 +15,7 @@
 
 'use client';
 
-import { type FC, type ReactNode, type SVGProps, useId } from 'react';
+import { type FC, type ReactNode, type SVGProps, useId, useRef } from 'react';
 
 import type { ClickEvent } from '../../types/events.js';
 import { Image, type ImageProps } from '../Image/index.js';
@@ -85,12 +85,14 @@ export const NotificationModal = ({
   ...props
 }: NotificationModalProps) => {
   const headlineId = useId();
+  const initialFocusRef = useRef<HTMLButtonElement>(null);
   const dialogProps = {
     className: clsx(classes.centered, className, classes.base),
     closeButtonLabel,
     'aria-labelledby': headlineId,
     preventClose,
     onClose,
+    initialFocusRef,
     ...props,
   };
 
@@ -124,6 +126,8 @@ export const NotificationModal = ({
                 },
                 secondary: actions.secondary && {
                   ...actions.secondary,
+                  // @ts-expect-error ref is a valid prop on a button
+                  ref: initialFocusRef,
                   onClick: wrapOnClick(actions.secondary.onClick),
                 },
               }}