Spam Reporting UI changes

ts/components/Modal.tsx

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import { noop } from 'lodash';
 import { animated } from '@react-spring/web';
 
+import { v4 as uuid } from 'uuid';
 import type { LocalizerType } from '../types/Util';
 import { ModalHost } from './ModalHost';
 import type { Theme } from '../util/theme';
@@ -37,6 +38,7 @@ type PropsType = {
   title?: ReactNode;
   useFocusTrap?: boolean;
   padded?: boolean;
+  ['aria-describedby']?: string;
 };
 
 export type ModalPropsType = PropsType & {
@@ -65,6 +67,7 @@ export function Modal({
   hasFooterDivider = false,
   noTransform = false,
   padded = true,
+  'aria-describedby': ariaDescribedBy,
 }: Readonly<ModalPropsType>): JSX.Element | null {
   const { close, isClosed, modalStyles, overlayStyles } = useAnimated(
     onClose,
@@ -132,6 +135,7 @@ export function Modal({
           padded={padded}
           hasHeaderDivider={hasHeaderDivider}
           hasFooterDivider={hasFooterDivider}
+          aria-describedby={ariaDescribedBy}
         >
           {children}
         </ModalPage>
@@ -173,6 +177,7 @@ export function ModalPage({
   padded = true,
   hasHeaderDivider = false,
   hasFooterDivider = false,
+  'aria-describedby': ariaDescribedBy,
 }: ModalPageProps): JSX.Element {
   const modalRef = useRef<HTMLDivElement | null>(null);
 
@@ -188,6 +193,8 @@ export function ModalPage({
   );
   const getClassName = getClassNamesFor(BASE_CLASS_NAME, moduleClassName);
 
+  const [id] = useState(() => uuid());
+
   useScrollObserver(bodyRef, bodyInnerRef, scroll => {
     setScrolled(isScrolled(scroll));
     setScrolledToBottom(isScrolledToBottom(scroll));
@@ -198,7 +205,7 @@ export function ModalPage({
     <>
       {/* We don't want the click event to propagate to its container node. */}
       {/* eslint-disable-next-line max-len */}
-      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}
       <div
         className={classNames(
           getClassName(''),
@@ -209,6 +216,10 @@ export function ModalPage({
           hasFooterDivider && getClassName('--footer-divider')
         )}
         ref={modalRef}
+        role="dialog"
+        tabIndex={-1}
+        aria-labelledby={title ? `${id}-title` : undefined}
+        aria-describedby={ariaDescribedBy}
         onClick={event => {
           event.stopPropagation();
         }}
@@ -234,6 +245,7 @@ export function ModalPage({
               )}
               {title && (
                 <h1
+                  id={`${id}-title`}
                   className={classNames(
                     getClassName('__title'),
                     hasXButton ? getClassName('__title--with-x-button') : null