fix(fuselage): use label on Select (#1066)

Author: juliajforesti

packages/fuselage/src/components/Option/Option.tsx

@@ -31,7 +31,7 @@ type OptionProps = {
   spacedColumn?: boolean;
   variant?: 'danger' | 'success' | 'warning' | 'primary';
   onClick?: (event: MouseEvent<HTMLElement>) => void;
-} & AllHTMLAttributes<HTMLElement>;
+} & Omit<AllHTMLAttributes<HTMLElement>, 'label'>;
 
 const Option = memo(
   forwardRef(

packages/fuselage/src/components/Select/Listbox.tsx

@@ -84,6 +84,7 @@ function OptionAria({ item, state }: OptionProps) {
       selected={isSelected}
       focus={isFocused}
       key={item.key}
+      label={item.rendered}
       {...optionProps}
     >
       {item.rendered}

packages/fuselage/src/components/Select/Select.styles.scss

@@ -1,3 +1,4 @@
+@use '../../styles/lengths.scss';
 @use '../../styles/typography.scss';
 
 .rcx-select {
@@ -6,6 +7,8 @@
 
   align-items: center;
 
+  min-height: lengths.size(40);
+
   // TODO move to .rcx-input-box
   &__item {
     @include typography.use-text-ellipsis;