issue 66: screen reader compatibility

CHANGELOG.md

@@ -40,6 +40,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add a plain multi selector to example app that toggles the `disabled` and `searchable` prop in all other selectors ([#28](https://github.com/rhventures/react-native-dropdown-selector/pull/28)).
 - Add pre-commit hooks to ensure code quality ([#53](https://github.com/rhventures/react-native-dropdown-selector/pull/53)).
 - Added a new string prop `theme` to allow explicit customization of `Select` and `MultiSelect` components. Options are `system`, `light`, and `dark` ([#55](https://github.com/rhventures/react-native-dropdown-selector/pull/55)).
+- Added compatibility for IOS & Android's built-in screen readers ([#112]https://github.com/rhventures/react-native-dropdown-selector/pull/112).
 
 ### Changed
 

src/components/MultiSelect.tsx

@@ -42,8 +42,12 @@ const MultiSelect = (props: MultiSelectProperties): React.JSX.Element => {
     });
 
   return (
-    <View>
+    <View>     
       <TouchableOpacity
+        accessible = {true}
+        accessibilityRole='menu'
+        accessibilityLabel='multi-select dropdown'
+        accessibilityValue={{text: (selected.length>0 ?  selected.length + 'items selected' : 'no selection' )}}
         activeOpacity={1}
         style={[
           style.selectorBox,

src/components/Select.tsx

@@ -44,6 +44,10 @@ const Select = (props: SelectProperties): React.JSX.Element => {
   return (
     <View>
       <TouchableOpacity
+        accessible = {true}
+        accessibilityRole='menu'
+        accessibilityLabel='single-select dropdown'
+        accessibilityValue={{text: (selected.label + ' selected' )}}
         activeOpacity={1}
         style={[
           style.selectorBox,

src/components/SelectionList.tsx

@@ -117,6 +117,8 @@ const SelectionList = (props: ListProperties): React.JSX.Element => {
           {props.searchable &&
             <TextInput
               placeholder='Search'
+              accessible = {true}
+              accessibilityRole='search'
               style={[style.searchBox, props.styles.searchBox]}
               placeholderTextColor={style.searchBox.color}
               onChangeText={(input: string) =>
@@ -162,7 +164,11 @@ const SelectionList = (props: ListProperties): React.JSX.Element => {
                     ],
                 ]}
               >
-                <Text style={[style.text, props.styles.text]}>
+                <Text 
+                  accessible = {true}
+                  accessibilityRole='menuitem'
+                  accessibilityState={{selected : (props.type === 'single' ? props.selected === item : (props.selected as Data[]).includes(item))}}
+                  style={[style.text, props.styles.text]}>
                   {item.label}
                 </Text>
               </TouchableOpacity>
@@ -194,6 +200,9 @@ const SelectionList = (props: ListProperties): React.JSX.Element => {
               onPress={props.clearSelected}
             >
               <View style={{ position: 'absolute', right: 6, top: 6}}>
+                accessible = {true}
+                accessibilityRole='button'
+                accessibilityLabel='clear list'
                 { // This is the cross "✖"
                   <Svg width={25} height={25} viewBox="0 0 25 25" >
                     <Path d="M19,19,5,5M19,5,5,19" stroke={props.styles.clearButtonIcon ?? style.clearIcon.color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />