[Due for payment 2026-03-30] Screen Reader: Many Pages: No announcement or focus change after selecting an emoji category

[elisenwazuoke]

Action Performed:

Precondition: User is logged in

1. Using VoiceOver on iOS or TalkBack on Android, open the app
2. Swipe right to focus the Account tab and double-tap to activate it
3. Swipe right to focus the Profile button and double-tap to activate it
4. Swipe right to focus the Status menu item and double-tap to activate it
5. Swipe right to focus the Status Emoji button and double-tap to activate it
6. Swipe right to focus the emoji category emojis and double-tap to activate it
7. Note the behavior after selecting any emoji category and the announcement

This issue reproduces in all screens with the emoji option
Examples:

1. New chat
2. Group chat

Expected Result:

When a user selects an emoji category button (e.g., "Frequently used", "Smileys", "Animals"), the screen reader focus should move to the corresponding category heading at the top of the emoji list and announce it.

This announces that the view has updated and helps the user understand that the emoji list has changed.
Expected screen reader announcement:
"Smiley, heading"
"Animals, heading"

Actual Result:

Android (TalkBack): No feedback; the user receives no indication that the category changed.
iOS (VoiceOver): Re-announces only the button label (e.g., "emoji Picker.headers.frequently used, button"), giving no indication that the content changed or that a new category is active.

Focus does not move to the category heading or emoji grid.

Area issue was found in:

Profile > Status

Failed WCAG checkpoints

WCAG 2.4.3 Focus Order
https://www.w3.org/WAI/WCAG22/Understanding/focus-order

User impact:

People with mobility impairments who must rely on keyboard access for operating a page benefit from a logical, usable focus order. People with vision impairments or disabilities that make reading difficult can become disoriented when tabbing takes focus someplace unexpected or when they cannot easily find the content surrounding an interactive element. Only a small portion of the page may be visible to an individual using a screen magnifier at a high level of magnification. Such a user may interpret a field in the wrong context if the focus order is not logical.

Suggested resolution:

After selecting a category, programmatically set focus to the category heading and ensure it is announced, using AccessibilityInfo API.
https://appt.org/en/docs/react-native/samples/accessibility-focus
https://reactnative.dev/docs/accessibilityinfo

Environment(s)

Apple iPhone 14 Pro - iOS 18.7.1, Wi-Fi - Native (No mobile browser)
Samsung Galaxy Note10 Plus - Android 12, H0T Mobile - Native (No mobile browser)

Screenshots/Videos

Bug7008046_1763623857687.No_announcement_or_focus_change_after_selecting_an_emoji_category.mp4

Version Number: Production
Reproducible in staging?: NA
Reproducible in production?: Yes
Email or phone of affected tester (no customers): NA
Logs: https://stackoverflow.com/c/expensify/questions/4856 NA
Notes/Photos/Videos: Any additional supporting documentation Yes
Expensify/Expensify Issue URL: https://platform.applause.com/company/12102/products/36628/community-issues/7008046
Issue reported by: NA
Slack conversation: NA

Issue Owner

Current Issue Owner: @truph01

[melvin-bot]

This issue has not been updated in over 15 days. eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[marufsharifi]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The emoji category shortcuts don’t provide enough screen reader feedback. Two gaps:

1. Selecting a category doesn’t reliably announce that the category is selected.
2. After selecting a category, focus does not move to the corresponding category header in the emoji list.

What is the root cause of that problem?

Category shortcuts only scroll the list, and the headers are not focusable or targeted by SR focus. So the screen reader stays on the shortcut button and never lands on (or announces) the list header.

App/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx

Lines 71 to 77 in 8372553

	const scrollToHeader = useCallback(
	(headerIndex: number) => {
	const calculatedOffset = Math.floor(headerIndex / CONST.EMOJI_NUM_PER_ROW) * CONST.EMOJI_PICKER_HEADER_HEIGHT;
	emojiListRef.current?.scrollToOffset({offset: calculatedOffset, animated: true});
	},
	[emojiListRef],
	);

App/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx

Lines 93 to 99 in 8372553

	if ('header' in item && item.header) {
	return (
	<View style={[styles.emojiHeaderContainer, target === 'StickyHeader' ? styles.mh4 : {width: windowWidth}]}>
	<Text style={styles.textLabelSupporting}>{translate(`emojiPicker.headers.${code}` as TranslationPaths)}</Text>
	</View>
	);
	}

What changes do you think we should make in order to solve the problem?

We fix two behaviors:

• Announce selected category (button announces “selected”)
• Move focus to the selected category header (after scroll completes)

---

1. Announce the selected category
   We track the selected category index and expose it to the shortcut buttons so SR announces “selected”.

diff --git a/src/components/EmojiPicker/CategoryShortcutBar.tsx b/src/components/EmojiPicker/CategoryShortcutBar.tsx
index fe07a4429ba..16428c33275 100644
--- a/src/components/EmojiPicker/CategoryShortcutBar.tsx
+++ b/src/components/EmojiPicker/CategoryShortcutBar.tsx
@@ -10,9 +10,12 @@ type CategoryShortcutBarProps = {
     headerEmojis: HeaderIndices[];
+    selectedIndex?: number | null;
 };
 
-function CategoryShortcutBar({onPress, headerEmojis}: CategoryShortcutBarProps) {
+function CategoryShortcutBar({onPress, headerEmojis, selectedIndex = null}: CategoryShortcutBarProps) {
@@
                     key={`categoryShortcut${headerEmoji.index}`}
                     code={headerEmoji.code}
+                    isSelected={headerEmoji.index === selectedIndex}

diff --git a/src/components/EmojiPicker/CategoryShortcutButton.tsx b/src/components/EmojiPicker/CategoryShortcutButton.tsx
index 33f59ca73a3..ec21bb20a31 100644
--- a/src/components/EmojiPicker/CategoryShortcutButton.tsx
+++ b/src/components/EmojiPicker/CategoryShortcutButton.tsx
@@ -21,9 +21,12 @@ type CategoryShortcutButtonProps = {
     onPress: () => void;
+    isSelected?: boolean;
 };
 
-function CategoryShortcutButton({code, icon, onPress}: CategoryShortcutButtonProps) {
+function CategoryShortcutButton({code, icon, onPress, isSelected = false}: CategoryShortcutButtonProps) {
@@
                 accessibilityLabel={translate(`emojiPicker.headers.${code}` as TranslationPaths)}
+                accessibilityState={isSelected ? {selected: true} : undefined}
                 role={CONST.ROLE.BUTTON}

diff --git a/src/components/EmojiPicker/EmojiPickerMenu/BaseEmojiPickerMenu.tsx b/src/components/EmojiPicker/EmojiPickerMenu/BaseEmojiPickerMenu.tsx
index f6161b8f7dc..7746d9c5d17 100644
--- a/src/components/EmojiPicker/EmojiPickerMenu/BaseEmojiPickerMenu.tsx
+++ b/src/components/EmojiPicker/EmojiPickerMenu/BaseEmojiPickerMenu.tsx
@@ -20,6 +20,9 @@ type BaseEmojiPickerMenuProps = {
     headerEmojis: HeaderIndices[];
+    selectedHeaderIndex?: number | null;
@@
 function BaseEmojiPickerMenu({
     headerEmojis,
+    selectedHeaderIndex = null,
@@
             {!isFiltered && (
                 <CategoryShortcutBar
                     headerEmojis={headerEmojis}
+                    selectedIndex={selectedHeaderIndex}
                     onPress={scrollToHeader}

---

2. Move focus to the selected header (reliable even for far scroll)
   We make headers focusable and programmatically move SR focus after scroll finishes, with retries for far jumps.

diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx b/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx
index 718a9ff6b5b..8aa9b5d92ee 100644
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.native.tsx
@@
-import React, {useCallback} from 'react';
-import {InteractionManager, View} from 'react-native';
+import React, {useCallback, useRef, useState} from 'react';
+import {AccessibilityInfo, findNodeHandle, InteractionManager, View} from 'react-native';
@@
+    const headerRefs = useRef<Record<number, React.RefObject<View | null>>>({});
+    const pendingHeaderFocusIndexRef = useRef<number | null>(null);
+    const [selectedHeaderIndex, setSelectedHeaderIndex] = useState<number | null>(null);
+
+    const getHeaderRef = useCallback((index: number) => {
+        if (!headerRefs.current[index]) {
+            headerRefs.current[index] = React.createRef<View>();
+        }
+        return headerRefs.current[index];
+    }, []);
+
+    const focusHeaderAtIndex = useCallback((headerIndex: number) => {
+        const headerRef = headerRefs.current[headerIndex];
+        if (!headerRef?.current) {
+            return false;
+        }
+        pendingHeaderFocusIndexRef.current = null;
+        InteractionManager.runAfterInteractions(() => {
+            const reactTag = findNodeHandle(headerRef.current);
+            if (!reactTag) {
+                return;
+            }
+            AccessibilityInfo.setAccessibilityFocus(reactTag);
+        });
+        return true;
+    }, []);
+
+    const scheduleHeaderFocus = useCallback(
+        function schedule(headerIndex: number, attempt = 0) {
+            if (focusHeaderAtIndex(headerIndex)) {
+                return;
+            }
+            if (attempt >= 2) {
+                return;
+            }
+            setTimeout(() => schedule(headerIndex, attempt + 1), CONST.ANIMATED_TRANSITION);
+        },
+        [focusHeaderAtIndex],
+    );
+
+    const handleHeaderLayout = useCallback(
+        (index: number) => {
+            if (pendingHeaderFocusIndexRef.current !== index) {
+                return;
+            }
+            focusHeaderAtIndex(index);
+        },
+        [focusHeaderAtIndex],
+    );
@@
     const scrollToHeader = useCallback(
         (headerIndex: number) => {
             const calculatedOffset = Math.floor(headerIndex / CONST.EMOJI_NUM_PER_ROW) * CONST.EMOJI_PICKER_HEADER_HEIGHT;
+            setSelectedHeaderIndex(headerIndex);
+            pendingHeaderFocusIndexRef.current = headerIndex;
             emojiListRef.current?.scrollToOffset({offset: calculatedOffset, animated: true});
+            scheduleHeaderFocus(headerIndex);
         },
-        [emojiListRef],
+        [emojiListRef, scheduleHeaderFocus, setSelectedHeaderIndex],
     );
@@
-        ({item, target}) => {
+        ({item, target, index}) => {
@@
             if ('header' in item && item.header) {
                 return (
-                    <View style={[styles.emojiHeaderContainer, target === 'StickyHeader' ? styles.mh4 : {width: windowWidth}]}>
+                    <View
+                        ref={getHeaderRef(index)}
+                        accessible
+                        accessibilityRole="header"
+                        accessibilityLabel={translate(`emojiPicker.headers.${code}` as TranslationPaths)}
+                        style={[styles.emojiHeaderContainer, target === 'StickyHeader' ? styles.mh4 : {width: windowWidth}]}
+                        onLayout={() => handleHeaderLayout(index)}
+                    >
                         <Text style={styles.textLabelSupporting}>{translate(`emojiPicker.headers.${code}` as TranslationPaths)}</Text>
                     </View>
                 );
@@
             <BaseEmojiPickerMenu
                 isFiltered={isListFiltered}
                 headerEmojis={headerEmojis}
+                selectedHeaderIndex={selectedHeaderIndex}
                 scrollToHeader={scrollToHeader}
+                onMomentumScrollEnd={() => {
+                    if (pendingHeaderFocusIndexRef.current == null) {
+                        return;
+                    }
+                    scheduleHeaderFocus(pendingHeaderFocusIndexRef.current);
+                }}

diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.tsx b/src/components/EmojiPicker/EmojiPickerMenu/index.tsx
index 7029740133b..44bebe7a776 100755
--- a/src/components/EmojiPicker/EmojiPickerMenu/index.tsx
+++ b/src/components/EmojiPicker/EmojiPickerMenu/index.tsx
@@
     } = useEmojiPickerMenu();
+    const headerRefs = useRef<Record<number, React.RefObject<View | null>>>({});
+    const pendingHeaderFocusIndexRef = useRef<number | null>(null);
+    const [selectedHeaderIndex, setSelectedHeaderIndex] = useState<number | null>(null);
+    const getHeaderRef = useCallback((index: number) => {
+        if (!headerRefs.current[index]) {
+            headerRefs.current[index] = React.createRef<View>();
+        }
+        return headerRefs.current[index];
+    }, []);
+    const focusHeaderAtIndex = useCallback((headerIndex: number) => {
+        const headerRef = headerRefs.current[headerIndex];
+        if (!headerRef?.current) {
+            return false;
+        }
+        pendingHeaderFocusIndexRef.current = null;
+        headerRef.current.focus?.();
+        return true;
+    }, []);
+    const scheduleHeaderFocus = useCallback(
+        function schedule(headerIndex: number, attempt = 0) {
+            if (focusHeaderAtIndex(headerIndex)) {
+                return;
+            }
+            if (attempt >= 2) {
+                return;
+            }
+            setTimeout(() => schedule(headerIndex, attempt + 1), CONST.ANIMATED_TRANSITION);
+        },
+        [focusHeaderAtIndex],
+    );
+    const handleHeaderLayout = useCallback(
+        (index: number) => {
+            if (pendingHeaderFocusIndexRef.current !== index) {
+                return;
+            }
+            focusHeaderAtIndex(index);
+        },
+        [focusHeaderAtIndex],
+    );
@@
             const calculatedOffset = Math.floor(headerIndex / CONST.EMOJI_NUM_PER_ROW) * CONST.EMOJI_PICKER_HEADER_HEIGHT;
+            setSelectedHeaderIndex(headerIndex);
+            pendingHeaderFocusIndexRef.current = headerIndex;
             emojiListRef.current?.scrollToOffset({offset: calculatedOffset, animated: true});
             setFocusedIndex(headerIndex);
+            setTimeout(() => {
+                scheduleHeaderFocus(headerIndex);
+            }, CONST.ANIMATED_TRANSITION);
         },
-        [emojiListRef, setFocusedIndex],
+        [emojiListRef, scheduleHeaderFocus, setFocusedIndex, setSelectedHeaderIndex],
     );
@@
             if ('header' in item && item.header) {
                 return (
                     <View
+                        ref={getHeaderRef(index)}
+                        tabIndex={-1}
+                        role={CONST.ROLE.HEADING}
+                        onLayout={() => handleHeaderLayout(index)}
                         style={[
@@
             <BaseEmojiPickerMenu
                 isFiltered={isListFiltered}
                 headerEmojis={headerEmojis}
+                selectedHeaderIndex={selectedHeaderIndex}
                 scrollToHeader={scrollToHeader}

---

Video demo of the fix:

emoji-category-announces-and-focus-changes-to-header.mp4

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

[melvin-bot]

@suneox 12 days overdue now... This issue's end is nigh!

[suneox]

This issue still depends on #77572, and we’re still working on that PR.