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

…n-sauced#4126)
shubhamchasing · Oct 3, 2024 · 027aeff · 027aeff
1 parent 99b6e5b
commit 027aeff
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 14 deletions.
diff --git a/components/AddContributorsHeader/add-contributors-header.tsx b/components/AddContributorsHeader/add-contributors-header.tsx
@@ -81,9 +81,10 @@ const AddContributorsHeader = ({
         </div>
       </div>
       <div className="flex flex-col w-full gap-2 md:flex-row">
-        <label className="flex w-full flex-col gap-4">
+        <label htmlFor="search-contributors" className="flex w-full flex-col gap-4">
           <span className="sr-only">Search for contributors to add to your list</span>
           <Search
+            id="search-contributors"
             placeholder={`Search for contributors to add to your list`}
             className="!w-full text-sm py-1.5"
             name={"contributors"}

diff --git a/components/atoms/Search/search.tsx b/components/atoms/Search/search.tsx
@@ -24,6 +24,7 @@ interface SearchProps {
   onSelect?: (value: string) => void;
   isLoading?: boolean;
   isDisabled?: boolean;
+  id?: string;
 }
 
 const suggestionsStyle = {
@@ -45,6 +46,7 @@ const Search = ({
   isLoading,
   onSelect,
   isDisabled,
+  id,
 }: SearchProps): JSX.Element => {
   const [cursor, setCursor] = useState(-1);
   const [search, setSearch] = useState(value);
@@ -124,7 +126,7 @@ const Search = ({
         name={name}
         value={search}
         type="search"
-        id={name}
+        id={id}
         onChange={handleChange}
         onKeyUp={(e) => {
           if (e.code === "Enter") {

diff --git a/components/atoms/Select/single-select.tsx b/components/atoms/Select/single-select.tsx
@@ -15,6 +15,7 @@ interface SingleSelectProps {
   position?: "popper" | "item-aligned";
   isSearchable?: boolean;
   insetLabel?: string;
+  id?: string;
 }
 
 const SingleSelect = ({
@@ -26,6 +27,7 @@ const SingleSelect = ({
   inputPlaceholder,
   isSearchable = false,
   insetLabel,
+  id,
 }: SingleSelectProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState("");
@@ -58,6 +60,7 @@ 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",

diff --git a/components/organisms/UserSettingsPage/developer-pack-form.tsx b/components/organisms/UserSettingsPage/developer-pack-form.tsx
@@ -7,9 +7,10 @@ import { supabase } from "lib/utils/supabase";
 interface DeveloperPackFormProps {
   providerToken?: string | null;
   refreshUser: () => void;
+  id: string;
 }
 
-const DeveloperPackForm = ({ refreshUser, providerToken }: DeveloperPackFormProps) => {
+const DeveloperPackForm = ({ refreshUser, providerToken, id }: DeveloperPackFormProps) => {
   const [updating, setUpdating] = useState(false);
   const { toast } = useToast();
 
@@ -53,9 +54,10 @@ const DeveloperPackForm = ({ refreshUser, providerToken }: DeveloperPackFormProp
   return (
     <div className="flex flex-col gap-6">
       <Button
+        id={id}
         onClick={handeVerification}
         variant="primary"
-        className="px-4 py-2 w-max bg-light-slate-4 "
+        className="px-4 py-2 w-max bg-light-slate-4"
         disabled={updating}
       >
         Verify Account

diff --git a/components/organisms/UserSettingsPage/user-settings-page.tsx b/components/organisms/UserSettingsPage/user-settings-page.tsx
@@ -338,10 +338,11 @@ const UserSettingsPage = ({ user }: UserSettingsPageProps) => {
             </div>
 
             <div id="upgrade" className="flex flex-col gap-2">
-              <label className="flex flex-col w-full gap-2">
+              <label htmlFor="timezone-select" className="flex flex-col w-full gap-2">
                 Time zone
                 <Select onValueChange={(value) => setTimezone(value)} value={timezone}>
                   <SelectTrigger
+                    id="timezone-select"
                     selectIcon={
                       <div className="relative pr-4">
                         <RiArrowUpSLine size={16} className="absolute -top-3" />
@@ -398,9 +399,9 @@ const UserSettingsPage = ({ user }: UserSettingsPageProps) => {
               Update Interests
             </Button>
           </div>
-          <div className="flex flex-col gap-6">
+          <fieldset className="flex flex-col gap-6">
             <div className="flex flex-col gap-3">
-              <label className="text-2xl font-normal">Email Preferences</label>
+              <legend className="text-2xl font-normal">Email Preferences</legend>
               <Checkbox
                 onCheckedChange={() => setEmailPreference((prev) => ({ ...prev, display_email: !prev.display_email }))}
                 checked={emailPreference.display_email}
@@ -433,19 +434,22 @@ const UserSettingsPage = ({ user }: UserSettingsPageProps) => {
             >
               Update Preferences
             </Button>
-          </div>
+          </fieldset>
           {userInfo && (
             <>
               <div>
                 {!coupon ? (
                   <div className="flex flex-col order-first gap-6 md:order-last">
                     <div className="flex flex-col gap-3">
-                      <label className="text-2xl font-normal">Developer Pack</label>
+                      <label htmlFor="verify-account-button" className="text-2xl font-normal">
+                        Developer Pack
+                      </label>
                       <div className="w-full sm:max-w-80">
                         <Text>Verify your developer pack eligibilty to get an upgrade!</Text>
                       </div>
                     </div>
                     <DeveloperPackForm
+                      id="verify-account-button"
                       providerToken={providerToken}
                       refreshUser={() => {
                         mutate();
@@ -467,15 +471,24 @@ const UserSettingsPage = ({ user }: UserSettingsPageProps) => {
                 }}
               >
                 <div className="flex flex-col gap-3">
-                  <label className="text-2xl font-normal">Delete Account</label>
+                  <label htmlFor="delete-account-button" className="text-2xl font-normal">
+                    Delete Account
+                  </label>
                   <div className="w-full md:w-96">
                     <Text>
                       Please note that account deletion is irreversible. Proceed only if you are certain about this
                       action.
                     </Text>
                   </div>
                 </div>
-                <Button type="submit" rel="noopener noreferrer" target="_blank" variant="destructive" className="w-max">
+                <Button
+                  id="delete-account-button"
+                  type="submit"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  variant="destructive"
+                  className="w-max"
+                >
                   Delete Account
                 </Button>
                 <DeleteAccountModal

diff --git a/components/shared/AppSidebar/AppSidebar.tsx b/components/shared/AppSidebar/AppSidebar.tsx
@@ -105,9 +105,10 @@ 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 className="workspace-drop-down flex flex-col w-full gap-2 ml-2">
+              <label htmlFor="workspace-dropdown" className="workspace-drop-down flex flex-col w-full gap-2 ml-2">
                 <span className="sr-only">Workspace</span>
                 <SingleSelect
+                  id="workspace-dropdown"
                   isSearchable={!!user}
                   options={[
                     { label: "Create new workspace...", value: "new" },

diff --git a/components/shared/DayRangePicker.tsx b/components/shared/DayRangePicker.tsx
@@ -40,9 +40,10 @@ export const DayRangePicker = ({ onDayRangeChanged }: DayRangePickerProps) => {
   };
 
   return (
-    <label className="w-fit font-semibold">
+    <label htmlFor="day-range-select" className="w-fit font-semibold">
       <span className="sr-only">Range:</span>
       <SingleSelect
+        id="day-range-select"
         insetLabel="Range:"
         onValueChange={onDefaultDayRangeChanged}
         value={`${dayRange}`}

diff --git a/components/shared/LimitPicker.tsx b/components/shared/LimitPicker.tsx
@@ -25,9 +25,10 @@ export const LimitPicker = ({ onLimitChanged }: LimitPickerProps) => {
   };
 
   return (
-    <label className="w-max font-semibold">
+    <label htmlFor="entries-per-page-select" className="w-max font-semibold">
       <span className="sr-only">Limit:</span>
       <SingleSelect
+        id="entries-per-page-select"
         insetLabel="Showing:"
         onValueChange={onDefaultLimitChanged}
         value={`${limit}`}