refactor: fix a11y for timezone dropdown

codercatdev · Nov 4, 2023 · 25c6b84 · 25c6b84
1 parent f3edac6
commit 25c6b84
Showing 1 changed file with 23 additions and 21 deletions.
diff --git a/components/organisms/UserSettingsPage/user-settings-page.tsx b/components/organisms/UserSettingsPage/user-settings-page.tsx
@@ -363,27 +363,29 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
             </div>
 
             <div id="upgrade" className="flex flex-col gap-2">
-              <label>Time zone*</label>
-              <Select onValueChange={(value) => setTimezone(value)} value={timezone} required>
-                <SelectTrigger
-                  selectIcon={
-                    <div className="relative pr-4">
-                      <RiArrowUpSLine size={16} className="absolute -top-3" />
-                      <RiArrowDownSLine size={16} className="absolute -bottom-3" />
-                    </div>
-                  }
-                >
-                  <SelectValue placeholder="Select time zone" />
-                </SelectTrigger>
-
-                <SelectContent position="item-aligned" className="bg-white">
-                  {timezones.map((timezone, index) => (
-                    <SelectItem key={`timezone_${index}`} value={timezone.value}>
-                      {timezone.text}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+              <label className="flex flex-col w-full gap-2">
+                Time zone*
+                <Select onValueChange={(value) => setTimezone(value)} value={timezone} required>
+                  <SelectTrigger
+                    selectIcon={
+                      <div className="relative pr-4">
+                        <RiArrowUpSLine size={16} className="absolute -top-3" />
+                        <RiArrowDownSLine size={16} className="absolute -bottom-3" />
+                      </div>
+                    }
+                  >
+                    <SelectValue placeholder="Select time zone" />
+                  </SelectTrigger>
+
+                  <SelectContent position="item-aligned" className="bg-white">
+                    {timezones.map((timezone, index) => (
+                      <SelectItem key={`timezone_${index}`} value={timezone.value}>
+                        {timezone.text}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </label>
             </div>
             <Button
               className="w-max"