Merge branch 'master' of https://github.com/ui-ninja/react-native-rating-element

Author: Rishabh

README.md

@@ -4,6 +4,7 @@
 
 A simple rating library for react native supporting:
 
+- **a11y ready** ⚛️
 - **decimal points** like 3.7, 4.2 etc,
 - **direction aware** icons (like you can pass direction as “column” or “row-reverse”),
 - **custom icon set** from Ionicons,

src/Rating/components/IconBar.js

@@ -25,9 +25,15 @@ const IconBar = ({
   selectedIconImage,
   emptyIconImage,
   filled = false,
+  totalCount,
+  isAccessible,
 }) => (
   <TouchableOpacity
     activeOpacity={1}
+    accessible={isAccessible}
+    importantForAccessibility={isAccessible ? "yes" : "no"}
+    accessibilityLabel={`Press to rate ${position + 1} out of ${totalCount}`}
+    accessibilityRole="button"
     onPress={() => {
       if (!readonly) {
         onIconTap && onIconTap(position + 1);
@@ -58,6 +64,7 @@ IconBar.propTypes = {
   type: PropTypes.oneOf(["icon", "custom"]),
   selectedIconImage: PropTypes.node,
   emptyIconImage: PropTypes.node,
+  totalCount: PropTypes.number,
 };
 
 export default IconBar;

src/Rating/index.js

@@ -46,10 +46,15 @@ const Rating = ({
   const percentage = (rated / totalCount) * 100;
 
   return (
-    <StyledView dir={direction}>
+    <StyledView
+      dir={direction}
+      accessible={!readonly}
+      importantForAccessibility={!readonly ? "yes" : "no"}
+    >
       <BackgroundIcons dir={direction}>
         {Array.from({ length: totalCount }, (_, i) => (
           <IconBar
+            isAccessible
             name={icon}
             key={`bgstar_${i}`}
             size={size}
@@ -61,6 +66,7 @@ const Rating = ({
             type={type}
             selectedIconImage={selectedIconImage}
             emptyIconImage={emptyIconImage}
+            totalCount={totalCount}
           />
         ))}
         <ColoredIcons percentage={percentage} dir={direction}>
@@ -78,6 +84,7 @@ const Rating = ({
               type={type}
               selectedIconImage={selectedIconImage}
               emptyIconImage={emptyIconImage}
+              totalCount={totalCount}
             />
           ))}
         </ColoredIcons>