Various accessibility issues in the React Native code

[MarcoZehe]

Description

The React Native code of the Jitsi Meet iOS and Android client has various accessibility issues. The Accessibility API for React Native is documented here.

1. The individual toolbox items need to have a role of "button". This is to indicate to assistive technologies that they are tapable and that they can be activated and perform an action. This is achieved by giving the native base toolbox item an accessibilityRole = 'button' property.
2. The current state of toggleable items such as audio or video is not communicated to assistive technologies. To fix this, give the button an accessibilityState of {'selected: true}, but only when toggled is true. That will add the "selected" or similar word to the button utterance.
3. The toolbox itself should be marked with an accessibilityRole of 'toolbar'.
4. The overflow menu should be marked as an accessibilityRole 'menu'. Depending on results, the items inside might need to become 'menuitem' instead of 'button', but I am not sure about that.
5. The clickable area outside an overflow menu to close the menu needs an accessibilityRole of 'button' and an accessibilityLabel of 'Close menu' or such.
6. All items that get a tooltip should get the same text as accessibilityHint.
7. Once a call is started, there is some kind of unlabeled area before the "video" element that I don't know what it does.

---

Current behavior

Many items do not have semantic meaning when used with VoiceOver on iOS or TalkBack on Android.

---

Expected Behavior

Items should have meaning and proper representation of current state.

---

Possible Solution

See inline in the list above.

---

Steps to reproduce

1. Turn on VoiceOver on iOS or TalkBack on Android, both found in Accessibility Settings. You might want to set the Accessibility Shortcut to toggle VoiceOver/TalkBack on and off so you can quickly change between testing and working with your device in normal mode.
2. Navigate the Jitsi-Meet iOS client UI.

---

Environment details

Current app store version of Jitsi Meet, on current iPhone or iPad.

---

CC @damencho @t3chguy

[MarcoZehe]

I just realized that my point 2 above is better solved with the second approach, AKA keeping the label intact and adding the selected state when appropriate, as to keep it in sync with the web version which just adds aria-pressed, making them into toggle buttons. Unfortunately I don't currently have the ability to build react-native stuff, much less test on a device (the simulators are inaccessible to me as a screen reader user). So while I can give pointers to where in code this needs to happen, theoretically, I have no way of knowing whether the code I'd put in there would actually compile. React confuses me with what goes in parentheses when and when not etc.

[damencho]

cc @hristoterezov @zbettenbuk

[MarcoZehe]

You are free to review #5825 at your discretion. It is not completed yet, but the stuff that is there should, in theory, make things a lot better already for both iOS and Android. Also, pointers to especially the big area outside the bottom sheet that can be clicked to dismiss that bottom sheet, are appreciated. Or you take over and complete that with a corresponding accessibilityLabel, and accessibilityRole ‚button‘.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.