From 073cb817d342b0b54cf5ad156435a00c9bb91168 Mon Sep 17 00:00:00 2001 From: naoNao89 <90588855+naoNao89@users.noreply.github.com> Date: Tue, 29 Jul 2025 21:35:33 +0700 Subject: [UI] Fix dialog accessibility and export functionality - Add DialogTitle with VisuallyHidden to CommandDialog and onboarding - Replace YouTube redirect with functional VideoExporter implementation - Create VisuallyHidden component for screen reader accessibility Resolves GitHub issue #477 (export redirecting to YouTube) Fixes console warnings about DialogContent accessibility compliance --- apps/web/src/components/ui/visually-hidden.tsx | 32 ++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 apps/web/src/components/ui/visually-hidden.tsx (limited to 'apps/web/src/components/ui/visually-hidden.tsx') diff --git a/apps/web/src/components/ui/visually-hidden.tsx b/apps/web/src/components/ui/visually-hidden.tsx new file mode 100644 index 00000000..7d6fc435 --- /dev/null +++ b/apps/web/src/components/ui/visually-hidden.tsx @@ -0,0 +1,32 @@ +"use client"; + +import * as React from "react"; +import { cn } from "../../lib/utils"; + +/** + * VisuallyHidden component provides content that is accessible to screen readers + * but visually hidden from sighted users. This is useful for providing context + * or labels that are necessary for accessibility but would be redundant visually. + * + * Based on the Radix UI VisuallyHidden primitive pattern. + */ +const VisuallyHidden = React.forwardRef< + HTMLSpanElement, + React.ComponentPropsWithoutRef<"span"> +>(({ className, ...props }, ref) => ( +