From 06e291fe3cc80cf86613bdcd0d313ac94630a485 Mon Sep 17 00:00:00 2001 From: angelabenavente Date: Thu, 27 Aug 2026 20:10:32 +0200 Subject: [PATCH 1/3] add(button): pass accessibilityLabelledBy through Button --- .../Libraries/Components/Button.js | 23 ++++++++++- .../Components/__tests__/Button-itest.js | 40 +++++++++++++++++++ .../Libraries/Components/Button.d.ts | 3 ++ 3 files changed, 65 insertions(+), 1 deletion(-) diff --git a/packages/react-native/Libraries/Components/Button.js b/packages/react-native/Libraries/Components/Button.js index c1bec4b65edf..218d41277f19 100644 --- a/packages/react-native/Libraries/Components/Button.js +++ b/packages/react-native/Libraries/Components/Button.js @@ -158,6 +158,21 @@ export type ButtonProps = Readonly<{ importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'), accessibilityHint?: ?string, + /** + * Identifies the element that labels this button. The value should match + * the `nativeID` of the related element. + * + * @platform android + */ + accessibilityLabelledBy?: ?string | ?Array, + + /** + * Alias for `accessibilityLabelledBy`. + * + * @platform android + */ + 'aria-labelledby'?: ?string, + /** * A BCP 47 language tag for the screen reader to use when reading text * content. @@ -211,8 +226,10 @@ const Button: component( 'aria-disabled': ariaDisabled, 'aria-expanded': ariaExpanded, 'aria-label': ariaLabel, + 'aria-labelledby': ariaLabelledBy, 'aria-selected': ariaSelected, importantForAccessibility, + accessibilityLabelledBy, color, onPress, touchSoundDisabled, @@ -269,11 +286,14 @@ const Button: component( Platform.OS === 'android' ? title.toUpperCase() : title; // If `no` is specified for `importantForAccessibility`, it will be changed to `no-hide-descendants` because the text inside should not be focused. - const _importantForAccessibility = + let _importantForAccessibility = importantForAccessibility === 'no' ? 'no-hide-descendants' : importantForAccessibility; + const _accessibilityLabelledBy = + ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy; + return ( ', () => { }); }); + describe('accessibilityLabelledBy', () => { + it('propagates accessibilityLabelledBy', () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render( +