Spam Reporting UI changes

This commit is contained in:
Jamie Kyle 2024-03-12 09:29:31 -07:00 committed by GitHub
parent e031d136a1
commit 8387f938eb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
88 changed files with 2711 additions and 807 deletions

View file

@ -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