fix: add sr-only label to SingleSelect component and make necessary c…

…hanges
open-sauced · Oct 28, 2024 · fcbed9e · fcbed9e
1 parent 7b22c7a
commit fcbed9e
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 15 deletions.
diff --git a/components/Contributors/AddToContributorInsightDrawer.tsx b/components/Contributors/AddToContributorInsightDrawer.tsx
@@ -135,6 +135,7 @@ export default function AddToContributorInsightDrawer({
                 })),
               ]}
               value={selectedInsight ?? "new"}
+              labelText="Select a workspace"
               placeholder="Select a workspace"
               onValueChange={(value) => {
                 setSelectedInsight(value);
@@ -154,6 +155,7 @@ export default function AddToContributorInsightDrawer({
                   })),
                 ]}
                 value={workspaceId}
+                labelText="Select a workspace"
                 placeholder="Select a workspace"
                 onValueChange={(value) => {
                   setWorkspaceId(value);

diff --git a/components/Contributors/AddToContributorInsightModal.tsx b/components/Contributors/AddToContributorInsightModal.tsx
@@ -136,6 +136,7 @@ export default function AddToContributorInsightModal({
                       })),
                     ]}
                     value={selectedInsight ?? "new"}
+                    labelText="Select a workspace"
                     placeholder="Select a workspace"
                     onValueChange={(value) => {
                       setSelectedInsight(value);
@@ -155,6 +156,7 @@ export default function AddToContributorInsightModal({
                         })),
                       ]}
                       value={workspaceId}
+                      labelText="Select a workspace"
                       placeholder="Select a workspace"
                       onValueChange={(value) => {
                         setWorkspaceId(value);

diff --git a/components/Repositories/AddToWorkspaceDrawer.tsx b/components/Repositories/AddToWorkspaceDrawer.tsx
@@ -137,6 +137,7 @@ export default function AddToWorkspaceDrawer({ repository, type = "repo" }: AddT
               ]}
               position="popper"
               value={workspaceId ?? "new"}
+              labelText="Select a workspace"
               placeholder="Select a workspace"
               onValueChange={(value) => {
                 setWorkspaceId(value);

diff --git a/components/Repositories/AddToWorkspaceModal.tsx b/components/Repositories/AddToWorkspaceModal.tsx
@@ -131,6 +131,7 @@ export default function AddToWorkspaceModal({ repository, isOpen, onCloseModal,
                           })),
                         ]}
                         value={workspaceId ?? "new"}
+                        labelText="Select a workspace"
                         placeholder="Select a workspace"
                         onValueChange={(value) => {
                           setWorkspaceId(value);

diff --git a/components/atoms/Select/single-select.tsx b/components/atoms/Select/single-select.tsx
@@ -15,7 +15,7 @@ interface SingleSelectProps {
   position?: "popper" | "item-aligned";
   isSearchable?: boolean;
   insetLabel?: string;
-  id?: string;
+  labelText: string;
 }
 
 const SingleSelect = ({
@@ -27,7 +27,7 @@ const SingleSelect = ({
   inputPlaceholder,
   isSearchable = false,
   insetLabel,
-  id,
+  labelText,
 }: SingleSelectProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState("");
@@ -60,13 +60,13 @@ const SingleSelect = ({
       }}
     >
       <DropdownMenuTrigger
-        id={id}
         data-inset-label={insetLabel}
         className={clsx(
           "flex w-full justify-between md:w-fit text-sm px-3 py-1.5 !border !border-slate-200 rounded-md bg-white data-[state=open]:border-orange-500 min-w-max",
           insetLabel && `before:content-[attr(data-inset-label)] before:mr-1 before:font-normal before:text-slate-500`
         )}
       >
+        <span className="sr-only">{labelText}</span>
         <Tooltip content={current?.label ?? placeholder}>
           <div className="flex items-center w-44 ">
             <p className="flex-grow text-start truncate">{current?.label ?? placeholder}</p>

diff --git a/components/shared/AppSidebar/AppSidebar.tsx b/components/shared/AppSidebar/AppSidebar.tsx
@@ -105,10 +105,9 @@ export const AppSideBar = ({ workspaceId, hideSidebar, sidebarCollapsed }: AppSi
         <>
           <nav aria-label="sidebar navigation" className="grid gap-4 mt-4 pr-4 pl-2">
             <div className="flex gap-2">
-              <label htmlFor="workspace-dropdown" className="workspace-drop-down flex flex-col w-full gap-2 ml-2">
-                <span className="sr-only">Workspace</span>
+              <div className="workspace-drop-down flex flex-col w-full gap-2 ml-2">
                 <SingleSelect
-                  id="workspace-dropdown"
+                  labelText="Select a workspace"
                   isSearchable={!!user}
                   options={[
                     {
@@ -147,7 +146,7 @@ export const AppSideBar = ({ workspaceId, hideSidebar, sidebarCollapsed }: AppSi
                     router.push(`/workspaces/${value}`);
                   }}
                 />
-              </label>
+              </div>
               <button onClick={hideSidebar} className="hover:bg-slate-50 p-2 rounded-md">
                 <LuArrowLeftToLine className="w-4 h-4 text-gray-500" />
               </button>

diff --git a/components/shared/DayRangePicker.tsx b/components/shared/DayRangePicker.tsx
@@ -40,15 +40,14 @@ export const DayRangePicker = ({ onDayRangeChanged }: DayRangePickerProps) => {
   };
 
   return (
-    <label htmlFor="day-range-select" className="w-fit font-semibold">
-      <span className="sr-only">Range:</span>
+    <div className="w-fit font-semibold">
       <SingleSelect
-        id="day-range-select"
+        labelText="Day range select"
         insetLabel="Range:"
         onValueChange={onDefaultDayRangeChanged}
         value={`${dayRange}`}
         options={dayRanges}
       />
-    </label>
+    </div>
   );
 };
diff --git a/components/shared/LimitPicker.tsx b/components/shared/LimitPicker.tsx
@@ -25,15 +25,14 @@ export const LimitPicker = ({ onLimitChanged }: LimitPickerProps) => {
   };
 
   return (
-    <label htmlFor="entries-per-page-select" className="w-max font-semibold">
-      <span className="sr-only">Limit:</span>
+    <div className="w-max font-semibold">
       <SingleSelect
-        id="entries-per-page-select"
+        labelText="Entries per page select"
         insetLabel="Showing:"
         onValueChange={onDefaultLimitChanged}
         value={`${limit}`}
         options={limitOptions}
       />
-    </label>
+    </div>
   );
 };