diff --git a/app/ui/lib/Modal.tsx b/app/ui/lib/Modal.tsx index e1b07377e..261300f6a 100644 --- a/app/ui/lib/Modal.tsx +++ b/app/ui/lib/Modal.tsx @@ -8,7 +8,6 @@ import * as Dialog from '@radix-ui/react-dialog' import { animated, useTransition } from '@react-spring/web' import cn from 'classnames' -import React, { forwardRef, useId } from 'react' import type { MergeExclusive } from 'type-fest' import { Close12Icon } from '@oxide/design-system/icons/react' @@ -42,7 +41,6 @@ export function Modal({ narrow, overlay = true, }: ModalProps) { - const titleId = useId() const AnimatedDialogContent = animated(Dialog.Content) const config = { tension: 650, mass: 0.125 } @@ -74,7 +72,7 @@ export function Modal({ 'pointer-events-auto fixed left-1/2 top-[min(50%,500px)] z-modal m-0 flex max-h-[min(800px,80vh)] w-full flex-col justify-between rounded-lg border p-0 bg-raise border-secondary elevation-2', narrow ? 'max-w-[24rem]' : 'max-w-[28rem]' )} - aria-labelledby={titleId} + aria-describedby={undefined} // radix warns without this style={{ transform: y.to((value) => `translate3d(-50%, ${-50 + value}%, 0px)`), }} @@ -85,12 +83,12 @@ export function Modal({ // https://github.com/oxidecomputer/console/issues/1745 onFocusOutside={(e) => e.preventDefault()} > - - {title} + + {title} {children} @@ -104,24 +102,6 @@ export function Modal({ ) } -interface ModalTitleProps { - children?: React.ReactNode - id?: string -} - -// not exported because we want to use the `title` prop on Modal so the aria -// label gets hooked up properly -const ModalTitle = forwardRef(({ children, id }, ref) => ( -
-

- {children} -

-
-)) - Modal.Body = classed.div`py-2 overflow-y-auto` Modal.Section = classed.div`p-4 space-y-4 border-b border-secondary text-default last-of-type:border-none text-sans-md`