Revert "(Picklist, Lookup): use inputs with type="text" for better a11y"

This reverts commit 4adb664.

Author: msmx-mnakagawa

src/scripts/Lookup.tsx

@@ -152,18 +152,17 @@ const LookupSelectedState: FC<LookupSelectedStateProps> = ({
             size='small'
           />
         )}
-        <input
-          type='text'
-          readOnly
-          disabled={disabled}
-          value={selected.label}
+        <button
+          type='button'
           role='combobox'
           tabIndex={disabled ? -1 : 0}
           className='slds-input_faux slds-combobox__input slds-combobox__input-value'
           aria-controls={listboxId}
           aria-haspopup='listbox'
           aria-expanded='false'
-        />
+        >
+          <span className='slds-truncate'>{selected.label}</span>
+        </button>
         <Button
           type='icon'
           icon='close'

src/scripts/Picklist.tsx

@@ -209,7 +209,7 @@ export type PicklistProps<MultiSelect extends boolean | undefined> = {
   tooltip?: ReactNode;
   tooltipIcon?: string;
   elementRef?: Ref<HTMLDivElement>;
-  inputRef?: Ref<HTMLInputElement>;
+  buttonRef?: Ref<HTMLButtonElement>;
   dropdownRef?: Ref<HTMLDivElement>;
   onValueChange?: Bivariant<
     (
@@ -251,7 +251,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       tooltip,
       tooltipIcon,
       elementRef: elementRef_,
-      inputRef: inputRef_,
+      buttonRef: buttonRef_,
       dropdownRef: dropdownRef_,
       onSelect,
       onComplete,
@@ -373,8 +373,8 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
 
     const elRef = useRef<HTMLDivElement | null>(null);
     const elementRef = useMergeRefs([elRef, elementRef_]);
-    const comboboxElRef = useRef<HTMLInputElement | null>(null);
-    const inputRef = useMergeRefs([comboboxElRef, inputRef_]);
+    const comboboxElRef = useRef<HTMLButtonElement | null>(null);
+    const buttonRef = useMergeRefs([comboboxElRef, buttonRef_]);
     const dropdownElRef = useRef<HTMLDivElement | null>(null);
     const dropdownRef = useMergeRefs([dropdownElRef, dropdownRef_]);
 
@@ -607,9 +607,9 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
               className='slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right'
               role='none'
             >
-              <input
-                type='text'
-                ref={inputRef}
+              <button
+                type='button'
+                ref={buttonRef}
                 role='combobox'
                 tabIndex={disabled ? -1 : 0}
                 className={inputClassNames}
@@ -624,10 +624,9 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
                 onKeyDown={onKeyDown}
                 onBlur={onBlur}
                 {...rprops}
-                value={selectedItemLabel}
-                readOnly
-                disabled={disabled}
-              />
+              >
+                <span className='slds-truncate'>{selectedItemLabel}</span>
+              </button>
               <Icon
                 containerClassName='slds-input__icon slds-input__icon_right'
                 category='utility'