apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-17 18:35:19 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1000 from JoeMakuta/feat/add-dialog-semantics

Browse source 
feat: enhance accessibility of ExpandedMediaOverlay
This commit is contained in:
Rohan Verma 2026-03-27 14:08:55 -07:00 • committed by GitHub
commit 5fc3a4ea57
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 15 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

16
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,12 +58,20 @@ 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 }}
transition={{ duration: 0.2 }} 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" className="fixed inset-0 z-100 flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm sm:p-8"
onClick={onClose} onClick={onClose}
onKeyDown={(e) => {
if (e.key === "Escape") onClose();
}}
> >
{mediaElement} {mediaElement}
</motion.div>, </motion.div>,