fix: Made RouterSelect inline (#6560) (#6568)

Co-authored-by: kujo205 <[email protected]>

Author: kujo205

components/Common/Select/index.tsx

@@ -37,6 +37,7 @@ type SelectProps = {
   inline?: boolean;
   onChange?: (value: string) => void;
   className?: string;
+  ariaLabel?: string;
 };
 
 const Select: FC<SelectProps> = ({
@@ -47,6 +48,7 @@ const Select: FC<SelectProps> = ({
   inline,
   onChange,
   className,
+  ariaLabel,
 }) => {
   const id = useId();
 
@@ -72,7 +74,7 @@ const Select: FC<SelectProps> = ({
         className
       )}
     >
-      {label && !inline && (
+      {label && (
         <label className={styles.label} htmlFor={id}>
           {label}
         </label>
@@ -81,7 +83,7 @@ const Select: FC<SelectProps> = ({
       <SelectPrimitive.Root value={defaultValue} onValueChange={onChange}>
         <SelectPrimitive.Trigger
           className={styles.trigger}
-          aria-label={label}
+          aria-label={ariaLabel}
           id={id}
         >
           <SelectPrimitive.Value placeholder={placeholder} />

components/Downloads/Release/BitnessDropdown.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 import { useEffect, useContext, useMemo } from 'react';
@@ -86,11 +85,11 @@ const BitnessDropdown: FC = () => {
 
   return (
     <Select
-      label={t('layouts.download.dropdown.bitness')}
       values={formatDropdownItems({
         items: bitnessItems[os],
         disabledItems,
       })}
+      ariaLabel={t('layouts.download.dropdown.bitness')}
       defaultValue={String(bitness)}
       onChange={bitness => setBitness(parseNumericBitness(bitness))}
       className="w-28"

components/Downloads/Release/OperatingSystemDropdown.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import { useTranslations } from 'next-intl';
 import { useContext, useEffect, useMemo } from 'react';
 import type { FC } from 'react';
@@ -68,7 +67,6 @@ const OperatingSystemDropdown: FC<OperatingSystemDropdownProps> = ({
 
   return (
     <Select
-      label={t('layouts.download.dropdown.os')}
       values={formatDropdownItems({
         items: operatingSystemItems,
         disabledItems,
@@ -79,6 +77,7 @@ const OperatingSystemDropdown: FC<OperatingSystemDropdownProps> = ({
           AIX: <Aix width={16} height={16} />,
         },
       })}
+      ariaLabel={t('layouts.download.dropdown.os')}
       defaultValue={os}
       onChange={value => setOS(value as UserOS)}
       className="w-[8.5rem]"

components/Downloads/Release/PlatformDropdown.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import { useTranslations } from 'next-intl';
 import { useContext, useEffect, useMemo } from 'react';
 import type { FC } from 'react';
@@ -69,7 +68,6 @@ const PlatformDropdown: FC = () => {
 
   return (
     <Select
-      label={t('layouts.download.dropdown.platform')}
       values={formatDropdownItems({
         items: platformItems,
         icons: {
@@ -80,6 +78,7 @@ const PlatformDropdown: FC = () => {
         },
         disabledItems,
       })}
+      ariaLabel={t('layouts.download.dropdown.platform')}
       defaultValue={platform}
       onChange={platform => setPlatform(platform as PackageManager)}
       className="w-28"

components/Downloads/Release/VersionDropdown.tsx

@@ -25,7 +25,7 @@ const VersionDropdown: FC = () => {
 
   return (
     <Select
-      label={t('layouts.download.dropdown.version')}
+      ariaLabel={t('layouts.download.dropdown.version')}
       values={releases.map(({ status, versionWithPrefix }) => ({
         value: versionWithPrefix,
         label: getDropDownStatus(versionWithPrefix, status),

components/withRouterSelect.tsx

@@ -19,6 +19,7 @@ const WithRouterSelect: FC<WithSidebarSelectProps> = ({
 
   return (
     <Select
+      inline={true}
       label={label}
       values={values}
       defaultValue={defaultValue}