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

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

@cortinico

Hi! @cortinico Can I solve this problem?

@cortinico

Hi! @cortinico Can I solve this problem?

Please do 🙏

@cortinico

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

@cortinico

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?

@cortinico

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

@cortinico

Hi @cortinico, I would love to tackle this problem

@cortinico

Hi @cortinico, I would love to tackle this problem

Please do 👍

@cortinico

Hi @cortinico , I made some changes and now I want to test the react native version I'm having.
What are possible ways that you would recommend me to test?
I'm thinking of create a react native project and use the react native version I have but I don't know how or where to start,

What are possible ways that you would recommend me to test?

I'd say the reccomended way here is to use RN-Tester, the reference app that you find inside packages/rn-tester to verify your changes

@blavalla

After further investigation seems like this is the intended behavior:

Quoting my colleague @blavalla

By default, Android announces things in the order of {state}, {label}, {role}, so "Checked, Foo, Checkbox", and RN seems to currently match this behavior.
iOS natively has no concept of "checked", so our addition of it was a polyfill, so if anything it would make more sense to modify iOS to match Android rather than the other way around.
On web on iOS elements like checkboxes are presented in the order of {label}, {role}, {state} (e.g. "Foo, checkbox, unchecked", so we matched this in our polyfill to give users the most consistent experience on that platform.
On web on Android elements like checkboxes are presented in the same order as native, so {state}, {label}, {role} (e.g. "unchecked, Foo, checkbox"), so changing this for RN would both be inconsistent with other native Android apps, as well as web experiences on Android.

Navigation Menu

Repository navigation

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

Description

Steps to reproduce

React Native Version

Affected Platforms

Output of `npx react-native info`

Stacktrace or Logs

Reproducer

Screenshots and Videos

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Description

Steps to reproduce

React Native Version

Affected Platforms

Output of npx react-native info

Stacktrace or Logs

Reproducer

Screenshots and Videos

Activity

uniqueeest commented on Jun 21, 2024

cortinico commented on Jun 21, 2024

meetdhanani17 commented on Jul 22, 2024

swidjaja commented on Jul 22, 2024

meetdhanani17 commented on Jul 22, 2024

dnhan1707 commented on Oct 14, 2024

cortinico commented on Oct 15, 2024

dnhan1707 commented on Oct 20, 2024

cortinico commented on Oct 21, 2024

cortinico commented on Nov 5, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Output of `npx react-native info`