From b1520783cf6b97a16fdcbbc1743eb08975241f0e Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 28 Feb 2024 16:48:26 +0530
Subject: [PATCH] [WEB-586] chore: spreadsheet layout keyboard accessibility
 (#3818)

* chore: spreadsheet layout peek overview close focus improvement

* chore: dropdown toggle focus improvement

* chore: label select toggle focus improvement

* chore: comment card disabled state improvement
---
 web/components/dropdowns/date.tsx             |   1 +
 web/components/dropdowns/estimate.tsx         |   1 +
 web/components/dropdowns/module/index.tsx     |   1 +
 web/components/dropdowns/priority.tsx         |   1 +
 web/components/dropdowns/state.tsx            |   1 +
 .../issue-activity/comments/comment-card.tsx  |   8 +-
 .../issue-layouts/properties/labels.tsx       | 151 +++++++++++-------
 .../issue-layouts/spreadsheet/issue-row.tsx   |   3 +-
 web/components/issues/peek-overview/view.tsx  |   8 +-
 9 files changed, 114 insertions(+), 61 deletions(-)

diff --git a/web/components/dropdowns/date.tsx b/web/components/dropdowns/date.tsx
index 04c7d6948..2ba5c8af3 100644
--- a/web/components/dropdowns/date.tsx
+++ b/web/components/dropdowns/date.tsx
@@ -86,6 +86,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
   const toggleDropdown = () => {
     if (!isOpen) onOpen();
     setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (isOpen) onClose && onClose();
   };
 
   const dropdownOnChange = (val: Date | null) => {
diff --git a/web/components/dropdowns/estimate.tsx b/web/components/dropdowns/estimate.tsx
index 61513cdba..663ca67ce 100644
--- a/web/components/dropdowns/estimate.tsx
+++ b/web/components/dropdowns/estimate.tsx
@@ -122,6 +122,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
   const toggleDropdown = () => {
     if (!isOpen) onOpen();
     setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (isOpen) onClose && onClose();
   };
 
   const dropdownOnChange = (val: number | null) => {
diff --git a/web/components/dropdowns/module/index.tsx b/web/components/dropdowns/module/index.tsx
index ee2d746d9..5e0a3977f 100644
--- a/web/components/dropdowns/module/index.tsx
+++ b/web/components/dropdowns/module/index.tsx
@@ -175,6 +175,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
 
   const toggleDropdown = () => {
     setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (isOpen) onClose && onClose();
   };
 
   const dropdownOnChange = (val: string & string[]) => {
diff --git a/web/components/dropdowns/priority.tsx b/web/components/dropdowns/priority.tsx
index 3aef22233..5cacefb3f 100644
--- a/web/components/dropdowns/priority.tsx
+++ b/web/components/dropdowns/priority.tsx
@@ -314,6 +314,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
 
   const toggleDropdown = () => {
     setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (isOpen) onClose && onClose();
   };
 
   const dropdownOnChange = (val: TIssuePriorities) => {
diff --git a/web/components/dropdowns/state.tsx b/web/components/dropdowns/state.tsx
index 9591a7686..9fa2f38c8 100644
--- a/web/components/dropdowns/state.tsx
+++ b/web/components/dropdowns/state.tsx
@@ -104,6 +104,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
   const toggleDropdown = () => {
     if (!isOpen) onOpen();
     setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (isOpen) onClose && onClose();
   };
 
   const dropdownOnChange = (val: string) => {
diff --git a/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx b/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
index 722fd80a5..0c2c3cbb5 100644
--- a/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
+++ b/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
@@ -149,9 +149,13 @@ export const IssueCommentCard: FC<TIssueCommentCard> = (props) => {
               type="button"
               onClick={handleSubmit(onEnter)}
               disabled={isSubmitting || isEmpty}
-              className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
+              className={`group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300  ${
+                isEmpty ? "bg-gray-200 cursor-not-allowed" : "hover:bg-green-500"
+              }`}
             >
-              <Check className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
+              <Check
+                className={`h-3 w-3 text-green-500 duration-300 ${isEmpty ? "text-black" : "group-hover:text-white"}`}
+              />
             </button>
             <button
               type="button"
diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx
index 7e14ad3da..0c1091d39 100644
--- a/web/components/issues/issue-layouts/properties/labels.tsx
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@@ -1,10 +1,11 @@
-import { Fragment, useState } from "react";
+import { Fragment, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react-lite";
 import { usePopper } from "react-popper";
 import { Check, ChevronDown, Search, Tags } from "lucide-react";
 // hooks
 import { useApplication, useLabel } from "hooks/store";
 import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
 import { Combobox } from "@headlessui/react";
 import { Tooltip } from "@plane/ui";
@@ -48,6 +49,10 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
   } = props;
   // states
   const [query, setQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
   // popper-js refs
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -60,18 +65,45 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
 
   const storeLabels = getProjectLabels(projectId);
 
-  const openDropDown = () => {
-    if (!storeLabels && workspaceSlug && projectId) {
-      setIsLoading(true);
+  const onOpen = () => {
+    if (!storeLabels && workspaceSlug && projectId)
       fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
-    }
   };
 
   const handleClose = () => {
+    if (!isOpen) return;
+    setIsOpen(false);
     onClose && onClose();
   };
 
-  const handleKeyDown = useDropdownKeyDown(openDropDown, handleClose, false);
+  const toggleDropdown = () => {
+    if (!isOpen) onOpen();
+    setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (isOpen) onClose && onClose();
+  };
+
+  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
+
+  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.stopPropagation();
+    e.preventDefault();
+    toggleDropdown();
+  };
+
+  useOutsideClickDetector(dropdownRef, handleClose);
+
+  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      setQuery("");
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: placement ?? "bottom-start",
@@ -176,6 +208,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
   return (
     <Combobox
       as="div"
+      ref={dropdownRef}
       className={`w-auto max-w-full flex-shrink-0 text-left ${className}`}
       value={value}
       onChange={onChange}
@@ -194,64 +227,68 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
               ? "cursor-pointer"
               : "cursor-pointer hover:bg-custom-background-80"
           }  ${buttonClassName}`}
-          onClick={openDropDown}
+          onClick={handleOnClick}
         >
           {label}
           {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
         </button>
       </Combobox.Button>
 
-      <Combobox.Options className="fixed z-10">
-        <div
-          className={`z-10 my-1 w-48 whitespace-nowrap rounded border border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none ${optionsClassName}`}
-          ref={setPopperElement}
-          style={styles.popper}
-          {...attributes.popper}
-        >
-          <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
-            <Search className="h-3.5 w-3.5 text-custom-text-300" />
-            <Combobox.Input
-              className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-              placeholder="Search"
-              displayValue={(assigned: any) => assigned?.name || ""}
-            />
+      {isOpen && (
+        <Combobox.Options className="fixed z-10" static>
+          <div
+            className={`z-10 my-1 w-48 whitespace-nowrap rounded border border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none ${optionsClassName}`}
+            ref={setPopperElement}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
+              <Search className="h-3.5 w-3.5 text-custom-text-300" />
+              <Combobox.Input
+                ref={inputRef}
+                className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Search"
+                displayValue={(assigned: any) => assigned?.name || ""}
+                onKeyDown={searchInputKeyDown}
+              />
+            </div>
+            <div className={`mt-2 max-h-48 space-y-1 overflow-y-scroll`}>
+              {isLoading ? (
+                <p className="text-center text-custom-text-200">Loading...</p>
+              ) : filteredOptions.length > 0 ? (
+                filteredOptions.map((option) => (
+                  <Combobox.Option
+                    key={option.value}
+                    value={option.value}
+                    className={({ active, selected }) =>
+                      `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 hover:bg-custom-background-80 ${
+                        active ? "bg-custom-background-80" : ""
+                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                    }
+                  >
+                    {({ selected }) => (
+                      <>
+                        {option.content}
+                        {selected && (
+                          <div className="flex-shrink-0">
+                            <Check className={`h-3.5 w-3.5`} />
+                          </div>
+                        )}
+                      </>
+                    )}
+                  </Combobox.Option>
+                ))
+              ) : (
+                <span className="flex items-center gap-2 p-1">
+                  <p className="text-left text-custom-text-200 ">No matching results</p>
+                </span>
+              )}
+            </div>
           </div>
-          <div className={`mt-2 max-h-48 space-y-1 overflow-y-scroll`}>
-            {isLoading ? (
-              <p className="text-center text-custom-text-200">Loading...</p>
-            ) : filteredOptions.length > 0 ? (
-              filteredOptions.map((option) => (
-                <Combobox.Option
-                  key={option.value}
-                  value={option.value}
-                  className={({ active, selected }) =>
-                    `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 hover:bg-custom-background-80 ${
-                      active ? "bg-custom-background-80" : ""
-                    } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                  }
-                >
-                  {({ selected }) => (
-                    <>
-                      {option.content}
-                      {selected && (
-                        <div className="flex-shrink-0">
-                          <Check className={`h-3.5 w-3.5`} />
-                        </div>
-                      )}
-                    </>
-                  )}
-                </Combobox.Option>
-              ))
-            ) : (
-              <span className="flex items-center gap-2 p-1">
-                <p className="text-left text-custom-text-200 ">No matching results</p>
-              </span>
-            )}
-          </div>
-        </div>
-      </Combobox.Options>
+        </Combobox.Options>
+      )}
     </Combobox>
   );
 });
diff --git a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
index 41734a867..a2935c4d7 100644
--- a/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -187,6 +187,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
   return (
     <>
       <td
+        id={`issue-${issueDetail.id}`}
         className={cn(
           "sticky group left-0 h-11  w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute border-r-[0.5px] z-[1] border-custom-border-200",
           {
@@ -244,7 +245,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
           <div className="w-full overflow-hidden">
             <Tooltip tooltipHeading="Title" tooltipContent={issueDetail.name}>
               <div
-                className="h-full w-full cursor-pointer truncate px-4 py-2.5 text-left text-[0.825rem] text-custom-text-100"
+                className="h-full w-full cursor-pointer truncate px-4 py-2.5 text-left text-[0.825rem] text-custom-text-100 focus:outline-none"
                 tabIndex={-1}
               >
                 {issueDetail.name}
diff --git a/web/components/issues/peek-overview/view.tsx b/web/components/issues/peek-overview/view.tsx
index 8f49a00b7..d5201bf8a 100644
--- a/web/components/issues/peek-overview/view.tsx
+++ b/web/components/issues/peek-overview/view.tsx
@@ -60,7 +60,13 @@ export const IssueView: FC<IIssueView> = observer((props) => {
       removeRoutePeekId();
     }
   });
-  const handleKeyDown = () => !isAnyModalOpen && removeRoutePeekId();
+  const handleKeyDown = () => {
+    if (!isAnyModalOpen) {
+      removeRoutePeekId();
+      const issueElement = document.getElementById(`issue-${issueId}`);
+      if (issueElement) issueElement?.focus();
+    }
+  };
   useKeypress("Escape", handleKeyDown);
 
   return (