Talkback announces TouchableOpacity with accessibilityRole="radio" and accessibilityState "checked" in incorrect order

[swidjaja]

Description

When using TouchableOpacity with accessibilityRole="radio" and accessibilityState={{checked: true}}, Talkback announces "'checked/not checked', label, 'radio button'," (Notice that the accessibility state is announced first before the label). On iOS, it is announced in correct order "label, checked/not checked)

Steps to reproduce

import React, { useCallback, useState } from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10,
  },
  button: {
    alignItems: 'center',
    backgroundColor: 'yellow',
    opacity: 0.9,
    padding: 10,
    margin: 10
  },
  countContainer: {
    alignItems: 'center',
    padding: 10,
  },
  text: {
    backgroundColor: 'red',
    color: 'yellow',
    padding: 10,
    margin: 10
  },
});

export default function HomeScreen() {
  const [selectedIdx, setSelectedIdx] = useState(-1);
  const onStarSelected = useCallback((idx: any) => setSelectedIdx(idx), []);

  return (
    <View
      accessibilityRole="radiogroup"
      accessibilityLabel="Select rating"
    >
      <TouchableOpacity
        accessibilityRole='radio'
        style={styles.button}
        onPress={() => onStarSelected(1)}
        disabled={selectedIdx === 1}
        accessibilityState={{
          checked: selectedIdx === 1,
        }}
      >
         <Text>1 star</Text>
      </TouchableOpacity>

      <TouchableOpacity
        accessibilityRole='radio'
        style={styles.button}
        onPress={() => onStarSelected(2)}
        disabled={selectedIdx === 2}
        accessibilityState={{
          checked: selectedIdx === 2,
        }}
      >
        <Text>2 stars</Text>
      </TouchableOpacity>

      <TouchableOpacity
        accessibilityRole='radio'
        style={styles.button}
        onPress={() => onStarSelected(3)}
        disabled={selectedIdx === 3}
        accessibilityState={{
          checked: selectedIdx === 3,
        }}
      >
        <Text>3 star</Text>
      </TouchableOpacity>

      <TouchableOpacity
        accessibilityRole='radio'
        style={styles.button}
        onPress={() => onStarSelected(4)}
        disabled={selectedIdx === 4}
        accessibilityState={{
          checked: selectedIdx === 4,
        }}
      >
        <Text>4 stars</Text>
      </TouchableOpacity>

      <TouchableOpacity
        accessibilityRole='radio'
        style={styles.button}
        onPress={() => onStarSelected(5)}
        disabled={selectedIdx === 5}
        accessibilityState={{
          checked: selectedIdx === 5,
        }}
      >
        <Text>5 stars</Text>
      </TouchableOpacity>
    </View>
  );
}

React Native Version

0.74.2

Affected Platforms

Runtime - Android

Output of npx react-native info

expo-env-info 1.2.0 environment info:
    System:
      OS: macOS 12.7.5
      Shell: 5.8.1 - /bin/zsh
    Binaries:
      Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
      Yarn: 1.22.19 - /usr/local/bin/yarn
      npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
      Watchman: 2023.02.13.00 - /usr/local/bin/watchman
    Managers:
      CocoaPods: 1.11.3 - /Users/sugi/.gem/ruby/3.1.2/bin/pod
    IDEs:
      Xcode: /undefined - /usr/bin/xcodebuild
    npmPackages:
      expo: ~51.0.14 => 51.0.14
      expo-router: ~3.5.16 => 3.5.16
      react: 18.2.0 => 18.2.0
      react-dom: 18.2.0 => 18.2.0
      react-native: 0.74.2 => 0.74.2
      react-native-web: ~0.19.10 => 0.19.12
    Expo Workflow: managed

Stacktrace or Logs

N/A

Reproducer

https://snack.expo.dev/@swidjaja/touchable

Screenshots and Videos

No response

[uniqueeest]

Hi! @cortinico Can I solve this problem?

[cortinico]

Hi! @cortinico Can I solve this problem?

Please do 🙏

[meetdhanani17]

Hello @cortinico for the android we cannot change the order of sequence ("'checked/not checked', label, 'radio button',") for Talkback announcement

@swidjaja you can use accessibilityinfo api for more customization

[swidjaja]

Hello @cortinico for the android we cannot change the order of sequence ("'checked/not checked', label, 'radio button',") for Talkback announcement

@swidjaja you can use accessibilityinfo api for more customization

@meetdhanani17 Thank you for your response. Do you mean use the accessibilityinfo API to alter the order of announcement?

[meetdhanani17]

Hello @cortinico for the android we cannot change the order of sequence ("'checked/not checked', label, 'radio button',") for Talkback announcement @swidjaja you can use accessibilityinfo api for more customization

@meetdhanani17 Thank you for your response. Do you mean use the accessibilityinfo API to alter the order of announcement?

you can use it for provide custom message that could be use with talkback