@coinbase/cds-mobile 8.38.4 → 8.38.5

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.38.5 (1/23/2026 PST)
+
+#### 🐞 Fixes
+
+- Update ARIA labels used for Select and Combobox. [[#250](https://github.com/coinbase/cds/pull/250)]
+
 ## 8.38.4 ((1/22/2026, 01:55 PM PST))
 
 This is an artificial version bump with no new change.

package/dts/alpha/combobox/Combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/alpha/combobox/Combobox.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/alpha/combobox/Combobox.tsx"],"names":[],"mappings":"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"}

package/dts/alpha/combobox/DefaultComboboxControl.d.ts

@@ -15,6 +15,7 @@ export declare const DefaultComboboxControl: <
   onSearch,
   searchInputRef,
   hideSearchInput,
+  accessibilityLabel,
   ...props
 }: ComboboxControlProps<Type, SelectOptionValue>) => import('react/jsx-runtime').JSX.Element;
 //# sourceMappingURL=DefaultComboboxControl.d.ts.map

package/dts/alpha/combobox/DefaultComboboxControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultComboboxControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/combobox/DefaultComboboxControl.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAOvD,eAAO,MAAM,sBAAsB,GACjC,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,EACzC,mJAaC,oBAAoB,CAAC,IAAI,EAAE,iBAAiB,CAAC,4CA+D/C,CAAC"}
+{"version":3,"file":"DefaultComboboxControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/combobox/DefaultComboboxControl.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAOvD,eAAO,MAAM,sBAAsB,GACjC,IAAI,SAAS,UAAU,GAAG,QAAQ,EAClC,iBAAiB,SAAS,MAAM,GAAG,MAAM,EACzC,uKAcC,oBAAoB,CAAC,IAAI,EAAE,iBAAiB,CAAC,4CAuE/C,CAAC"}

package/dts/alpha/select/DefaultSelectControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultSelectControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select/DefaultSelectControl.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAc3D,OAAO,KAAK,EAAE,kBAAkB,EAAgB,UAAU,EAAE,MAAM,UAAU,CAAC;AAkB7E,KAAK,6BAA6B,GAAG,CACnC,IAAI,SAAS,UAAU,EACvB,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,kBAAkB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,KACvF,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,6BAA6B;;;;;;;;;;;;;;;;;;;;wBAmPF,CAAA;wBAGtB,CAAR;wBAGK,CAAC;wBAKJ,CAAC;6BAIU,CAAC;sBAGd,CAAJ;;qDAuDL,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAoC,6BAA6B,CAAC"}
+{"version":3,"file":"DefaultSelectControl.d.ts","sourceRoot":"","sources":["../../../src/alpha/select/DefaultSelectControl.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAc3D,OAAO,KAAK,EAAE,kBAAkB,EAAgB,UAAU,EAAE,MAAM,UAAU,CAAC;AAkB7E,KAAK,6BAA6B,GAAG,CACnC,IAAI,SAAS,UAAU,EACvB,iBAAiB,SAAS,MAAM,GAAG,MAAM,EAEzC,KAAK,EAAE,kBAAkB,CAAC,IAAI,EAAE,iBAAiB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,KACvF,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,6BAA6B;;;;;;;;;;;;;;;;;;;;wBA4OF,CAAC;wBAEb,CAAC;wBAEc,CAAC;wBAI1B,CAAC;6BAGD,CAAC;sBAED,CAAC;;qDAgGlB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAoC,6BAA6B,CAAC"}

package/esm/alpha/combobox/Combobox.js

@@ -64,7 +64,7 @@ const ComboboxBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
       variant,
       startNode,
       endNode,
-      accessibilityLabel = 'Combobox control',
+      accessibilityLabel = typeof label === 'string' ? label : 'Combobox control',
       defaultOpen,
       searchText: searchTextProp,
       onSearch: onSearchProp,
@@ -152,6 +152,7 @@ const ComboboxBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
     header: /*#__PURE__*/_jsx(Box, {
       paddingX: 3,
       children: /*#__PURE__*/_jsx(ComboboxControl, _extends({
+        accessibilityLabel: accessibilityLabel,
         endNode: endNode,
         placeholder: placeholder,
         startNode: startNode,
@@ -162,7 +163,7 @@ const ComboboxBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
       }))
     }),
     onVisibilityChange: handleTrayVisibilityChange
-  })), [ComboboxControl, SelectDropdownComponent, closeButtonLabel, endNode, handleTrayVisibilityChange, label, placeholder, setOpen, startNode, variant]);
+  })), [ComboboxControl, SelectDropdownComponent, accessibilityLabel, closeButtonLabel, endNode, handleTrayVisibilityChange, label, placeholder, setOpen, startNode, variant]);
   return /*#__PURE__*/_jsx(ComboboxContext.Provider, {
     value: {
       searchText,

package/esm/alpha/combobox/DefaultComboboxControl.js

@@ -1,6 +1,7 @@
-const _excluded = ["SelectControlComponent", "value", "placeholder", "open", "setOpen", "disabled", "options", "searchText", "onSearch", "searchInputRef", "hideSearchInput"];
+const _excluded = ["SelectControlComponent", "value", "placeholder", "open", "setOpen", "disabled", "options", "searchText", "onSearch", "searchInputRef", "hideSearchInput", "accessibilityLabel"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { NativeInput } from '../../controls/NativeInput';
 import { useTheme } from '../../hooks/useTheme';
@@ -22,13 +23,22 @@ export const DefaultComboboxControl = _ref => {
       searchText,
       onSearch,
       searchInputRef,
-      hideSearchInput
+      hideSearchInput,
+      accessibilityLabel
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   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 /*#__PURE__*/_jsx(SelectControlComponent, _extends({
+    accessibilityLabel: computedAccessibilityLabel,
     disabled: disabled,
     open: open,
     options: options,
@@ -67,7 +77,6 @@ export const DefaultComboboxControl = _ref => {
         children: typeof placeholder === 'string' ? placeholder : ''
       })
     }),
-    placeholder: null,
     styles: _extends({}, props.styles, {
       controlEndNode: _extends({}, StyleSheet.flatten((_props$styles = props.styles) == null ? void 0 : _props$styles.controlEndNode), {
         alignItems: hasValue && shouldRenderSearchInput ? 'flex-end' : 'center'

package/esm/alpha/combobox/__stories__/Combobox.stories.js

@@ -285,6 +285,23 @@ const ControlledSearchExample = () => {
     })]
   });
 };
+const AccessibilityLabelExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    accessibilityLabel: "Custom accessibility label",
+    label: "Accessible combobox",
+    onChange: onChange,
+    options: fruitOptions,
+    placeholder: "Has accessibility label...",
+    type: "multi",
+    value: value
+  });
+};
 const WithDescriptionsExample = () => {
   const {
     value,
@@ -952,6 +969,9 @@ const Default = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "Controlled search",
       children: /*#__PURE__*/_jsx(ControlledSearchExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom accessibility label",
+      children: /*#__PURE__*/_jsx(AccessibilityLabelExample, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "Options with descriptions",
       children: /*#__PURE__*/_jsx(WithDescriptionsExample, {})

package/esm/alpha/select/DefaultSelectControl.js

@@ -1,4 +1,4 @@
-const _excluded = ["type", "options", "value", "onChange", "open", "placeholder", "disabled", "setOpen", "variant", "helperText", "label", "labelVariant", "contentNode", "startNode", "endNode", "compact", "bordered", "borderWidth", "focusedBorderWidth", "maxSelectedOptionsToShow", "accessibilityLabel", "accessibilityHint", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "style", "styles"];
+const _excluded = ["type", "options", "value", "onChange", "open", "placeholder", "disabled", "setOpen", "variant", "helperText", "label", "labelVariant", "contentNode", "startNode", "endNode", "compact", "bordered", "borderWidth", "focusedBorderWidth", "maxSelectedOptionsToShow", "accessibilityLabel", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "style", "styles"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { forwardRef, memo, useMemo } from 'react';
@@ -52,7 +52,6 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
       focusedBorderWidth = bordered ? undefined : 200,
       maxSelectedOptionsToShow = 3,
       accessibilityLabel,
-      accessibilityHint,
       hiddenSelectedOptionsLabel = 'more',
       removeSelectedOptionAccessibilityLabel = 'Remove',
       styles
@@ -97,6 +96,25 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
     });
     return map;
   }, [options]);
+  const singleValueContent = useMemo(() => {
+    var _ref3, _ref4, _option$label;
+    const option = !isMultiSelect ? optionsMap.get(value) : undefined;
+    const label = (_ref3 = (_ref4 = (_option$label = option == null ? void 0 : option.label) != null ? _option$label : option == null ? void 0 : option.description) != null ? _ref4 : option == null ? void 0 : option.value) != null ? _ref3 : 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.map(v => {
+        var _ref5, _ref6, _option$label2;
+        const option = optionsMap.get(v);
+        return (_ref5 = (_ref6 = (_option$label2 = option == null ? void 0 : option.label) != null ? _option$label2 : option == null ? void 0 : option.description) != null ? _ref6 : option == null ? void 0 : option.value) != null ? _ref5 : v;
+      }).slice(0, maxSelectedOptionsToShow).join(', ');
+      return accessibilityLabel + ", " + (value.length > 0 ? selectedValues : placeholder != null ? placeholder : '') + (value.length > maxSelectedOptionsToShow ? ', ' + hiddenSelectedOptionsLabel : '');
+    }
+    // If value is React node, fallback to only using passed in accessibility label
+    return "" + (accessibilityLabel != null ? 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
@@ -123,7 +141,6 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
     })
   }) : label, [compact, disabled, label, labelVariant, setOpen, styles == null ? void 0 : styles.controlLabelNode]);
   const valueNode = useMemo(() => {
-    var _ref5, _ref6, _option$label2;
     if (hasValue && isMultiSelect) {
       const valuesToShow = value.length <= maxSelectedOptionsToShow ? value : value.slice(0, maxSelectedOptionsToShow);
       const optionsToShow = valuesToShow.map(value => optionsMap.get(value)).filter(option => option !== undefined);
@@ -131,7 +148,7 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
         flexWrap: "wrap",
         gap: 1,
         children: [optionsToShow.map(option => {
-          var _option$value, _ref3, _ref4, _option$label;
+          var _option$value, _ref7, _ref8, _option$label3;
           const accessibilityLabel = typeof option.label === 'string' ? option.label : typeof option.description === 'string' ? option.description : (_option$value = option.value) != null ? _option$value : '';
           return /*#__PURE__*/_jsx(InputChip, {
             compact: true,
@@ -144,7 +161,7 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
               event == null || event.stopPropagation();
               onChange == null || onChange(option.value);
             },
-            children: (_ref3 = (_ref4 = (_option$label = option.label) != null ? _option$label : option.description) != null ? _ref4 : option.value) != null ? _ref3 : ''
+            children: (_ref7 = (_ref8 = (_option$label3 = option.label) != null ? _option$label3 : option.description) != null ? _ref8 : option.value) != null ? _ref7 : ''
           }, option.value);
         }), value.length - maxSelectedOptionsToShow > 0 && /*#__PURE__*/_jsx(InputChip, {
           compact: true,
@@ -155,21 +172,17 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
         })]
       });
     }
-    const option = !isMultiSelect ? optionsMap.get(value) : undefined;
-    const label = (_ref5 = (_ref6 = (_option$label2 = option == null ? void 0 : option.label) != null ? _option$label2 : option == null ? void 0 : option.description) != null ? _ref6 : option == null ? void 0 : option.value) != null ? _ref5 : placeholder;
-    const content = hasValue ? label : placeholder;
-    return typeof content === 'string' ? /*#__PURE__*/_jsx(Text, {
+    return typeof singleValueContent === 'string' ? /*#__PURE__*/_jsx(Text, {
       color: hasValue ? 'fg' : 'fgMuted',
       ellipsize: "tail",
       font: "body",
       textAlign: "left",
-      children: content
-    }) : content;
-  }, [hasValue, isMultiSelect, optionsMap, placeholder, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel, removeSelectedOptionAccessibilityLabel, disabled, onChange]);
+      children: singleValueContent
+    }) : singleValueContent;
+  }, [hasValue, isMultiSelect, singleValueContent, value, maxSelectedOptionsToShow, hiddenSelectedOptionsLabel, optionsMap, removeSelectedOptionAccessibilityLabel, disabled, onChange]);
   const inputNode = useMemo(() => /*#__PURE__*/_jsx(TouchableOpacity, _extends({
     ref: ref,
-    accessibilityHint: accessibilityHint,
-    accessibilityLabel: accessibilityLabel,
+    accessibilityLabel: computedControlAccessibilityLabel,
     accessibilityRole: "button",
     disabled: disabled,
     onPress: () => setOpen(s => !s),
@@ -204,8 +217,9 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(/*#__PURE__*/forw
         })]
       })
     })
-  })), [ref, accessibilityHint, accessibilityLabel, disabled, styles == null ? void 0 : styles.controlInputNode, styles == null ? void 0 : styles.controlStartNode, styles == null ? void 0 : styles.controlValueNode, props, labelVariant, compact, startNode, shouldShowCompactLabel, labelNode, valueNode, contentNode, setOpen]);
+  })), [ref, computedControlAccessibilityLabel, disabled, styles == null ? void 0 : styles.controlInputNode, styles == null ? void 0 : styles.controlStartNode, styles == null ? void 0 : styles.controlValueNode, props, labelVariant, compact, startNode, shouldShowCompactLabel, labelNode, valueNode, contentNode, setOpen]);
   const endNode = useMemo(() => /*#__PURE__*/_jsx(Pressable, {
+    accessible: customEndNode ? true : false,
     disabled: disabled,
     onPress: () => setOpen(s => !s),
     children: /*#__PURE__*/_jsx(HStack, {

package/esm/alpha/select/Select.js

@@ -31,7 +31,7 @@ const SelectBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
       compact,
       label,
       labelVariant,
-      accessibilityLabel = type === 'multi' ? 'Multi select control' : undefined,
+      accessibilityLabel = typeof label === 'string' ? label : 'Select control',
       accessibilityHint,
       accessibilityRoles = defaultAccessibilityRoles,
       selectAllLabel,

package/esm/alpha/select/__stories__/AlphaSelect.stories.js

@@ -379,7 +379,7 @@ const WithNoLabelOrDescriptionExample = () => {
 const AccessibilityLabelExample = () => {
   const [value, setValue] = useState('1');
   return /*#__PURE__*/_jsx(Select, {
-    accessibilityLabel: "Accessibility label",
+    accessibilityLabel: "Custom accessibility label",
     label: "Single select - accessibility label",
     onChange: setValue,
     options: exampleOptions,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.38.4",
+  "version": "8.38.5",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -198,7 +198,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.38.4",
+    "@coinbase/cds-common": "^8.38.5",
     "@coinbase/cds-icons": "^5.9.0",
     "@coinbase/cds-illustrations": "^4.29.0",
     "@coinbase/cds-lottie-files": "^3.3.4",