Add Various Accessibility Properties

renrizzolo · Apr 24, 2023 · 3675c70 · 3675c70
1 parent 59d93e4
commit 3675c70
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/lib/components/RowItem.js b/lib/components/RowItem.js
@@ -216,6 +216,8 @@ class RowItem extends Component {
       subItemsFlatListProps
     } = this.props
     const hasDropDown = item[subKey] && item[subKey].length > 0 && showDropDowns
+    const itemSelected = this._itemSelected(item)
+    const showSubCategoryDropDown = this._showSubCategoryDropDown()
 
     return (
       <View>
@@ -230,6 +232,8 @@ class RowItem extends Component {
           <TouchableOpacity
             disabled={(readOnlyHeadings && !showDropDowns) || item.disabled}
             onPress={this._dropDownOrToggle}
+            accessibilityState={{ selected: itemSelected }}
+            accessibilityRole={readOnlyHeadings ? 'header' : 'menuitem'}
             style={[
               {
                 flex: 1,
@@ -239,7 +243,7 @@ class RowItem extends Component {
                 paddingVertical: 6
               },
               mergedStyles.item,
-              this._itemSelected(item) && mergedStyles.selectedItem
+              itemSelected && mergedStyles.selectedItem
             ]}
           >
             {selectedIconOnLeft && this._renderSelectedIcon()}
@@ -280,9 +284,10 @@ class RowItem extends Component {
                 },
                 mergedStyles.toggleIcon
               ]}
+              accessibilityState={{ expanded: showSubCategoryDropDown }}
               onPress={this._toggleDropDown}
             >
-              {this._showSubCategoryDropDown() ? (
+              {showSubCategoryDropDown ? (
                 <View>
                   {callIfFunction(dropDownToggleIconUpComponent) || (
                     <Icon
@@ -308,7 +313,7 @@ class RowItem extends Component {
             </TouchableOpacity>
           )}
         </View>
-        {item[subKey] && this._showSubCategoryDropDown() && (
+        {item[subKey] && showSubCategoryDropDown && (
           <FlatList
             keyExtractor={(i) => `${i[uniqueKey]}`}
             data={item[subKey]}

diff --git a/lib/components/RowSubItem.js b/lib/components/RowSubItem.js
@@ -131,6 +131,8 @@ class RowSubItem extends Component {
         <TouchableOpacity
           disabled={highlightChild || subItem.disabled}
           onPress={this._toggleItem}
+          accessibilityState={{ selected: itemSelected }}
+          accessibilityRole="menuitem"
           style={[
             {
               flex: 1,

diff --git a/lib/sectioned-multi-select.js b/lib/sectioned-multi-select.js
@@ -1292,7 +1292,8 @@ class SectionedMultiSelect extends PureComponent {
           <TouchableWithoutFeedback
             onPress={this._toggleSelector}
             disabled={this.state.selector || disabled}
-          >
+            accessibilityRole="combobox"
+            >
             <View
               style={[
                 {