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

…n-sauced#4126)
shubhamchasing · Oct 31, 2024 · bcbf1bb · bcbf1bb
1 parent ca77bc3
commit bcbf1bb
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 10 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);
@@ -123,7 +125,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/user-settings-page.tsx b/components/organisms/UserSettingsPage/user-settings-page.tsx
@@ -336,11 +336,12 @@ const UserSettingsPage = ({ user }: UserSettingsPageProps) => {
               </span>
             </div>
 
-            <div className="flex flex-col gap-2">
-              <label className="flex flex-col w-full gap-2">
+            <div id="upgrade" className="flex flex-col 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" />
@@ -397,9 +398,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}
@@ -432,8 +433,9 @@ const UserSettingsPage = ({ user }: UserSettingsPageProps) => {
             >
               Update Preferences
             </Button>
-          </div>
+          </fieldset>
           {userInfo && (
+<<<<<<< HEAD
             <form
               name="delete-account"
               action="/api/delete-account"
@@ -466,6 +468,73 @@ const UserSettingsPage = ({ user }: UserSettingsPageProps) => {
                 }}
               />
             </form>
+=======
+            <>
+              <div>
+                {!coupon ? (
+                  <div className="flex flex-col order-first gap-6 md:order-last">
+                    <div className="flex flex-col gap-3">
+                      <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();
+                        setCoupon("verified");
+                      }}
+                    />
+                  </div>
+                ) : null}
+              </div>
+              <form
+                name="delete-account"
+                action="/api/delete-account"
+                method="POST"
+                className="flex flex-col order-first gap-6 md:order-last p-6 rounded-2xl bg-light-slate-4"
+                ref={deleteFormRef}
+                onSubmit={(e) => {
+                  setIsModalOpen(true);
+                  e.preventDefault();
+                }}
+              >
+                <div className="flex flex-col gap-3">
+                  <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
+                  id="delete-account-button"
+                  type="submit"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  variant="destructive"
+                  className="w-max"
+                >
+                  Delete Account
+                </Button>
+                <DeleteAccountModal
+                  open={isModalOpen}
+                  setOpen={setIsModalOpen}
+                  onDelete={() => {
+                    setIsModalOpen(false);
+                    deleteFormRef.current?.submit();
+                  }}
+                />
+              </form>
+            </>
+>>>>>>> 027aeffd (fix: resolve a11y warnings for label-has-associated-control rule (#4126))
           )}
         </div>
       </div>

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={[
                     {

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}`}