From 956dad7ff5731d7630526ec97e33c652f260bc13 Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Mon, 27 Oct 2025 14:59:50 -0500
Subject: [PATCH] fix: visually hidden focus guards (#142)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 packages/html/src/components/media-popover.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/html/src/components/media-popover.ts b/packages/html/src/components/media-popover.ts
index 6a5f5156..c0e7cf6d 100644
--- a/packages/html/src/components/media-popover.ts
+++ b/packages/html/src/components/media-popover.ts
@@ -378,11 +378,14 @@ export class MediaPopoverPortal extends HTMLElement {
   }
 }
 
+const visuallyHiddenStyles = 'position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;';
+
 function createFocusGuard(dataType: 'inside' | 'outside'): HTMLElement {
   const focusGuard = document.createElement('span');
   focusGuard.setAttribute('data-type', dataType);
   focusGuard.setAttribute('tabindex', '0');
   focusGuard.toggleAttribute('data-focus-guard', true);
+  focusGuard.style.cssText = visuallyHiddenStyles;
   return focusGuard;
 }