diff --git a/src/components/Pressable/PressableWithDelayToggle.tsx b/src/components/Pressable/PressableWithDelayToggle.tsx index dfdf361eb723..bb7d1759ba3f 100644 --- a/src/components/Pressable/PressableWithDelayToggle.tsx +++ b/src/components/Pressable/PressableWithDelayToggle.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react-native-a11y/has-valid-accessibility-descriptors */ import React from 'react'; import type {StyleProp, TextStyle, ViewStyle} from 'react-native'; import Icon from '@components/Icon'; @@ -83,7 +82,7 @@ function PressableWithDelayToggle({ iconStyles, icon, ref, - accessibilityRole, + accessibilityRole = CONST.ROLE.BUTTON, shouldHaveActiveBackground, iconWidth = variables.iconSizeSmall, iconHeight = variables.iconSizeSmall, @@ -109,6 +108,8 @@ function PressableWithDelayToggle({ // of a Pressable const PressableView = inline ? Text : PressableWithoutFeedback; const tooltipTexts = !isActive ? tooltipTextChecked : tooltipText; + // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Fallback to visible text when tooltip is empty for screen readers + const processedAccessibilityLabel = tooltipTexts || (!isActive && textChecked ? textChecked : text) || ''; const shouldShowIcon = !!icon || (!isActive && !!resolvedIconChecked); const labelText = // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Disabling this line for safeness as nullish coalescing works only if the value is undefined or null @@ -132,7 +133,7 @@ function PressableWithDelayToggle({ // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment ref={ref as any} onPress={updatePressState} - accessibilityLabel={tooltipTexts} + accessibilityLabel={processedAccessibilityLabel} suppressHighlighting={inline ? true : undefined} accessibilityRole={accessibilityRole} > @@ -142,6 +143,7 @@ function PressableWithDelayToggle({ text={tooltipTexts} shouldRender > + {/* eslint-disable-next-line react-native-a11y/has-valid-accessibility-descriptors -- Inner pressable is intentionally non-accessible (accessible={false}) since the outer PressableView handles accessibility */} diff --git a/src/pages/settings/Security/TwoFactorAuth/VerifyPage.tsx b/src/pages/settings/Security/TwoFactorAuth/VerifyPage.tsx index 3b0bfc394660..5a301caefa40 100644 --- a/src/pages/settings/Security/TwoFactorAuth/VerifyPage.tsx +++ b/src/pages/settings/Security/TwoFactorAuth/VerifyPage.tsx @@ -130,7 +130,7 @@ function VerifyPage({route}: VerifyPageProps) { onPress={() => Clipboard.setString(account?.twoFactorAuthSecretKey ?? '')} styles={[styles.button, styles.buttonMedium, styles.twoFactorAuthCopyCodeButton]} textStyles={[styles.buttonMediumText]} - accessible={false} + accessibilityLabel={translate('twoFactorAuth.copy')} sentryLabel={CONST.SENTRY_LABEL.TWO_FACTOR_AUTH.COPY} />