a11y: improve accessibility with ARIA enhancements and focus management (#149)

This commit significantly improves accessibility for keyboard and screen reader users:

1. Enhanced ARIA Attributes:
   - Added role="img" to container when iframe not loaded (it's a static preview)
   - Added aria-label to container describing it as a YouTube preview
   - Added aria-hidden to button when iframe is active (button no longer functional)
   - Added tabIndex=-1 to button when iframe loaded (prevents focus on hidden element)

2. Visually Hidden Text for Screen Readers:
   - Added visually-hidden span inside button with announce text
   - Provides better context for screen reader users
   - Uses standard visually-hidden CSS technique (accessible but invisible)

3. Focus Management (Optional):
   - Added focusOnLoad prop to automatically focus iframe when loaded
   - Helps keyboard users know where they are after interaction
   - Maintains keyboard navigation flow
   - Default: false (opt-in behavior)

4. Customizable Referrer Policy:
   - Added referrerPolicy prop to customize iframe referrer policy
   - Default: "strict-origin-when-cross-origin"
   - Improves privacy and security configuration options

5. CSS Improvements:
   - Added .lty-visually-hidden class for screen reader only content
   - Standard implementation following WCAG guidelines
   - Ensures text is accessible but doesn't affect visual layout

Accessibility Benefits:
- Better screen reader announcements
- Clearer focus indication
- Improved keyboard navigation
- WCAG 2.1 compliance improvements
- Better context for assistive technologies

All tests passing (20/20).

Co-authored-by: Claude <noreply@anthropic.com>

Author: ibrahimcesar

src/lib/LiteYouTubeEmbed.css

@@ -68,3 +68,16 @@
   opacity: 0;
   pointer-events: none;
 }
+
+/* Visually hidden but accessible to screen readers */
+.lty-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

src/lib/index.tsx

@@ -29,6 +29,8 @@ export interface LiteYouTubeProps {
   rel?: string;
   containerElement?: keyof React.JSX.IntrinsicElements;
   style?: React.CSSProperties;
+  focusOnLoad?: boolean;
+  referrerPolicy?: string;
 }
 
 function LiteYouTubeEmbedComponent(
@@ -130,8 +132,13 @@ function LiteYouTubeEmbedComponent(
   React.useEffect(() => {
     if (iframe) {
       onIframeAdded();
+
+      // Focus iframe if focusOnLoad is enabled and ref is available
+      if (props.focusOnLoad && typeof ref === 'object' && ref?.current) {
+        ref.current.focus();
+      }
     }
-  }, [iframe]);
+  }, [iframe, onIframeAdded, props.focusOnLoad, ref]);
 
   return (
     <>
@@ -158,6 +165,8 @@ function LiteYouTubeEmbedComponent(
         onClick={addIframe}
         className={`${wrapperClassImp} ${iframe ? activatedClassImp : ""}`}
         data-title={videoTitle}
+        role={!iframe ? "img" : undefined}
+        aria-label={!iframe ? `${videoTitle} - YouTube video preview` : undefined}
         style={{
           backgroundImage: `url(${posterUrl})`,
           ...({
@@ -170,7 +179,13 @@ function LiteYouTubeEmbedComponent(
           type="button"
           className={playerClassImp}
           aria-label={`${announceWatch} ${videoTitle}`}
-        />
+          aria-hidden={iframe || undefined}
+          tabIndex={iframe ? -1 : 0}
+        >
+          <span className="lty-visually-hidden">
+            {announceWatch}
+          </span>
+        </button>
         {iframe && (
           <iframe
             ref={ref}
@@ -182,7 +197,7 @@ function LiteYouTubeEmbedComponent(
             allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
             allowFullScreen
             src={iframeSrc}
-            referrerPolicy="strict-origin-when-cross-origin"
+            referrerPolicy={props.referrerPolicy || "strict-origin-when-cross-origin"}
           ></iframe>
         )}
       </ContainerElement>