fixed accesiblity

varianter · Aug 28, 2024 · 81cf3f0 · 81cf3f0
1 parent 6181b2e
commit 81cf3f0
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/src/hemsedal24/bilder.tsx b/src/hemsedal24/bilder.tsx
@@ -50,7 +50,7 @@ export default function Bilder() {
              * @see https://docs.uploadthing.com/api-reference/react#uploadbutton
              */
             endpoint="videoAndImage"
-            onClientUploadComplete={(res: any) => {
+            onClientUploadComplete={(_: any) => {
               fetchFiles();
             }}
           />

diff --git a/src/hemsedal24/components/Files.tsx b/src/hemsedal24/components/Files.tsx
@@ -26,7 +26,7 @@ export default function Files({ data }: any) {
       {data.files.length > 0 ?
       <div id="pictureContainer" className={styles.container}>
       {data.files.map((file:any, index:number) =>
-      <div key={file.id} className={styles.image} onClick={()=>imageClicked(file.id, index)}>
+      <div key={file.id} className={styles.image} onClick={()=>imageClicked(file.id, index)} onKeyDown={()=>imageClicked(file.id, index)}>
         <img src={`https://utfs.io/f/${file.key}`} alt={` ${file.name}`}/></div>)} </div>  :<div className={styles.nopictures}><h4>Ingen bilder ennå!</h4></div>}
 
       {isPopoverOpen && (

diff --git a/src/hemsedal24/components/Popover.tsx b/src/hemsedal24/components/Popover.tsx
@@ -23,9 +23,17 @@ const Popover: React.FC<PopoverProps> = ({ onClose, children }) => {
     };
   }, [onClose]);
 
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape' || event.key === 'Enter') {
+      if (popoverRef.current && !popoverRef.current.contains(event.target as Node)) {
+      onClose();
+    }}
+  };
+  document.addEventListener('keydown', handleKeyDown);
+
   return (
     <>
-      <div className={styles.backdrop} onClick={onClose}>   </div>  
+      <div className={styles.backdrop} onClick={onClose} tabIndex={0} role='button' aria-label="Close popover">  </div>  
       <div ref={popoverRef} className={styles.popover_content}>
         {children}
       </div>