Merge pull request #21 from ui-ninja/a11y-ready

adding a11y properties

Author: ui-ninja

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>