feat: add accessibility support (#41)

* chore: added accessibility implementation on raw button

* docs: updated readme file

* chore: fixed a typo in the package.json

README.md

@@ -269,7 +269,8 @@ Originally `Animated TabBar` started with `Bubble` as the only animation preset
 
 ## To Do
 
-- [ ] Add accessibility support.
+- [x] Add accessibility support.
+- [ ] Add more presets (PR are welcome).
 
 <h2 id="built-with">Built With ❤️</h2>
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gorhom/animated-tabbar",
   "version": "1.4.0",
-  "description": "A 60FP animated tab bar with a variety of cool animation presets.",
+  "description": "A 60FPS animated tab bar with a variety of cool animation presets.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "types": "lib/typescript/index.d.ts",

src/bubble/BubbleTabBar.tsx

@@ -51,6 +51,7 @@ const BubbleTabBarComponent = ({
             key={key}
             index={index}
             selectedIndex={selectedIndex}
+            accessibilityLabel={title}
             onLongPress={onLongPress}
           >
             <BubbleTabBarItem

src/components/rawButton/RawButton.tsx

@@ -13,6 +13,7 @@ const { useCode, set, cond, onChange, eq } = Animated;
 interface RawButtonProps {
   index: number;
   selectedIndex: Animated.Value<number>;
+  accessibilityLabel: string;
   children: React.ReactNode[] | React.ReactNode;
   style?: StyleProp<Animated.AnimateStyle<ViewStyle>>;
   onLongPress: (index: number) => void;
@@ -21,11 +22,15 @@ interface RawButtonProps {
 const RawButton = ({
   index,
   selectedIndex,
+  accessibilityLabel,
   children,
   style,
   onLongPress,
 }: RawButtonProps) => {
+  // refs
+  const rootViewRef = useRef<Animated.View>(null);
   const longPressGestureHandlerRef = useRef<LongPressGestureHandler>(null);
+
   // tap gesture
   const tapGestureState = useValue(State.UNDETERMINED);
   const tapGestureHandler = useGestureHandler({ state: tapGestureState });
@@ -52,16 +57,33 @@ const RawButton = ({
           })
         )
       ),
+      onChange(
+        selectedIndex,
+        call([selectedIndex], args => {
+          // @ts-ignore
+          rootViewRef.current.setNativeProps({
+            accessibilityState: {
+              selected: args[0] === index,
+            },
+          });
+        })
+      ),
     ],
     [index]
   );
-
   return (
     <TapGestureHandler
       waitFor={longPressGestureHandlerRef}
       {...tapGestureHandler}
     >
-      <Animated.View style={style}>
+      <Animated.View
+        ref={rootViewRef}
+        accessible={true}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole="button"
+        accessibilityComponentType="button"
+        style={style}
+      >
         <LongPressGestureHandler
           ref={longPressGestureHandlerRef}
           {...longPressGestureHandler}

src/flashy/FlashyTabBar.tsx

@@ -57,6 +57,7 @@ const FlashyTabBarComponent = ({
             index={index}
             selectedIndex={selectedIndex}
             style={rawButtonStyle}
+            accessibilityLabel={title}
             onLongPress={onLongPress}
           >
             <FlashyTabBarItem