Accessibility - Pressable does not render with aria-checked

[penx]

Is there an existing issue for this?

• I have searched the existing issues

Describe the issue

The following code

    <Pressable
      accessibilityLabel="label"
      accessibilityRole="radio"
      accessibilityState={{ checked: true }}
    >
      Example
    </Pressable>

renders as

<div aria-label="label" role="radio" tabindex="0">Example</div>

Which includes the label and role attributes but does not include aria-checked

Expected behavior

Should render as

<div aria-label="label" role="radio" tabindex="0" aria-checked="true">Example</div>

Steps to reproduce

react-native-web@0.18.9

As per code code sandbox test case.

Test case

https://codesandbox.io/s/react-native-web-checked-1ej4me

Additional comments

No response

[penx]

I see support for this was removed in 174ebb3 with the comment" Remove deprecated accessibility APIs", but I don't see any reference to accessibilityState being deprecated at https://reactnative.dev/docs/accessibility

[penx]

I've also seen #2372 and have left a comment there. As react-native doesn't currently support the accessibilityChecked prop, I don't understand how to use get aria-checked="true" in a way that builds for both native and web.

[necolas]

Use accessibilityChecked. See https://necolas.github.io/react-native-web/docs/accessibility/ and https://github.com/necolas/react-native-web/releases/tag/0.18.0

As react-native doesn't currently support the accessibilityChecked prop, I don't understand how to use get aria-checked="true" in a way that builds for both native and web.

Use Platform.select until RN releases support for aria-checked.

[penx]

Thanks!

I still need to figure out typing, but I think I can create a utility like this:

const getAccessibilityStateProps = (accessibilityState: {
  disabled?: boolean;
  selected?: boolean;
  checked?: boolean | "mixed";
  busy?: boolean;
  expanded?: boolean;
}) =>
  Platform.select({
    web: {
      accessibilityDisabled: accessibilityState.disabled,
      accessibilitySelected: accessibilityState.selected,
      accessibilityChecked: accessibilityState.checked,
      accessibilityBusy: accessibilityState.busy,
      accessibilityExpanded: accessibilityState.expanded
    },
    default: { accessibilityState }
  });

and have wrapped this in a little library called react-native-accessibility-props that can be used like this

import { Pressable } from "react-native";
import { getAccessibilityStateProps } from "react-native-accessibility-props";

export default function App() {
  return (
    <Pressable
      accessibilityRole="radio"
      accessibilityLabel="label"
      {...getAccessibilityStateProps({ checked: true })}
    >
      Example
    </Pressable>
  );
}

Seems to work, other than the types, which I'll think about and hopefully publish an update.

https://codesandbox.io/s/react-native-accessibility-props-0vpn1r

I'll probably add another utility for all other accessibility& props too.