CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.10.0 - 2023-05-11
+
+### Fixed
+
+- Add Various Accessibility Properties #290
+  - adds rolls and accessibility states for selected state, expanded state
+- readme fixes #275, #287
+
 ## 0.9.1 - 2022-01-09
 
 ### Fixed

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]}

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,

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={[
                 {

package.json

@@ -1,46 +1,46 @@
-{
-  "name": "react-native-sectioned-multi-select",
-  "version": "0.9.1",
-  "description": "a multi (or single) select component with support for sub categories, search, chips.",
-  "main": "index.js",
-  "directories": {
-    "lib": "lib"
-  },
-  "scripts": {
-    "lint": "eslint ./lib/**/*.{js,jsx} --fix",
-    "format": "prettier ./lib/**/*.{js,jsx} --write && npm run lint --fix",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "dependencies": {
-    "lodash.isequal": "^4.5.0",
-    "memoize-one": "^6.0.0"
-  },
-  "devDependencies": {
-    "@react-native-community/eslint-config": "^3.0.1",
-    "eslint": "^7.32.0",
-    "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-react-native-a11y": "^3.0.0",
-    "prettier": "^2.5.1"
-  },
-  "peerDependencies": {
-    "prop-types": "^15.6.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/renrizzolo/react-native-sectioned-multi-select.git"
-  },
-  "keywords": [
-    "select",
-    "multiselect",
-    "picker",
-    "category",
-    "react",
-    "native"
-  ],
-  "author": "Ren Rizzolo",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/renrizzolo/react-native-sectioned-multi-select/issues"
-  },
-  "homepage": "https://github.com/renrizzolo/react-native-sectioned-multi-select#readme"
-}
+{
+  "name": "react-native-sectioned-multi-select",
+  "version": "0.10.0",
+  "description": "a multi (or single) select component with support for sub categories, search, chips.",
+  "main": "index.js",
+  "directories": {
+    "lib": "lib"
+  },
+  "scripts": {
+    "lint": "eslint ./lib/**/*.{js,jsx} --fix",
+    "format": "prettier ./lib/**/*.{js,jsx} --write && npm run lint --fix",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "lodash.isequal": "^4.5.0",
+    "memoize-one": "^6.0.0"
+  },
+  "devDependencies": {
+    "@react-native-community/eslint-config": "^3.0.1",
+    "eslint": "^7.32.0",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-react-native-a11y": "^3.0.0",
+    "prettier": "^2.5.1"
+  },
+  "peerDependencies": {
+    "prop-types": "^15.6.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/renrizzolo/react-native-sectioned-multi-select.git"
+  },
+  "keywords": [
+    "select",
+    "multiselect",
+    "picker",
+    "category",
+    "react",
+    "native"
+  ],
+  "author": "Ren Rizzolo",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/renrizzolo/react-native-sectioned-multi-select/issues"
+  },
+  "homepage": "https://github.com/renrizzolo/react-native-sectioned-multi-select#readme"
+}