feat(Accessibility): A11y support #1
Conversation
lib/ToastContainer.js
Outdated
| 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"} |
There was a problem hiding this comment.
This doesn't make TalkBack on Android announce it even when the role is alert. Needs deeper investigation here.
Interestingly, the toast itself also doesn't announce the label or hint, but the invisible container does.
There was a problem hiding this comment.
Figured it out, needed an accessibilityLiveRegion statement since RN's accessibility delegate just creates a regular View and defers to live regions to handle announcements.
This still breaks a bit on Android so this isn't ready yet. Issues left:
- announces the toast on dismissal during the animation, most likely due to rerendering it seems;
- accessibility container hangs around forever unless visibility state is reset;
- focus outline is a bit off from container contents due to the default styling in place.
These require slightly larger changes, but overall looks straight-forward. However, these changes could potentially be breaking, and if we want this merged upstream some additional work will be needed after-the-fact to make it fully backwards-compatible.
There was a problem hiding this comment.
Expanding on this more, it seems like the most likely (and only) breaking change we'd have to introduce is how the View containing the actual touchable component in ToastContainer is styled such that it only ever expands to fit content size and the content itself drives how large it is. This is because that View will be the main component that a11y tools will interact with wrt e.g. closing the toast, reading out toast messages, etc and it currently has a screen reader focus outline that breaks out of the boundaries of the actual visible toast element.
The rest are internal-only changes that won't affect end-user usage of this, but this particular styling change may affect other users of the package. It may also end up that we can actually get it to announce things properly if we do larger sweeping changes internally to the component hierarchy that would negate this style change, but for now this is the path of least resistance to getting this out the door in time.
No description provided.