fix: resolve a11y warnings for label-has-associated-control rule

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);

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);

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);

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);

components/Workspaces/SearchReposTable.tsx

@@ -62,7 +62,13 @@ export const SearchedReposTable = ({
                   event.preventDefault;
                 }}
               >
-                <Search placeholder="Filter repositories" className="w-full" name="query" onChange={onFilter} />
+                <Search
+                  placeholder="Filter repositories"
+                  labelText="Filter repositories from the list"
+                  className="w-full"
+                  name="query"
+                  onChange={onFilter}
+                />
               </form>
             </TableHead>
           </TableRow>

components/Workspaces/SearchedContributorsTable.tsx

@@ -43,7 +43,13 @@ export const SearchedContributorsTable = ({
                   event.preventDefault;
                 }}
               >
-                <Search placeholder="Filter contributors" className="w-full" name="query" onChange={onFilter} />
+                <Search
+                  placeholder="Filter contributors"
+                  labelText="Filter contributors from the list"
+                  className="w-full"
+                  name="query"
+                  onChange={onFilter}
+                />
               </form>
             </TableHead>
           </TableRow>

components/Workspaces/TrackedContributorsWizard/SearchByContributorsStep.tsx

@@ -81,6 +81,7 @@ export const SearchByContributorsStep = ({
       >
         <Search
           placeholder="Search contributors"
+          labelText="Search contributors"
           className="w-full"
           isLoading={searchIsLoading}
           name="query"

components/Workspaces/TrackedRepoWizard/SearchByReposStep.tsx

@@ -66,6 +66,7 @@ export const SearchByReposStep = ({
       >
         <Search
           placeholder="Search repositories"
+          labelText="Search repositories"
           className="w-full"
           isLoading={searchIsLoading}
           name="query"

components/Workspaces/TrackedRepoWizard/SearchOrgStep.tsx

@@ -27,6 +27,7 @@ export const SearchOrgStep = ({ onSelectOrg, onSearch, orgs }: SearchOrgStepProp
       >
         <Search
           placeholder="Search your organizations"
+          labelText="Search your organizations"
           className="w-full"
           name="query"
           onChange={(event) => {

components/Workspaces/WorkspaceMembersConfig/workspace-members-config.tsx

@@ -62,6 +62,7 @@ const WorkspaceMembersConfig = ({
             value={username}
             onChange={(value) => handleChange(value)}
             placeholder="Enter username"
+            labelText="Enter full username"
             name="search"
             className="flex-1 text-base"
           />

components/atoms/Search/search.tsx

@@ -24,6 +24,7 @@ interface SearchProps {
   onSelect?: (value: string) => void;
   isLoading?: boolean;
   isDisabled?: boolean;
+  labelText: string;
 }
 
 const suggestionsStyle = {
@@ -45,6 +46,7 @@ const Search = ({
   isLoading,
   onSelect,
   isDisabled,
+  labelText,
 }: SearchProps): JSX.Element => {
   const [cursor, setCursor] = useState(-1);
   const [search, setSearch] = useState(value);
@@ -111,19 +113,19 @@ const Search = ({
   // using min-w-[15rem] to take into account the width of the X icon when it gets rendered
   // to avoid the search input from expanding when someone starts typing.
   return (
-    <div
+    <label
       className={`${
         className && className
       } flex bg-white py-1 px-3 shadow-input border transition focus-within:ring focus-within:border-orange-500 focus-within:ring-orange-100 rounded-lg ring-light-slate-6 items-center relative min-w-[15rem]`}
     >
+      <span className="sr-only">{labelText}</span>
       <FaSearch className="text-light-slate-9" fontSize={16} onClick={handleOnSearch} />
       <input
         className="w-full pl-2 placeholder:text-sm focus:outline-none placeholder:text-slate-400 disabled:cursor-not-allowed"
         placeholder={placeholder}
         name={name}
         value={search}
         type="search"
-        id={name}
         onChange={handleChange}
         onKeyUp={(e) => {
           if (e.code === "Enter") {
@@ -176,7 +178,7 @@ const Search = ({
           )}
         </>
       )}
-    </div>
+    </label>
   );
 };
 export default Search;

components/atoms/Select/single-select.tsx

@@ -15,6 +15,7 @@ interface SingleSelectProps {
   position?: "popper" | "item-aligned";
   isSearchable?: boolean;
   insetLabel?: string;
+  labelText: string;
 }
 
 const SingleSelect = ({
@@ -26,6 +27,7 @@ const SingleSelect = ({
   inputPlaceholder,
   isSearchable = false,
   insetLabel,
+  labelText,
 }: SingleSelectProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState("");
@@ -64,8 +66,9 @@ const SingleSelect = ({
           insetLabel && `before:content-[attr(data-inset-label)] before:mr-1 before:font-normal before:text-slate-500`
         )}
       >
-        <Tooltip content={current?.label ?? placeholder}>
-          <div className="flex items-center w-44 ">
+        <span className="sr-only">{labelText}</span>
+        <Tooltip content={current?.label ?? placeholder} aria-hidden="true">
+          <div className="flex items-center w-44" aria-hidden="true">
             <p className="flex-grow text-start truncate">{current?.label ?? placeholder}</p>
           </div>
         </Tooltip>

components/atoms/Select/single.select.stories.tsx

@@ -38,6 +38,7 @@ const baseProps: ComponentProps<typeof SingleSelect> = {
     // eslint-disable-next-line no-console
     console.log(value);
   },
+  labelText: "Accessible label",
 };
 
 export const Default: Story = {

components/molecules/ContributorHighlight/contributor-highlight-card.tsx

@@ -794,6 +794,7 @@ const ContributorHighlightCard = ({
                       <Search
                         isLoading={tagRepoSearchLoading}
                         placeholder="Repository Full Name (ex: open-sauced/open-sauced)"
+                        labelText="Search repository by full name (ex: open-sauced/open-sauced)"
                         className="!w-full text-md text-gra"
                         name={"query"}
                         suggestions={repoTagSuggestions}

components/molecules/HighlightInput/highlight-input-form.tsx

@@ -815,6 +815,7 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
           <Search
             isLoading={tagRepoSearchLoading}
             placeholder="Repository Full Name (ex: open-sauced/open-sauced)"
+            labelText="Search repository by full name (ex: open-sauced/open-sauced)"
             className="text-sm font-normal !w-full px-2"
             name={"query"}
             suggestions={repoTagSuggestions}

components/molecules/HubContributorsHeader/hub-contributors-header.tsx

@@ -91,6 +91,7 @@ const HubContributorsHeader = ({
         <div className="flex w-full">
           <Search
             placeholder={`Search for contributors to add to your list`}
+            labelText="Search for contributors to add to your list"
             className="!w-full text-sm py-1.5"
             name={"contributors"}
             onChange={(value) => setContributorSearch(value)}

components/molecules/TableHeader/table-header.tsx

@@ -88,6 +88,7 @@ const TableHeader = ({ title, metaInfo, entity, onSearch, layout, onLayoutToggle
         {onSearch ? (
           <Search
             placeholder={`Search ${title}`}
+            labelText={`Search ${title}`}
             className="max-w-full text-sm py-1.5"
             name={"query"}
             onSearch={onSearch}

components/molecules/TeamMembersConfig/team-members-config.tsx

@@ -68,6 +68,7 @@ const TeamMembersConfig = ({
           value={email}
           onChange={(value) => handleChange(value)}
           placeholder="Enter email address"
+          labelText="Enter email address"
           name="search"
           className="flex-1 text-base"
         />