diff --git a/src/Alert.tsx b/src/Alert.tsx index dade456b..30dfe3b9 100644 --- a/src/Alert.tsx +++ b/src/Alert.tsx @@ -74,10 +74,14 @@ export const Alert = memo( closable: isClosableByUser = false, isClosed: props_isClosed, onClose, - role = "alert", + role: roleFromProps, ...rest } = props; + // Honour explicit `role={undefined}` to opt out of the role attribute (RGAA 8.7). + // When role is omitted entirely, default to "alert" for screen reader announcements. + const role = "role" in props ? roleFromProps : ("alert" as const); + assert>(); const id = useAnalyticsId({ @@ -90,7 +94,6 @@ export const Alert = memo( const [buttonElement, setButtonElement] = useState(null); const refShouldButtonGetFocus = useRef(false); - const refShouldSetRole = useRef(false); const DescriptionTag = typeof description === "string" ? "p" : "div"; useEffect(() => { @@ -100,7 +103,6 @@ export const Alert = memo( setIsClosed(isClosed => { if (isClosed && !props_isClosed) { refShouldButtonGetFocus.current = true; - refShouldSetRole.current = true; } return props_isClosed; @@ -147,8 +149,7 @@ export const Alert = memo( className )} style={style} - {...(refShouldSetRole.current && { "role": role })} - {...(role ? { "role": role } : {})} + {...(role !== undefined ? { "role": role } : {})} ref={ref} {...rest} >