From 3344809a906c77bbebe6d6563e356e4b130ba367 Mon Sep 17 00:00:00 2001
From: Mohammad Shahid Beigh <mohammadshahidbeigh@gmail.com>
Date: Fri, 10 Jan 2025 13:05:52 +0530
Subject: [PATCH] fix(accessibility): resolve keyboard navigation issues on
 Actions menu and preview buttons (#4459)

---
 .../components/code-window/window-actions.tsx | 31 +++++++++++++++++--
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/apps/docs/components/code-window/window-actions.tsx b/apps/docs/components/code-window/window-actions.tsx
index add1f96c93..fac8977186 100644
--- a/apps/docs/components/code-window/window-actions.tsx
+++ b/apps/docs/components/code-window/window-actions.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useEffect, useCallback, useState} from "react";
 import {tv} from "tailwind-variants";
 import {clsx} from "@nextui-org/shared-utils";
 
@@ -19,12 +19,33 @@ const windowIconStyles = tv({
 });
 
 export const WindowActions: React.FC<WindowActionsProps> = ({title, className, ...props}) => {
+  const [isMenuVisible, setIsMenuVisible] = useState(true);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.key === "Escape") {
+      setIsMenuVisible(false); // Close the menu
+    }
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleKeyDown]);
+
+  if (!isMenuVisible) return null; // Hide component if menu is closed
+
   return (
     <div
+      aria-hidden={!isMenuVisible} // Visibility state
+      aria-labelledby="window-actions-title"
       className={clsx(
         "flex items-center sticky top-0 left-0 px-4 z-10 justify-between h-8 bg-code-background w-full",
         className,
       )}
+      role="dialog" // Semantic role
       {...props}
     >
       <div className="flex items-center gap-2 basis-1/3">
@@ -32,10 +53,14 @@ export const WindowActions: React.FC<WindowActionsProps> = ({title, className, .
         <div className={windowIconStyles({color: "yellow"})} />
         <div className={windowIconStyles({color: "green"})} />
       </div>
-      <div className="flex basis-1/3 h-full justify-center items-center">
+      <div className="flex basis-1/3 h-full justify-center items-center" id="window-actions-title">
         {title && <p className="text-white/30 text-xs font-light">{title}</p>}
       </div>
-      <div className="flex basis-1/3" />
+      <div className="flex basis-1/3">
+        <button className="ml-auto text-xs text-white/50" onClick={() => setIsMenuVisible(false)}>
+          Close
+        </button>
+      </div>
     </div>
   );
 };