apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-06-22 21:28:12 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: enhance accessibility of ExpandedMediaOverlay with ARIA roles and focus management

Browse source
This commit is contained in:
JoeMakuta 2026-03-27 17:38:32 +02:00
parent c7ace83b61
commit c76ff79bc4
1 changed files with 12 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

13
surfsense_web/components/ui/expanded-gif-overlay.tsx
View file

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