fix: Improve aria-labels and Tab key navigation for <Select> and <Combobox>

apps/docs/docs/components/inputs/SelectAlpha/_webExamples.mdx

@@ -181,7 +181,8 @@ function AccessibilityExample() {
       value={value}
       onChange={setValue}
       options={options}
-      accessibilityLabel="Select task priority level"
+      accessibilityLabel="Task priority level options"
+      controlAccessibilityLabel="Select task priority level"
       accessibilityRoles={{
         dropdown: 'listbox',
         option: 'option',

packages/mobile/src/alpha/combobox/Combobox.tsx

@@ -179,7 +179,7 @@ const ComboboxBase = memo(
         variant,
         startNode,
         endNode,
-        accessibilityLabel = 'Combobox control',
+        accessibilityLabel,
         defaultOpen,
         searchText: searchTextProp,
         onSearch: onSearchProp,
@@ -211,6 +211,8 @@ const ComboboxBase = memo(
           'Combobox component must be fully controlled or uncontrolled: "open" and "setOpen" props must be provided together or not at all',
         );
 
+      const fallbackAccessibilityLabel = typeof label === 'string' ? label : 'Combobox control';
+
       const fuse = useMemo(
         () =>
           new Fuse(options, {
@@ -298,6 +300,7 @@ const ComboboxBase = memo(
             header={
               <Box paddingX={3}>
                 <ComboboxControl
+                  accessibilityLabel={accessibilityLabel ?? fallbackAccessibilityLabel}
                   endNode={endNode}
                   placeholder={placeholder}
                   startNode={startNode}
@@ -314,8 +317,10 @@ const ComboboxBase = memo(
         [
           ComboboxControl,
           SelectDropdownComponent,
+          accessibilityLabel,
           closeButtonLabel,
           endNode,
+          fallbackAccessibilityLabel,
           handleTrayVisibilityChange,
           label,
           placeholder,
@@ -338,7 +343,7 @@ const ComboboxBase = memo(
             ref={controlRef}
             SelectControlComponent={ComboboxControl}
             SelectDropdownComponent={ComboboxDropdown}
-            accessibilityLabel={accessibilityLabel}
+            accessibilityLabel={accessibilityLabel ?? fallbackAccessibilityLabel}
             defaultOpen={defaultOpen}
             disabled={disabled}
             endNode={endNode}

packages/mobile/src/alpha/combobox/DefaultComboboxControl.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 
 import { NativeInput } from '../../controls/NativeInput';
@@ -29,14 +30,24 @@ export const DefaultComboboxControl = <
   onSearch,
   searchInputRef,
   hideSearchInput,
+  accessibilityLabel,
   ...props
 }: ComboboxControlProps<Type, SelectOptionValue>) => {
   const theme = useTheme();
   const hasValue = hasSelectedValue(value);
   const shouldRenderSearchInput = !hideSearchInput && (!hasValue || open);
 
+  const computedAccessibilityLabel = useMemo(() => {
+    let label = accessibilityLabel;
+    if (!hasValue && typeof placeholder === 'string') {
+      label = `${label}, ${placeholder}`;
+    }
+    return label;
+  }, [hasValue, accessibilityLabel, placeholder]);
+
   return (
     <SelectControlComponent
+      accessibilityLabel={computedAccessibilityLabel}
       disabled={disabled}
       open={open}
       options={options}
@@ -79,7 +90,6 @@ export const DefaultComboboxControl = <
           </>
         )
       }
-      placeholder={null}
       styles={{
         ...props.styles,
         controlEndNode: {

packages/mobile/src/alpha/combobox/__stories__/Combobox.stories.tsx

@@ -169,6 +169,22 @@ const ControlledSearchExample = () => {
   );
 };
 
+const AccessibilityLabelExample = () => {
+  const { value, onChange } = useMultiSelect({ initialValue: [] });
+
+  return (
+    <Combobox
+      accessibilityLabel="Custom accessibility label"
+      label="Accessible combobox"
+      onChange={onChange}
+      options={fruitOptions}
+      placeholder="Has accessibility label..."
+      type="multi"
+      value={value}
+    />
+  );
+};
+
 const WithDescriptionsExample = () => {
   const { value, onChange } = useMultiSelect({ initialValue: [] });
 
@@ -757,6 +773,9 @@ const Default = () => {
       <Example title="Controlled search">
         <ControlledSearchExample />
       </Example>
+      <Example title="Custom accessibility label">
+        <AccessibilityLabelExample />
+      </Example>
       <Example title="Options with descriptions">
         <WithDescriptionsExample />
       </Example>

packages/mobile/src/alpha/combobox/__tests__/Combobox.test.tsx

@@ -74,7 +74,7 @@ describe('Combobox', () => {
       );
 
       const button = screen.getByRole('button');
-      expect(button.props.accessibilityLabel).toBe('Custom combobox');
+      expect(button.props.accessibilityLabel).toBe('Custom combobox, Search and select...');
     });
 
     it('handles disabled prop', () => {
@@ -338,7 +338,9 @@ describe('Combobox', () => {
       );
 
       const button = screen.getByRole('button');
-      expect(button.props.accessibilityLabel).toBe('Custom accessibility label');
+      expect(button.props.accessibilityLabel).toBe(
+        'Custom accessibility label, Search and select...',
+      );
       expect(button.props.accessibilityHint).toBe('Custom accessibility hint');
     });
 

packages/mobile/src/alpha/select/DefaultSelectControl.tsx

@@ -60,7 +60,6 @@ export const DefaultSelectControlComponent = memo(
         compact,
         maxSelectedOptionsToShow = 3,
         accessibilityLabel,
-        accessibilityHint,
         hiddenSelectedOptionsLabel = 'more',
         removeSelectedOptionAccessibilityLabel = 'Remove',
         style,
@@ -122,6 +121,37 @@ export const DefaultSelectControlComponent = memo(
         return map;
       }, [options]);
 
+      const singleValueContent = useMemo(() => {
+        const option = !isMultiSelect ? optionsMap.get(value as SelectOptionValue) : undefined;
+        const label = option?.label ?? option?.description ?? option?.value ?? placeholder;
+        return hasValue ? label : placeholder;
+      }, [hasValue, isMultiSelect, optionsMap, placeholder, value]);
+
+      const computedControlAccessibilityLabel = useMemo(() => {
+        // For multi-select, set the label to the content of each selected value and the hidden selected options label
+        if (isMultiSelect) {
+          const selectedValues = (value as SelectOptionValue[])
+            .map((v) => {
+              const option = optionsMap.get(v);
+              return option?.label ?? option?.description ?? option?.value ?? v;
+            })
+            .slice(0, maxSelectedOptionsToShow)
+            .join(', ');
+          return `${accessibilityLabel}, ${(value as SelectOptionValue[]).length > 0 ? selectedValues : (placeholder ?? '')}${(value as SelectOptionValue[]).length > maxSelectedOptionsToShow ? ', ' + hiddenSelectedOptionsLabel : ''}`;
+        }
+        // If value is React node, fallback to only using passed in accessibility label
+        return `${accessibilityLabel ?? ''}${typeof singleValueContent === 'string' ? ', ' + singleValueContent : ''}`;
+      }, [
+        accessibilityLabel,
+        hiddenSelectedOptionsLabel,
+        isMultiSelect,
+        maxSelectedOptionsToShow,
+        optionsMap,
+        placeholder,
+        singleValueContent,
+        value,
+      ]);
+
       // Prop value doesn't have default value because it affects the color of the
       // animated caret
       const focusedVariant = useInputVariant(!!open, variant ?? 'foregroundMuted');
@@ -214,24 +244,21 @@ export const DefaultSelectControlComponent = memo(
           );
         }
 
-        const option = !isMultiSelect ? optionsMap.get(value as SelectOptionValue) : undefined;
-        const label = option?.label ?? option?.description ?? option?.value ?? placeholder;
-        const content = hasValue ? label : placeholder;
-        return typeof content === 'string' ? (
+        return typeof singleValueContent === 'string' ? (
           <Text color={hasValue ? 'fg' : 'fgMuted'} ellipsize="tail" font="body" textAlign="left">
-            {content}
+            {singleValueContent}
           </Text>
         ) : (
-          content
+          singleValueContent
         );
       }, [
         hasValue,
         isMultiSelect,
-        optionsMap,
-        placeholder,
+        singleValueContent,
         value,
         maxSelectedOptionsToShow,
         hiddenSelectedOptionsLabel,
+        optionsMap,
         removeSelectedOptionAccessibilityLabel,
         disabled,
         onChange,
@@ -241,8 +268,7 @@ export const DefaultSelectControlComponent = memo(
         () => (
           <TouchableOpacity
             ref={ref}
-            accessibilityHint={accessibilityHint}
-            accessibilityLabel={accessibilityLabel}
+            accessibilityLabel={computedControlAccessibilityLabel}
             accessibilityRole="button"
             disabled={disabled}
             onPress={() => setOpen((s) => !s)}
@@ -287,8 +313,7 @@ export const DefaultSelectControlComponent = memo(
         ),
         [
           ref,
-          accessibilityHint,
-          accessibilityLabel,
+          computedControlAccessibilityLabel,
           disabled,
           styles?.controlInputNode,
           styles?.controlStartNode,
@@ -307,7 +332,11 @@ export const DefaultSelectControlComponent = memo(
 
       const endNode = useMemo(
         () => (
-          <Pressable disabled={disabled} onPress={() => setOpen((s) => !s)}>
+          <Pressable
+            accessible={customEndNode ? true : false}
+            disabled={disabled}
+            onPress={() => setOpen((s) => !s)}
+          >
             <HStack
               alignItems="center"
               flexGrow={1}

packages/mobile/src/alpha/select/Select.tsx

@@ -62,7 +62,7 @@ const SelectBase = memo(
         compact,
         label,
         labelVariant,
-        accessibilityLabel = type === 'multi' ? 'Multi select control' : undefined,
+        accessibilityLabel,
         accessibilityHint,
         accessibilityRoles = defaultAccessibilityRoles,
         selectAllLabel,
@@ -104,6 +104,8 @@ const SelectBase = memo(
           'Select component must be fully controlled or uncontrolled: "open" and "setOpen" props must be provided together or not at all',
         );
 
+      const fallbackAccessibilityLabel = typeof label === 'string' ? label : 'Select control';
+
       const rootStyles = useMemo(() => {
         return [style, styles?.root];
       }, [style, styles?.root]);
@@ -169,7 +171,7 @@ const SelectBase = memo(
         <View ref={containerRef} style={rootStyles} testID={testID}>
           <SelectControlComponent
             accessibilityHint={accessibilityHint}
-            accessibilityLabel={accessibilityLabel}
+            accessibilityLabel={accessibilityLabel ?? fallbackAccessibilityLabel}
             blendStyles={styles?.controlBlendStyles}
             compact={compact}
             disabled={disabled}

packages/mobile/src/alpha/select/__stories__/AlphaSelect.stories.tsx

@@ -271,7 +271,7 @@ const AccessibilityLabelExample = () => {
 
   return (
     <Select
-      accessibilityLabel="Accessibility label"
+      accessibilityLabel="Custom accessibility label"
       label="Single select - accessibility label"
       onChange={setValue}
       options={exampleOptions}

packages/mobile/src/alpha/select/__tests__/DefaultSelectControl.test.tsx

@@ -60,7 +60,7 @@ describe('DefaultSelectControl', () => {
       );
 
       const button = screen.getByRole('button');
-      expect(button.props.accessibilityLabel).toBe('Custom accessibility label');
+      expect(button.props.accessibilityLabel).toBe('Custom accessibility label, Option 1');
       expect(button.props.accessibilityHint).toBe('Custom accessibility hint');
     });
 

packages/mobile/src/alpha/select/__tests__/Select.test.tsx

@@ -57,7 +57,7 @@ describe('Select', () => {
       );
 
       const button = screen.getByRole('button');
-      expect(button.props.accessibilityLabel).toBe('Custom accessibility label');
+      expect(button.props.accessibilityLabel).toBe('Custom accessibility label, Select an option');
       expect(button.props.accessibilityHint).toBe('Custom accessibility hint');
     });
 

packages/web/src/alpha/combobox/Combobox.tsx

@@ -162,8 +162,9 @@ const ComboboxBase = memo(
         options,
         open: openProp,
         setOpen: setOpenProp,
-        placeholder,
-        accessibilityLabel = 'Combobox control',
+        label,
+        accessibilityLabel,
+        controlAccessibilityLabel,
         defaultOpen,
         searchText: searchTextProp,
         onSearch: onSearchProp,
@@ -193,6 +194,10 @@ const ComboboxBase = memo(
           'Combobox component must be fully controlled or uncontrolled: "open" and "setOpen" props must be provided together or not at all',
         );
 
+      const fallbackAccessibilityLabel = typeof label === 'string' ? label : 'Combobox dropdown';
+      const fallbackControlAccessibilityLabel =
+        typeof label === 'string' ? label : 'Combobox control';
+
       const fuse = useMemo(
         () =>
           new Fuse(options, {
@@ -251,12 +256,15 @@ const ComboboxBase = memo(
           <Select
             ref={controlRef}
             SelectControlComponent={ComboboxControl}
-            accessibilityLabel={accessibilityLabel}
+            accessibilityLabel={accessibilityLabel ?? fallbackAccessibilityLabel}
+            controlAccessibilityLabel={
+              controlAccessibilityLabel ?? fallbackControlAccessibilityLabel
+            }
             defaultOpen={defaultOpen}
+            label={label}
             onChange={handleChange}
             open={open}
             options={filteredOptions}
-            placeholder={placeholder}
             setOpen={setOpen}
             type={type}
             value={value}

packages/web/src/alpha/combobox/DefaultComboboxControl.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useRef } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { NativeInput } from '../../controls/NativeInput';
 import { HStack } from '../../layout';
@@ -27,6 +27,7 @@ export const DefaultComboboxControl = memo(
     compact,
     searchText,
     onSearch,
+    accessibilityLabel,
     ...props
   }: ComboboxControlProps<Type, SelectOptionValue>) => {
     const searchInputRef = useRef<HTMLInputElement | null>(null);
@@ -54,9 +55,18 @@ export const DefaultComboboxControl = memo(
       [setOpen],
     );
 
+    const computedAccessibilityLabel = useMemo(() => {
+      let label = accessibilityLabel;
+      if (!hasValue && typeof placeholder === 'string') {
+        label = `${label}, ${placeholder}`;
+      }
+      return label;
+    }, [hasValue, accessibilityLabel, placeholder]);
+
     return (
       <SelectControlComponent
         ref={controlRef.current?.refs.setReference}
+        accessibilityLabel={computedAccessibilityLabel}
         compact={compact}
         open={open}
         options={options}
@@ -114,7 +124,6 @@ export const DefaultComboboxControl = memo(
             </>
           )
         }
-        placeholder={null}
         styles={{
           ...props.styles,
           controlEndNode: {