From c76ff79bc45181b1cd46010ff75779017d0daa68 Mon Sep 17 00:00:00 2001
From: JoeMakuta <makutajosue@gmail.com>
Date: Fri, 27 Mar 2026 17:38:32 +0200
Subject: [PATCH 1/3] feat: enhance accessibility of ExpandedMediaOverlay with
 ARIA roles and focus management

---
 .../components/ui/expanded-gif-overlay.tsx          | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/surfsense_web/components/ui/expanded-gif-overlay.tsx b/surfsense_web/components/ui/expanded-gif-overlay.tsx
index 96a1dd424..b3e1c30ac 100644
--- a/surfsense_web/components/ui/expanded-gif-overlay.tsx
+++ b/surfsense_web/components/ui/expanded-gif-overlay.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { AnimatePresence, motion } from "motion/react";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
 function isVideoSrc(src: string) {
@@ -17,6 +17,12 @@ function ExpandedMediaOverlay({
 	alt: string;
 	onClose: () => void;
 }) {
+	const overlayRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		overlayRef.current?.focus();
+	}, []);
+
 	useEffect(() => {
 		const handleKey = (e: KeyboardEvent) => {
 			if (e.key === "Escape") onClose();
@@ -52,6 +58,11 @@ function ExpandedMediaOverlay({
 
 	return createPortal(
 		<motion.div
+			role="dialog"
+			aria-modal="true"
+			aria-label="Expanded media view"
+			tabIndex={-1}
+			ref={overlayRef}
 			initial={{ opacity: 0 }}
 			animate={{ opacity: 1 }}
 			exit={{ opacity: 0 }}

From 5f15ce9d1a4a029576ce134659c0afe4707c78df Mon Sep 17 00:00:00 2001
From: JoeMakuta <makutajosue@gmail.com>
Date: Fri, 27 Mar 2026 17:51:10 +0200
Subject: [PATCH 2/3] feat: add keyboard accessibility to ExpandedMediaOverlay
 for closing with Escape key

---
 surfsense_web/components/ui/expanded-gif-overlay.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/surfsense_web/components/ui/expanded-gif-overlay.tsx b/surfsense_web/components/ui/expanded-gif-overlay.tsx
index b3e1c30ac..018bce944 100644
--- a/surfsense_web/components/ui/expanded-gif-overlay.tsx
+++ b/surfsense_web/components/ui/expanded-gif-overlay.tsx
@@ -69,6 +69,9 @@ function ExpandedMediaOverlay({
 			transition={{ duration: 0.2 }}
 			className="fixed inset-0 z-100 flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm sm:p-8"
 			onClick={onClose}
+			onKeyDown={(e) => {
+      		if (e.key === 'Escape') onClose();
+    		}}
 		>
 			{mediaElement}
 		</motion.div>,

From 3fece6f765a60fbce7b28f21b3f42b66c6dcc4d5 Mon Sep 17 00:00:00 2001
From: JoeMakuta <makutajosue@gmail.com>
Date: Fri, 27 Mar 2026 18:07:14 +0200
Subject: [PATCH 3/3] code style

---
 surfsense_web/components/ui/expanded-gif-overlay.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/surfsense_web/components/ui/expanded-gif-overlay.tsx b/surfsense_web/components/ui/expanded-gif-overlay.tsx
index 018bce944..532ba1d32 100644
--- a/surfsense_web/components/ui/expanded-gif-overlay.tsx
+++ b/surfsense_web/components/ui/expanded-gif-overlay.tsx
@@ -70,8 +70,8 @@ function ExpandedMediaOverlay({
 			className="fixed inset-0 z-100 flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm sm:p-8"
 			onClick={onClose}
 			onKeyDown={(e) => {
-      		if (e.key === 'Escape') onClose();
-    		}}
+				if (e.key === "Escape") onClose();
+			}}
 		>
 			{mediaElement}
 		</motion.div>,