…s, note-translation not found for more info button

- Added onPress to the entire TouchableOpacity, so that both the text and icon are clickable
- Added aria-hidden for IconButton

The BottomNavigation element provided by React Paper allows us to set an accessibilityLabel for each route button. Paper defaultly creates 2 text fields for each route (whether there's an accessibilityLabel, or themes present at all). One of them displays the text for the route, and the other is a exact-identical element, but has its opacity changed to 1 when its route is not-selected, and 0 when its route is selected. This appears to be so that the text is thicker when it is not selected, and thinner when it is selected.

My hope is that the screen reader will pick up this accessibilityLabel, and not read the internal text fields.

For accessibility improvements, see translations in e-mission/e-mission-translate#53

Accessibility and screen readers do not necessarily need to know what the text is of what the icon is supposed to be representing, and the React Native Paper element for List.Icon does not handle accessibilityLabel (the accessibilty label that is produced is undefined, [] empty box)

…n instead of button

React Native Paper does not handle AccessibiltyRole, so we have to just rename the accessibility text to include "spinbutton" to identify this object as a spinbutton. I am going with the expectation that accessibility elements in other languages (e.g. Spanish, Lao) use the same names for objects, such as "spinbutton", "button", etc. because this won't be translated

This way, the accessibility DOM sees it as one single clickable button, and does not attempt to focus on the text ever. I modeled this after the settingsrow buttons, which use List.Icon as well.

…-mission-phone into screen-reader

….tsx


These are old changes from before I took over the PR, I can go ahead undo them

….tsx


These are old changes from before I took over the PR, I can go ahead undo them