Accessibility

[maki3000]

What's the state with accessibility in this package? Is accessibilityRole="alert" set? I would really appreciate it!

Could we add:

• accessibilityLabel
• accessibilityHint

[sunnylqm]

PRs are welcomed

[maki3000]

I will try soon to do that!

I guess will do the following in lib/ToastContainer.js:

...
static defaultProps = {
        visible: false,
        duration: durations.SHORT,
        animation: true,
        shadow: true,
        position: positions.BOTTOM,
        opacity: 0.8,
        delay: 0,
        hideOnPress: true,
        keyboardAvoiding: true,
        accessible: true,
        accessibilityLabel: undefined,
        accessibilityHint: undefined,
        accessibilityRole: "alert"
    };
...
<TouchableWithoutFeedback
  onPress={() => {
    typeof this.props.onPress === 'function' ? this.props.onPress() : null
    this.props.hideOnPress ? this._hide() : null
   }}
   accessible={this.props.accessible ? this.props.accessible : true}
   accessibilityLabel={this.props.accessibilityLabel ? this.props.accessibilityLabel : undefined}
   accessibilityHint={this.props.accessibilityHint ? this.props.accessibilityHint : undefined}
   accessibilityRole={this.props.accessibilityRole ? this.props.accessibilityRole : "alert"}
>
...

What do you think?

[seba9999]

@sunnylqm He did it here. Any luck to be merged ?

[AHMED-5G]

import { AccessibilityInfo } from "react-native";

  Toast.show(message, {
    duration: Toast.durations.SHORT,
    position: Toast.positions.BOTTOM,
    shadow: true,
    animation: true,
    hideOnPress: true,
    delay: 0,
    textColor: "black",
    containerStyle: { height: 48 },
    opacity: 1,

    onShow: () => {
      // calls on toast\`s appear animation start

      AccessibilityInfo.announceForAccessibility(message); //<--------------- add this line

    },

  });