Why were accessible, accessibleState and accessibleValue removed?

[finsterwalder]

ReactNative has AccessibilityProps accessible, accessibleState and accessibleValue.
They used to be available in react native web 0.17 and have been removed in 0.18.
They have been deprecated and removed now, but I can't find an explanation why.

I found that react native web now has replacements in the form of its own accessibility attributes, like accessibilityChecked: true instead of accessibleState: { checked }.
Doesn't that make react native web incompatible to react native? At least for me developing on both platforms, I now have to put in different accessibility attributes for the different platforms, which used to "just work" before.

And what is a replacement for accessible?

[necolas]

https://github.com/necolas/react-native-web/releases

[finsterwalder]

Yes, I read throw the release notes. But that does not explain why. Or did I overlook something? then please point me to that directly, please.
And I still could not figure out, whether there is a replacement for the react native "accessible"-element.

[intergalacticspacehighway]

There's an RFC in react native to support aria-* props so we can be aligned with the web spec on native. In the meanwhile, you can use accessibility* mapping API on react native web.

[penx]

I just raised #2403 and then found this discussion

My understanding is that

• the RFC looks great, but it was opened in August is still in proposal state
• released versions of react-native do not have props such as accessibilityChecked
• if I have code that is type checked against react-native and compiled to both native and web, props such as accessibilityChecked are not an option
• the document linked to above states "Additional compatibility with React Native accessibility props is also included"
• accessibilityState was removed in March (5 months before the RFC) on the basis that it was deprecated

So how do we use accessibility props such as checked in a way that works on both native and web?

[penx]

As noted at #2403 (comment), I've created a 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 TypeScript types, which I'll think about and hopefully publish an update. PRs welcome if you have an idea!

[penx]

...for TypeScript types, I'm able to use declaration merging as described here, e.g.

// types/react-native.d.ts
import "react-native";

declare module "react-native" {
  /**
   * react-native with react-native-web extensions
   * @see https://necolas.github.io/react-native-web/docs/accessibility/#accessibility-props-api
   */
  export interface AccessibilityProps {
    /**
     * Equivalent to [aria-checked](https://www.w3.org/TR/wai-aria-1.2/#aria-checked).
     */
    accessibilityChecked?: ?boolean;
  }
}