diff --git a/src/CONST/index.ts b/src/CONST/index.ts index e176b43b268c..761397046d65 100644 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -5971,7 +5971,9 @@ const CONST = { ACCESSIBILITY_LABELS: { COLLAPSE: 'Collapse', + COLLAPSED: 'Collapsed', EXPAND: 'Expand', + EXPANDED: 'Expanded', ERROR: 'Error', }, diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx index 03ac1e14694e..861cd56a6a60 100644 --- a/src/components/Button/index.tsx +++ b/src/components/Button/index.tsx @@ -149,6 +149,9 @@ type ButtonProps = Partial & /** 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 && } {renderContent()} diff --git a/src/components/ButtonWithDropdownMenu/index.tsx b/src/components/ButtonWithDropdownMenu/index.tsx index e609e656e897..7cebd3e92482 100644 --- a/src/components/ButtonWithDropdownMenu/index.tsx +++ b/src/components/ButtonWithDropdownMenu/index.tsx @@ -146,6 +146,9 @@ function ButtonWithDropdownMenu({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({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({ref, ...props}: ButtonWithDropdownM innerStyles={[styles.dropDownButtonCartIconContainerPadding, innerStyleDropButton, isButtonSizeSmall && styles.dropDownButtonCartIcon]} enterKeyEventListenerPriority={enterKeyEventListenerPriority} sentryLabel={sentryLabel} + accessibilityLabel={accessibilityLabel} + accessibilityHint="" > diff --git a/src/components/Pressable/GenericPressable/implementation/index.native.tsx b/src/components/Pressable/GenericPressable/implementation/index.native.tsx index 6f27367fd782..14f8ecaec793 100644 --- a/src/components/Pressable/GenericPressable/implementation/index.native.tsx +++ b/src/components/Pressable/GenericPressable/implementation/index.native.tsx @@ -9,6 +9,7 @@ function NativeGenericPressable({ref, ...props}: PressableProps) { accessible // eslint-disable-next-line react/jsx-props-no-spreading {...props} + accessibilityHint={props.accessibilityHint ?? props.accessibilityLabel} ref={ref} accessibilityHint={props.accessibilityHint ?? props.accessibilityLabel} />