replace deprecated focusable with tabIndex prop

Author: getusha

src/components/CheckboxWithLabel.js

@@ -107,7 +107,7 @@ function CheckboxWithLabel(props) {
                     accessibilityLabel={props.accessibilityLabel || props.label}
                 />
                 <PressableWithFeedback
-                    focusable={false}
+                    tabIndex={-1}
                     accessible={false}
                     onPress={toggleCheckbox}
                     pressDimmingValue={variables.checkboxLabelActiveOpacity}

src/components/NewDatePicker/CalendarPicker/index.js

@@ -210,7 +210,7 @@ class CalendarPicker extends React.PureComponent {
                                     onPress={() => this.onDayPressed(day)}
                                     style={styles.calendarDayRoot}
                                     accessibilityLabel={day ? day.toString() : undefined}
-                                    focusable={Boolean(day)}
+                                    tabIndex={Boolean(day) ? 0 : -1}
                                     accessible={Boolean(day)}
                                 >
                                     {({hovered, pressed}) => (

src/components/PDFView/index.js

@@ -232,7 +232,7 @@ class PDFView extends Component {
         return (
             <View style={outerContainerStyle}>
                 <View
-                    focusable
+                    tabIndex={0}
                     style={pdfContainerStyle}
                     onLayout={({
                         nativeEvent: {

src/components/Pressable/GenericPressable/index.js

@@ -10,7 +10,6 @@ const WebGenericPressable = forwardRef((props, ref) => (
         // change native accessibility props to web accessibility props
         tabIndex={!props.accessible || !props.focusable ? -1 : 0}
         role={props.accessibilityRole}
-        id={props.id}
         aria-label={props.accessibilityLabel}
         aria-labelledby={props.accessibilityLabelledBy}
         aria-valuenow={props.accessibilityValue}

src/components/Pressable/GenericPressable/index.native.js

@@ -4,7 +4,7 @@ import GenericPressablePropTypes from './PropTypes';
 
 const NativeGenericPressable = forwardRef((props, ref) => (
     <GenericPressable
-        focusable
+        tabIndex={0}
         accessible
         accessibilityHint={props.accessibilityHint || props.accessibilityLabel}
         // eslint-disable-next-line react/jsx-props-no-spreading

src/components/Pressable/PressableWithDelayToggle.js

@@ -109,7 +109,7 @@ function PressableWithDelayToggle(props) {
                     text={tooltipText}
                 >
                     <PressableWithoutFeedback
-                        focusable={false}
+                        tabIndex={-1}
                         accessible={false}
                         onPress={updatePressState}
                         style={[styles.flexRow, ...props.styles]}

src/components/RadioButtonWithLabel.js

@@ -59,7 +59,7 @@ function RadioButtonWithLabel(props) {
                     hasError={props.hasError}
                 />
                 <PressableWithFeedback
-                    focusable={false}
+                    tabIndex={-1}
                     accessible={false}
                     onPress={() => props.onPress()}
                     style={[styles.flexRow, styles.flexWrap, styles.flexShrink1, styles.alignItemsCenter]}

src/components/TextInput/BaseTextInput/index.js

@@ -246,7 +246,7 @@ function BaseTextInput(props) {
             <View style={styles.pointerEventsNone}>
                 <PressableWithoutFeedback
                     onPress={onPress}
-                    focusable={false}
+                    tabIndex={-1}
                     accessibilityLabel={props.label}
                     style={[
                         props.autoGrowHeight && styles.autoGrowHeightInputContainer(textInputHeight, variables.componentSizeLarge, maxHeight),

src/components/TextInput/BaseTextInput/index.native.js

@@ -247,7 +247,7 @@ function BaseTextInput(props) {
             <View style={styles.pointerEventsNone}>
                 <PressableWithoutFeedback
                     onPress={onPress}
-                    focusable={false}
+                    tabIndex={-1}
                     accessibilityLabel={props.label}
                     style={[
                         props.autoGrowHeight && styles.autoGrowHeightInputContainer(textInputHeight, variables.componentSizeLarge, maxHeight),