fix(app): improve modal a11y (#483)

* fix(app): improve modal a11y

* fix(app): add title to AddQuestionConfirmationModal

Author: grzegorzpokorski

apps/app/src/components/AddQuestionConfirmationModal.tsx

@@ -12,12 +12,14 @@ export const AddQuestionConfirmationModal = (props: ComponentProps<typeof BaseMo
 	return (
 		<BaseModal {...props}>
 			<div className="flex flex-col items-center text-center text-violet-700 dark:text-violet-300">
+				<BaseModal.Title modalId={props.modalId} className="sr-only">
+					Potwierdzenie przekazania pytania do zatwierdzenia.
+				</BaseModal.Title>
 				<p>
 					Jeszcze momencik… a Twoje pytanie pojawi się na liście dostępnych pytań. Najpierw musimy
 					rzucić na nie okiem i zatwierdzić.
 					<br /> W międzyczasie zajrzyj na bloga ❤️
 				</p>
-
 				<a
 					href="https://typeofweb.com/"
 					target="_blank"
@@ -28,7 +30,6 @@ export const AddQuestionConfirmationModal = (props: ComponentProps<typeof BaseMo
 						<Logo className="h-full w-full" viewBox="0 0 400 400" />
 					</div>
 				</a>
-
 				<Button type="button" variant="alternative" className="mt-8" onClick={closeModal}>
 					OK!
 				</Button>

apps/app/src/components/AddQuestionModal.tsx

@@ -80,7 +80,9 @@ export const AddQuestionModal = (props: ComponentProps<typeof BaseModal>) => {
 
 	return (
 		<BaseModal {...props}>
-			<BaseModal.Title>{modalData ? "Edytuj" : "Nowe"} pytanie</BaseModal.Title>
+			<BaseModal.Title modalId={props.modalId}>
+				{modalData ? "Edytuj" : "Nowe"} pytanie
+			</BaseModal.Title>
 			<form onSubmit={handleFormSubmit}>
 				<div className="mt-10 flex flex-col gap-y-3 sm:flex-row sm:justify-evenly sm:gap-x-5">
 					<label className="flex w-full flex-col gap-2">

apps/app/src/components/AppModals.tsx

@@ -18,7 +18,7 @@ export const AppModals = () => {
 	return (
 		<>
 			{Object.entries(modals).map(([type, Modal]) => (
-				<Modal key={type} isOpen={type === openedModal} onClose={closeModal} />
+				<Modal key={type} isOpen={type === openedModal} onClose={closeModal} modalId={type} />
 			))}
 		</>
 	);

apps/app/src/components/BaseModal/BaseModal.tsx

@@ -14,9 +14,10 @@ type BaseModalProps = Readonly<{
 	isOpen: boolean;
 	onClose: () => void;
 	children?: ReactNode;
+	modalId: string;
 }>;
 
-export const BaseModal = ({ isOpen, onClose, children }: BaseModalProps) => {
+export const BaseModal = ({ isOpen, onClose, children, modalId }: BaseModalProps) => {
 	const { openedModal } = useUIContext();
 
 	useEffect(() => {
@@ -41,6 +42,10 @@ export const BaseModal = ({ isOpen, onClose, children }: BaseModalProps) => {
 					unlockScroll({ mobileOnly: false });
 				}
 			}}
+			role="dialog"
+			aria-modal={true}
+			aria-labelledby={`${modalId}-title`}
+			id={modalId}
 		>
 			<div className="m-auto flex min-h-full w-fit sm:items-center">
 				<div

apps/app/src/components/BaseModal/ModalTitle.tsx

@@ -1,11 +1,20 @@
 import type { ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
 
 type ModalTitleProps = Readonly<{
 	children: ReactNode;
+	modalId: string;
+	className?: string;
 }>;
 
-export const ModalTitle = ({ children }: ModalTitleProps) => (
-	<h2 className="text-center text-xl font-bold uppercase text-primary dark:text-neutral-200">
+export const ModalTitle = ({ children, modalId, className }: ModalTitleProps) => (
+	<h2
+		className={twMerge(
+			"text-center text-xl font-bold uppercase text-primary dark:text-neutral-200",
+			className,
+		)}
+		id={`${modalId}-title`}
+	>
 		{children}
 	</h2>
 );