fix: button is announced without a state

src/CONST/index.ts

@@ -5971,7 +5971,9 @@ const CONST = {
 
     ACCESSIBILITY_LABELS: {
         COLLAPSE: 'Collapse',
+        COLLAPSED: 'Collapsed',
         EXPAND: 'Expand',
+        EXPANDED: 'Expanded',
         ERROR: 'Error',
     },
 

src/components/Button/index.tsx

@@ -149,6 +149,9 @@ type ButtonProps = Partial<ChildrenProps> &
         /** Accessibility label for the component */
         accessibilityLabel?: string;
 
+        /** Accessibility hint for the component */
+        accessibilityHint?: string;
+
         /** The text for the button label */
         text?: string;
 
@@ -284,6 +287,7 @@ function Button({
     id = '',
     testID = undefined,
     accessibilityLabel = '',
+    accessibilityHint = undefined,
     link = false,
     isContentCentered = false,
     isPressOnEnterActive,
@@ -532,6 +536,7 @@ function Button({
                 onHoverIn={!isDisabled || !shouldStayNormalOnDisable ? () => setIsHovered(true) : undefined}
                 onHoverOut={!isDisabled || !shouldStayNormalOnDisable ? () => setIsHovered(false) : undefined}
                 sentryLabel={sentryLabel}
+                accessibilityHint={accessibilityHint}
             >
                 {shouldBlendOpacity && <View style={[StyleSheet.absoluteFill, buttonBlendForegroundStyle]} />}
                 {renderContent()}

src/components/ButtonWithDropdownMenu/index.tsx

@@ -146,6 +146,9 @@ function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownM
     );
     const splitButtonWrapperStyle = isSplitButton ? [styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter] : {};
     const isTextTooLong = customText && customText?.length > 6;
+    const accessibilityExpandState = isMenuVisible ? CONST.ACCESSIBILITY_LABELS.EXPANDED : CONST.ACCESSIBILITY_LABELS.COLLAPSED;
+    const buttonText = customText ?? selectedItem?.text ?? '';
+    const accessibilityLabel = `${accessibilityExpandState}, ${buttonText}`;
 
     const handlePress = useCallback(
         (event?: GestureResponderEvent | KeyboardEvent) => {
@@ -195,6 +198,8 @@ function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownM
                         iconRightFill={hasError ? theme.buttonIcon : undefined}
                         iconRightHoverFill={hasError ? theme.buttonIcon : undefined}
                         sentryLabel={sentryLabel}
+                        accessibilityLabel={!isSplitButton ? accessibilityLabel : undefined}
+                        accessibilityHint=""
                     />
 
                     {isSplitButton && (
@@ -213,6 +218,8 @@ function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownM
                             innerStyles={[styles.dropDownButtonCartIconContainerPadding, innerStyleDropButton, isButtonSizeSmall && styles.dropDownButtonCartIcon]}
                             enterKeyEventListenerPriority={enterKeyEventListenerPriority}
                             sentryLabel={sentryLabel}
+                            accessibilityLabel={accessibilityLabel}
+                            accessibilityHint=""
                         >
                             <View style={[styles.dropDownButtonCartIconView, innerStyleDropButton]}>
                                 <View style={[success ? styles.buttonSuccessDivider : styles.buttonDivider]} />

src/components/Pressable/GenericPressable/implementation/index.native.tsx

@@ -9,8 +9,9 @@
             accessible
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
+            accessibilityHint={props.accessibilityHint ?? props.accessibilityLabel}
             ref={ref}
             accessibilityHint={props.accessibilityHint ?? props.accessibilityLabel}
         />
     );
 }