refactor: reduce layout shift and improve select accessibility

components/Common/Select/index.tsx

@@ -71,7 +71,7 @@ const Select: FC<SelectProps> = ({
         className
       )}
     >
-      {label && (
+      {label && !inline && (
         <label className={styles.label} htmlFor={id}>
           {label}
         </label>

components/Downloads/Release/BitnessDropdown.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 import { useEffect, useContext, useMemo } from 'react';
 import semVer from 'semver';
@@ -15,6 +16,7 @@ const parseNumericBitness = (bitness: string) =>
 const BitnessDropdown: FC = () => {
   const { bitness: userBitness } = useDetectOS();
   const { bitness, os, release, setBitness } = useContext(ReleaseContext);
+  const t = useTranslations();
 
   // we also reset the bitness when the OS changes, because different OSs have
   // different bitnesses available
@@ -56,6 +58,7 @@ const BitnessDropdown: FC = () => {
       onChange={bitness => setBitness(parseNumericBitness(bitness))}
       inline={true}
       className="min-w-20"
+      label={t('layouts.download.dropdown.bitness')}
     />
   );
 };

components/Downloads/Release/OperatingSystemDropdown.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useTranslations } from 'next-intl';
 import { useContext, useEffect, useMemo } from 'react';
 import type { FC } from 'react';
 
@@ -22,6 +23,7 @@ const OperatingSystemDropdown: FC<OperatingSystemDropdownProps> = ({
 }) => {
   const { os: userOS } = useDetectOS();
   const { platform, os, setOS } = useContext(ReleaseContext);
+  const t = useTranslations();
 
   // we shouldn't react when "actions" change
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -74,6 +76,7 @@ const OperatingSystemDropdown: FC<OperatingSystemDropdownProps> = ({
       onChange={value => setOS(value as UserOS)}
       inline={true}
       className="min-w-28"
+      label={t('layouts.download.dropdown.os')}
     />
   );
 };

components/Downloads/Release/PlatformDropdown.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useTranslations } from 'next-intl';
 import { useContext, useEffect, useMemo } from 'react';
 import type { FC } from 'react';
 
@@ -16,6 +17,7 @@ const supportedHomebrewVersions = ['Active LTS', 'Maintenance LTS', 'Current'];
 
 const PlatformDropdown: FC = () => {
   const { release, os, platform, setPlatform } = useContext(ReleaseContext);
+  const t = useTranslations();
 
   // @TOOD: We should have a proper utility that gives
   // disabled OSs, Platforms, based on specific criteria
@@ -79,6 +81,7 @@ const PlatformDropdown: FC = () => {
       onChange={platform => setPlatform(platform as PackageManager)}
       inline={true}
       className="min-w-24"
+      label={t('layouts.download.dropdown.platform')}
     />
   );
 };

components/Downloads/Release/ReleaseCodeBox.tsx

@@ -27,7 +27,7 @@ const ReleaseCodeBox: FC = () => {
   }, [major, os, platform]);
 
   return (
-    <div className="mb-2 mt-6 flex flex-col gap-2">
+    <div className="mb-2 mt-6 flex min-h-80 flex-col gap-2">
       <CodeBox language="Bash">
         <code dangerouslySetInnerHTML={{ __html: code }} />
       </CodeBox>

components/Downloads/Release/VersionDropdown.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 import { useContext, useEffect } from 'react';
 
@@ -21,6 +22,7 @@ const getDropDownStatus = (version: string, status: string) => {
 
 const VersionDropdown: FC<NodeRelease> = ({ versionWithPrefix }) => {
   const { releases, release, setVersion } = useContext(ReleaseContext);
+  const t = useTranslations();
   // we shouldn't react when "actions" change
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => setVersion(versionWithPrefix), []);
@@ -35,6 +37,7 @@ const VersionDropdown: FC<NodeRelease> = ({ versionWithPrefix }) => {
       onChange={setVersion}
       className="min-w-28"
       inline
+      label={t('layouts.download.dropdown.version')}
     />
   );
 };

i18n/locales/en.json

@@ -278,6 +278,12 @@
       "buttons": {
         "prebuilt": "Download {version} Node.js for {os}",
         "source": "Download {version} source code"
+      },
+      "dropdown": {
+        "bitness": "Bitness",
+        "os": "Operating System",
+        "version": "Version",
+        "platform": "Platform"
       }
     }
   },