From 45c68a0bccef20389b283c4adfb51a42403a2d79 Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Wed, 4 Jan 2023 18:04:25 +0100
Subject: [PATCH 1/2] fix(app): improve modal a11y

---
 apps/app/src/components/AddQuestionModal.tsx     |  4 +++-
 apps/app/src/components/AppModals.tsx            |  2 +-
 apps/app/src/components/BaseModal/BaseModal.tsx  |  7 ++++++-
 apps/app/src/components/BaseModal/ModalTitle.tsx | 13 +++++++++++--
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/apps/app/src/components/AddQuestionModal.tsx b/apps/app/src/components/AddQuestionModal.tsx
index 1546a453..a8b3aac2 100644
--- a/apps/app/src/components/AddQuestionModal.tsx
+++ b/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">
diff --git a/apps/app/src/components/AppModals.tsx b/apps/app/src/components/AppModals.tsx
index 4d91860a..4e0a3f2f 100644
--- a/apps/app/src/components/AppModals.tsx
+++ b/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} />
 			))}
 		</>
 	);
diff --git a/apps/app/src/components/BaseModal/BaseModal.tsx b/apps/app/src/components/BaseModal/BaseModal.tsx
index c1916ead..714f47e4 100644
--- a/apps/app/src/components/BaseModal/BaseModal.tsx
+++ b/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
diff --git a/apps/app/src/components/BaseModal/ModalTitle.tsx b/apps/app/src/components/BaseModal/ModalTitle.tsx
index 2605a542..ef3ea10a 100644
--- a/apps/app/src/components/BaseModal/ModalTitle.tsx
+++ b/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>
 );

From f59e915444dcf94ace0cd586f0a838bd518c68f7 Mon Sep 17 00:00:00 2001
From: Grzegorz Pokorski <mr.pokorski@gmail.com>
Date: Wed, 4 Jan 2023 18:07:25 +0100
Subject: [PATCH 2/2] fix(app): add title to AddQuestionConfirmationModal

---
 apps/app/src/components/AddQuestionConfirmationModal.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/components/AddQuestionConfirmationModal.tsx b/apps/app/src/components/AddQuestionConfirmationModal.tsx
index d8d1f949..f6a58e03 100644
--- a/apps/app/src/components/AddQuestionConfirmationModal.tsx
+++ b/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>