Skip to content

fix: Screen Reader: Many Pages: Elements are focused in a confusing order #81063

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TaduJR wants to merge 1 commit into
base: main
Choose a base branch
from
+6 −1
Open

fix: Screen Reader: Many Pages: Elements are focused in a confusing order #81063

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/components/Composer/implementation/index.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,12 @@ function Composer({
);

const maxHeightStyle = useMemo(() => StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), [StyleUtils, isComposerFullSize, maxLines]);
const composerStyle = useMemo(() => StyleSheet.flatten([style, textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {}]), [style, textContainsOnlyEmojis, styles]);

// Negative margin moves frame up for correct iOS VoiceOver order; padding compensates visually. See #77499.
const composerStyle = useMemo(
Copy link
Contributor

@github-actions github-actions bot Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❌ CONSISTENCY-2 (docs)

The hardcoded values -5 and 5 are magic numbers that reduce code readability and maintainability. These accessibility-related values should be defined as named constants to clearly document their purpose.

Suggested fix:

Define constants at the top of the file or in a constants file:

const VOICEOVER_FRAME_ADJUSTMENT = {
    MARGIN_TOP: -5,
    PADDING_TOP: 5,
} as const;

Then use them in the style:

const composerStyle = useMemo(
    () => StyleSheet.flatten([
        style, 
        textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {}, 
        {
            marginTop: VOICEOVER_FRAME_ADJUSTMENT.MARGIN_TOP, 
            paddingTop: VOICEOVER_FRAME_ADJUSTMENT.PADDING_TOP
        }
    ]),
    [style, textContainsOnlyEmojis, styles],
);

Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.

() => StyleSheet.flatten([style, textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {}, {marginTop: -5, paddingTop: 5}]),
Comment on lines +113 to +114
Copy link

@chatgpt-codex-connector chatgpt-codex-connector bot Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Avoid reintroducing Android compose padding

This change adds paddingTop: 5 to the native composer style for all platforms, which overrides the Android workaround that explicitly sets paddingTop: 0 / paddingBottom: 0 to prevent extra vertical padding in multiline TextInput (see src/styles/index.ts lines 2143–2149). On Android, this will reintroduce the extra padding/height and can misalign the composer relative to the send button or change its height. If the fix is meant only for iOS VoiceOver, it should be gated to iOS or otherwise avoid overriding the Android padding reset.

Useful? React with 👍 / 👎.

Copy link
Contributor

@dukenv0307 dukenv0307 Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sense, can you please confirm this change doesn't cause the regression on Android @TaduJR ?

[style, textContainsOnlyEmojis, styles],
);

return (
<RNMarkdownTextInput
Expand Down
Loading