Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility #136

Open
maki3000 opened this issue Feb 10, 2021 · 4 comments
Open

Accessibility #136

maki3000 opened this issue Feb 10, 2021 · 4 comments

Comments

@maki3000
Copy link
Contributor

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

Could we add:

  • accessibilityLabel
  • accessibilityHint
@sunnylqm
Copy link
Collaborator

PRs are welcomed

@maki3000
Copy link
Contributor Author

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
Copy link

seba9999 commented Mar 8, 2022

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

@AHMED-5G
Copy link

AHMED-5G commented Feb 20, 2023

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

    },

  });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants