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

Author: msmx-mnakagawa

src/scripts/Lookup.tsx

@@ -152,17 +152,18 @@ const LookupSelectedState: FC<LookupSelectedStateProps> = ({
             size='small'
           />
         )}
-        <button
-          type='button'
+        <input
+          type='text'
+          readOnly
+          disabled={disabled}
+          value={selected.label}
           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>;
-  buttonRef?: Ref<HTMLButtonElement>;
+  inputRef?: Ref<HTMLInputElement>;
   dropdownRef?: Ref<HTMLDivElement>;
   onValueChange?: Bivariant<
     (
@@ -251,7 +251,7 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
       tooltip,
       tooltipIcon,
       elementRef: elementRef_,
-      buttonRef: buttonRef_,
+      inputRef: inputRef_,
       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<HTMLButtonElement | null>(null);
-    const buttonRef = useMergeRefs([comboboxElRef, buttonRef_]);
+    const comboboxElRef = useRef<HTMLInputElement | null>(null);
+    const inputRef = useMergeRefs([comboboxElRef, inputRef_]);
     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'
             >
-              <button
-                type='button'
-                ref={buttonRef}
+              <input
+                type='text'
+                ref={inputRef}
                 role='combobox'
                 tabIndex={disabled ? -1 : 0}
                 className={inputClassNames}
@@ -624,9 +624,10 @@ export const Picklist: (<MultiSelect extends boolean | undefined>(
                 onKeyDown={onKeyDown}
                 onBlur={onBlur}
                 {...rprops}
-              >
-                <span className='slds-truncate'>{selectedItemLabel}</span>
-              </button>
+                value={selectedItemLabel}
+                readOnly
+                disabled={disabled}
+              />
               <Icon
                 containerClassName='slds-input__icon slds-input__icon_right'
                 category='utility'