From 54b9a321b938d4732f10cd69b499963354f59802 Mon Sep 17 00:00:00 2001
From: Cristiano Tofani <cri.tofani@gmail.com>
Date: Tue, 5 Dec 2023 11:24:22 +0100
Subject: [PATCH] accessibility implementation

---
 src/components/otpInput/OTPInput.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/otpInput/OTPInput.tsx b/src/components/otpInput/OTPInput.tsx
index ff158386..bf85d8f9 100644
--- a/src/components/otpInput/OTPInput.tsx
+++ b/src/components/otpInput/OTPInput.tsx
@@ -1,6 +1,11 @@
 import * as React from "react";
 import { useEffect, useState } from "react";
-import { Pressable, TextInput } from "react-native";
+import {
+  AccessibilityInfo,
+  Pressable,
+  TextInput,
+  findNodeHandle
+} from "react-native";
 import Animated from "react-native-reanimated";
 import { IOStyles } from "../../core/IOStyles";
 import { LabelSmall } from "../typography";
@@ -47,7 +52,7 @@ export const OTPInput = ({
 
   const { translate, animatedStyle, shakeAnimation } = useErrorShakeAnimation();
 
-  const inputRef = React.useRef<TextInput>(null);
+  const inputRef = React.createRef<TextInput>();
   const handleChange = (value: string) => {
     if (value.length > length) {
       return;
@@ -83,10 +88,16 @@ export const OTPInput = ({
       <Pressable
         onPress={() => {
           inputRef.current?.focus();
+          const reactElem = findNodeHandle(inputRef.current);
+          if (reactElem) {
+            AccessibilityInfo.setAccessibilityFocus(reactElem);
+          }
           setHasFocus(true);
         }}
         style={[IOStyles.row, { justifyContent: "space-around" }]}
-        accessible={false}
+        accessible={true}
+        accessibilityLabel="OTP Input"
+        accessibilityValue={{ text: inputValue }}
       >
         <TextInput
           value={inputValue}