diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index e553126ee..443ba9fc8 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -1032,4 +1032,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 45955b00d9fe695cf6b62c8d0070f63a38904a50
 
-COCOAPODS: 1.11.3
+COCOAPODS: 1.13.0
diff --git a/src/assets/images/eye.png b/src/assets/images/eye.png
new file mode 100644
index 000000000..c5b58c00a
Binary files /dev/null and b/src/assets/images/eye.png differ
diff --git a/src/assets/images/eyeOff.png b/src/assets/images/eyeOff.png
new file mode 100644
index 000000000..62dc80a99
Binary files /dev/null and b/src/assets/images/eyeOff.png differ
diff --git a/src/components/BottomSheet/BottomSheetHeader.js b/src/components/BottomSheet/BottomSheetHeader.js
index 5ef05c2f0..4f67d60c5 100644
--- a/src/components/BottomSheet/BottomSheetHeader.js
+++ b/src/components/BottomSheet/BottomSheetHeader.js
@@ -47,7 +47,7 @@ const BottomSheetModalHeader = ({ title, closeModal, colors }) => {
 
   return (
     <View style={styles.headerContainer}>
-      <Text md bold color={colors.textDark} style={styles.headerTitle}>
+      <Text accessible={true} md bold color={colors.textDark} style={styles.headerTitle}>
         {title}
       </Text>
       <Pressable style={styles.closeButton} onPress={closeModal}>
diff --git a/src/components/ConversationActionItem.js b/src/components/ConversationActionItem.js
index 3bc353b2a..d60e66c3d 100644
--- a/src/components/ConversationActionItem.js
+++ b/src/components/ConversationActionItem.js
@@ -81,7 +81,7 @@ const ConversationActionItem = ({
         }}>
         <View style={styles.sectionTitleView}>
           <Icon icon={iconName} color={colors.textDark} size={16} />
-          <Text sm medium color={colors.textDark} style={styles.sectionTitle}>
+          <Text accessible={true} sm medium color={colors.textDark} style={styles.sectionTitle}>
             {text}
           </Text>
         </View>
@@ -89,7 +89,12 @@ const ConversationActionItem = ({
           {shouldShowUserAvatar && (
             <UserAvatar thumbnail={thumbnail} userName={name} size={18} fontSize={8} />
           )}
-          <Text sm medium color={colors.textLight} style={styles.sectionActiveTitle}>
+          <Text
+            accessible={true}
+            sm
+            medium
+            color={colors.textLight}
+            style={styles.sectionActiveTitle}>
             {name}
           </Text>
           {(itemType === 'assignee' || itemType === 'team' || itemType === 'snooze') && (
diff --git a/src/components/ConversationAgentItem.js b/src/components/ConversationAgentItem.js
index c3ce831ed..28a40a9cd 100644
--- a/src/components/ConversationAgentItem.js
+++ b/src/components/ConversationAgentItem.js
@@ -131,7 +131,7 @@ const ConversationAgentItem = ({ colors, title, agentsList, activeValue, onClick
 
         <View style={styles.bottomSheetItemView}>
           {filteredAgentsOnSearch.length !== 0 && (
-            <Text sm medium color={colors.textDark} style={styles.itemText}>
+            <Text accessible={true} sm medium color={colors.textDark} style={styles.itemText}>
               {title}
             </Text>
           )}
@@ -151,7 +151,7 @@ const ConversationAgentItem = ({ colors, title, agentsList, activeValue, onClick
                   fontSize={12}
                   availabilityStatus={item.availability_status}
                 />
-                <Text sm medium color={colors.text} style={styles.agentName}>
+                <Text accessible={true} sm medium color={colors.text} style={styles.agentName}>
                   {`${item.name}`}
                 </Text>
               </View>
@@ -164,7 +164,7 @@ const ConversationAgentItem = ({ colors, title, agentsList, activeValue, onClick
           ))}
           {filteredAgentsOnSearch && filteredAgentsOnSearch.length === 0 && (
             <View style={styles.emptyView}>
-              <Text sm medium color={colors.textDark}>
+              <Text accessible={true} sm medium color={colors.textDark}>
                 {i18n.t('CONVERSATION_AGENTS.NO_RESULT')}
               </Text>
             </View>
diff --git a/src/components/ConversationDetailsItem.js b/src/components/ConversationDetailsItem.js
index 37537c831..8d8b1a1e0 100644
--- a/src/components/ConversationDetailsItem.js
+++ b/src/components/ConversationDetailsItem.js
@@ -34,17 +34,21 @@ const ConversationDetailsItem = ({ value, title, type }) => {
     <React.Fragment>
       <View key={type}>
         <View style={styles.itemTitleView}>
-          <Text medium sm color={colors.textDark}>
+          <Text accessible={true} medium sm color={colors.textDark}>
             {title}
           </Text>
         </View>
         <View>
           {link ? (
-            <Text sm color={colors.primaryColor} onPress={() => openURL({ URL: value })}>
+            <Text
+              accessible={true}
+              sm
+              color={colors.primaryColor}
+              onPress={() => openURL({ URL: value })}>
               {value}
             </Text>
           ) : (
-            <Text sm color={colors.textDark}>
+            <Text accessible={true} sm color={colors.textDark}>
               {value}
             </Text>
           )}
diff --git a/src/components/Empty/Empty.js b/src/components/Empty/Empty.js
index 41da73270..c82f5e119 100644
--- a/src/components/Empty/Empty.js
+++ b/src/components/Empty/Empty.js
@@ -55,14 +55,19 @@ const Empty = ({ image, title, subTitle }) => {
       </View>
       {title && (
         <View style={styles.titleView}>
-          <Text sm medium color={colors.textDark} style={styles.titleText}>
+          <Text accessible={true} sm medium color={colors.textDark} style={styles.titleText}>
             {title}
           </Text>
         </View>
       )}
       {subTitle && (
         <View style={styles.titleView}>
-          <Text sm appearance="hint" color={colors.textLight} style={styles.subTitleText}>
+          <Text
+            accessible={true}
+            sm
+            appearance="hint"
+            color={colors.textLight}
+            style={styles.subTitleText}>
             {subTitle}
           </Text>
         </View>
diff --git a/src/components/FilterButton/ClearFilterButton.js b/src/components/FilterButton/ClearFilterButton.js
index c211e4fcb..a080dd6c7 100644
--- a/src/components/FilterButton/ClearFilterButton.js
+++ b/src/components/FilterButton/ClearFilterButton.js
@@ -52,7 +52,7 @@ const Dropdown = ({ onSelectItem, count }) => {
         <Icon color={colors.textDark} icon="filter-dismiss-outline" size={16} />
       </View>
       <View style={styles.dropdownCountWrapper}>
-        <Text xs bold color={colors.dangerColor}>
+        <Text accessible={true} xs bold color={colors.dangerColor}>
           {getTextSubstringWithEllipsis(count, 20)}
         </Text>
       </View>
diff --git a/src/components/FilterButton/FilterButton.js b/src/components/FilterButton/FilterButton.js
index 82d80e7d1..16e19d039 100644
--- a/src/components/FilterButton/FilterButton.js
+++ b/src/components/FilterButton/FilterButton.js
@@ -57,7 +57,7 @@ const FilterButton = ({ label, onPress, isActive, hasLeftIcon, leftIconName }) =
           <Icon color={colors.textLight} icon={leftIconName} size={14} />
         </View>
       )}
-      <Text sm medium color={colors.text}>
+      <Text accessible={true} sm medium color={colors.text}>
         {getTextSubstringWithEllipsis(label, 20)}
       </Text>
       <View style={styles.arrowDownIcon}>
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 940d6f9f6..f5ddff4a4 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -116,12 +116,12 @@ const Header = ({
               style={styles.headerLoader}
             />
           ) : null}
-          <Text xl bold color={colors.textDark}>
+          <Text accessible={true} xl bold color={colors.textDark}>
             {headerText}
           </Text>
           {showCount && !loading && count !== 0 && (
             <View style={styles.headerCountView}>
-              <Text xs medium color={colors.textDark} style={styles.headerCount}>
+              <Text accessible={true} xs medium color={colors.textDark} style={styles.headerCount}>
                 {`(${count})`}
               </Text>
             </View>
diff --git a/src/components/InboxName/InboxName.js b/src/components/InboxName/InboxName.js
index 3c6647b57..a20ee5030 100644
--- a/src/components/InboxName/InboxName.js
+++ b/src/components/InboxName/InboxName.js
@@ -37,7 +37,7 @@ const InboxName = ({ inboxName, phoneNumber, channelType }) => {
       <View style={styles.inboxDetails}>
         {iconName ? <Icon color={colors.textLight} size={10} icon={iconName} /> : null}
         {inboxName ? (
-          <Text xs medium color={colors.textLight} style={styles.channelText}>
+          <Text accessible={true} xs medium color={colors.textLight} style={styles.channelText}>
             {getTextSubstringWithEllipsis(inboxName, 26)}
           </Text>
         ) : null}
diff --git a/src/components/LabelBox.js b/src/components/LabelBox.js
index e93643aa7..1ce862fe7 100644
--- a/src/components/LabelBox.js
+++ b/src/components/LabelBox.js
@@ -54,7 +54,7 @@ const LabelBox = ({ id, title, color, onClickRemoveLabel }) => {
       <View>
         <View style={styles.labelView} key={id}>
           <View style={[getLabelColor(color)]} />
-          <Text xs medium color={colors.textDark} style={styles.label}>
+          <Text accessible={true} xs medium color={colors.textDark} style={styles.label}>
             {title}
           </Text>
           <Pressable style={styles.labelCloseIcon} onPress={() => onClickRemoveLabel()}>
diff --git a/src/components/Modal/ModalView.js b/src/components/Modal/ModalView.js
index 24d50e724..77bffc456 100644
--- a/src/components/Modal/ModalView.js
+++ b/src/components/Modal/ModalView.js
@@ -69,15 +69,15 @@ const ModalView = ({ showModal, headerText, contentText, buttonText, onPressClos
     <NativeModal visible={showModal} animationType="fade" transparent={true}>
       <View style={styles.modalViewWrap}>
         <View style={styles.modalView}>
-          <Text md bold color={colors.textDark}>
+          <Text accessible={true} md bold color={colors.textDark}>
             {headerText}
           </Text>
-          <Text sm color={colors.textDark} style={styles.modalText}>
+          <Text accessible={true} sm color={colors.textDark} style={styles.modalText}>
             {contentText}
           </Text>
           <View style={styles.modalButtonView}>
             <Pressable style={styles.modalButton} onPress={onPressClose}>
-              <Text sm color={colors.colorWhite} style={styles.modalButtonText}>
+              <Text accessible={true} sm color={colors.colorWhite} style={styles.modalButtonText}>
                 {buttonText}
               </Text>
             </Pressable>
diff --git a/src/components/NotificationActionItem.js b/src/components/NotificationActionItem.js
index 187df08d8..5474eeae1 100644
--- a/src/components/NotificationActionItem.js
+++ b/src/components/NotificationActionItem.js
@@ -44,7 +44,7 @@ const NotificationActionItem = ({ text, iconName, itemType, onPressItem }) => {
       <Pressable style={styles.section} onPress={() => onPressItem({ itemType })}>
         <View style={styles.sectionTitleView}>
           <Icon icon={iconName} color={colors.primaryColor} size={22} style={styles.iconWrapper} />
-          <Text sm medium color={colors.text} style={styles.sectionText}>
+          <Text accessible={true} sm medium color={colors.text} style={styles.sectionText}>
             {text}
           </Text>
         </View>
diff --git a/src/components/NotificationItem.js b/src/components/NotificationItem.js
index 16a7f09d1..71505682c 100644
--- a/src/components/NotificationItem.js
+++ b/src/components/NotificationItem.js
@@ -48,15 +48,15 @@ const NotificationItemComponent = ({ item, onSelectNotification }) => {
         )}
         <View style={styles.contentView}>
           {!read_at ? (
-            <Text xs medium color={colors.textDark} style={styles.content}>
+            <Text accessible={true} xs medium color={colors.textDark} style={styles.content}>
               {push_message_title}
             </Text>
           ) : (
-            <Text xs color={colors.textDark} style={styles.content}>
+            <Text accessible={true} xs color={colors.textDark} style={styles.content}>
               {push_message_title}
             </Text>
           )}
-          <Text xxs color={colors.textLighter}>
+          <Text accessible={true} xxs color={colors.textLighter}>
             {`${timeAgo({ time: created_at })}`}
           </Text>
         </View>
diff --git a/src/components/Text/Text.spec.js b/src/components/Text/Text.spec.js
index 41faea75e..8efa33b72 100644
--- a/src/components/Text/Text.spec.js
+++ b/src/components/Text/Text.spec.js
@@ -9,23 +9,43 @@ describe('Text', () => {
     expect(screen.getByText('Test')).toBeTruthy();
   });
   it('should render the text with bold', () => {
-    render(<Text bold>Test</Text>);
+    render(
+      <Text accessible={true} bold>
+        Test
+      </Text>,
+    );
     expect(screen.getByText('Test')).toHaveStyle({ fontWeight: 'bold' });
   });
   it('should render the text with color', () => {
-    render(<Text color="red">Test</Text>);
+    render(
+      <Text accessible={true} color="red">
+        Test
+      </Text>,
+    );
     expect(screen.getByText('Test')).toHaveStyle({ color: 'red' });
   });
   it('should render the text with xxs', () => {
-    render(<Text xxs>Test</Text>);
+    render(
+      <Text accessible={true} xxs>
+        Test
+      </Text>,
+    );
     expect(screen.getByText('Test')).toHaveStyle({ fontSize: 10 });
   });
   it('should render the capitalize text', () => {
-    render(<Text capitalize>Test</Text>);
+    render(
+      <Text accessible={true} capitalize>
+        Test
+      </Text>,
+    );
     expect(screen.getByText('Test')).toHaveStyle({ textTransform: 'capitalize' });
   });
   it('should render the text if custom style is passed', () => {
-    render(<Text style={{ lineHeight: 20 }}>Test</Text>);
+    render(
+      <Text accessible={true} style={{ lineHeight: 20 }}>
+        Test
+      </Text>,
+    );
     expect(screen.getByText('Test')).toHaveStyle({ lineHeight: 20 });
   });
 });
diff --git a/src/components/Text/Text.stories.js b/src/components/Text/Text.stories.js
index ff026ebc1..312196d84 100644
--- a/src/components/Text/Text.stories.js
+++ b/src/components/Text/Text.stories.js
@@ -8,26 +8,60 @@ storiesOf('Text', module)
   .addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
   .add('with font size', () => (
     <View>
-      <Text xxs>xxs</Text>
-      <Text xs>xs</Text>
-      <Text sm>sm</Text>
-      <Text md>md</Text>
-      <Text lg>lg</Text>
-      <Text xl>xl</Text>
-      <Text xxl>xxl</Text>
-      <Text xxxl>xxxl</Text>
+      <Text accessible={true} xxs>
+        xxs
+      </Text>
+      <Text accessible={true} xs>
+        xs
+      </Text>
+      <Text accessible={true} sm>
+        sm
+      </Text>
+      <Text accessible={true} md>
+        md
+      </Text>
+      <Text accessible={true} lg>
+        lg
+      </Text>
+      <Text accessible={true} xl>
+        xl
+      </Text>
+      <Text accessible={true} xxl>
+        xxl
+      </Text>
+      <Text accessible={true} xxxl>
+        xxxl
+      </Text>
     </View>
   ))
   .add('with font weight', () => (
     <View>
-      <Text thin>thin</Text>
-      <Text ultraLight>ultraLight</Text>
-      <Text light>light</Text>
-      <Text regular>regular</Text>
-      <Text medium>medium</Text>
-      <Text semiBold>semiBold</Text>
-      <Text bold>bold</Text>
-      <Text heavy>heavy</Text>
-      <Text normal>normal</Text>
+      <Text accessible={true} thin>
+        thin
+      </Text>
+      <Text accessible={true} ultraLight>
+        ultraLight
+      </Text>
+      <Text accessible={true} light>
+        light
+      </Text>
+      <Text accessible={true} regular>
+        regular
+      </Text>
+      <Text accessible={true} medium>
+        medium
+      </Text>
+      <Text accessible={true} semiBold>
+        semiBold
+      </Text>
+      <Text accessible={true} bold>
+        bold
+      </Text>
+      <Text accessible={true} heavy>
+        heavy
+      </Text>
+      <Text accessible={true} normal>
+        normal
+      </Text>
     </View>
   ));
diff --git a/src/components/TextInput.js b/src/components/TextInput.js
index 9fa36a1fb..77d865a83 100644
--- a/src/components/TextInput.js
+++ b/src/components/TextInput.js
@@ -59,7 +59,7 @@ const TextInputField = ({ onChangeText, error, keyboardType, secureTextEntry, la
 
   return (
     <View>
-      <Text sm medium color={colors.textDark} style={styles.label}>
+      <Text accessible={true} sm medium color={colors.textDark} style={styles.label}>
         {label}
       </Text>
       <TextInput
@@ -72,7 +72,7 @@ const TextInputField = ({ onChangeText, error, keyboardType, secureTextEntry, la
         autoCapitalize="none"
       />
       {error && (
-        <Text sm color={colors.dangerColor} style={styles.errorLabel}>
+        <Text accessible={true} sm color={colors.dangerColor} style={styles.errorLabel}>
           {error.message}
         </Text>
       )}
diff --git a/src/components/UserAvatar/UserAvatar.js b/src/components/UserAvatar/UserAvatar.js
index 1cedf1c9a..b32b199f4 100644
--- a/src/components/UserAvatar/UserAvatar.js
+++ b/src/components/UserAvatar/UserAvatar.js
@@ -165,7 +165,11 @@ const UserAvatar = ({
             borderRadius: size,
           },
         ]}>
-        <Text medium color={colors.primaryColorDark} style={{ fontSize: fontSize }}>
+        <Text
+          accessible={true}
+          medium
+          color={colors.primaryColorDark}
+          style={{ fontSize: fontSize }}>
           {getUserInitial({ userName })}
         </Text>
       </LinearGradient>
diff --git a/src/components/UserAvatar/UserAvatarGroup.js b/src/components/UserAvatar/UserAvatarGroup.js
index 2ce0b3d5a..bd7a00905 100644
--- a/src/components/UserAvatar/UserAvatarGroup.js
+++ b/src/components/UserAvatar/UserAvatarGroup.js
@@ -32,7 +32,9 @@ const UserAvatarGroup = ({ users, size, showMoreText, moreText, length, fontSize
     const count = users.length - length;
     return (
       <View style={[styles.countContainer, styles.bubbleBorder, { height: size + 1 }]}>
-        <Text style={[styles.countText, { fontSize }]}>{`+${count} ${moreText || ''}`}</Text>
+        <Text accessible={true} style={[styles.countText, { fontSize }]}>{`+${count} ${
+          moreText || ''
+        }`}</Text>
       </View>
     );
   };
diff --git a/src/constants/images.js b/src/constants/images.js
index 09619ca53..d87e290f7 100644
--- a/src/constants/images.js
+++ b/src/constants/images.js
@@ -14,6 +14,8 @@ const forgotPassword = require('../assets/images/forgotPassword.png');
 const emptyConversations = require('../assets/images/emptyConversations.png');
 const URL = require('../assets/images/url.png');
 const login = require('../assets/images/login.png');
+const eye = require('../assets/images/eye.png');
+const eyeOff = require('../assets/images/eyeOff.png');
 
 export default {
   appLogo,
@@ -32,4 +34,6 @@ export default {
   emptyConversations,
   URL,
   login,
+  eye,
+  eyeOff,
 };
diff --git a/src/screens/ChatScreen/components/AttachmentActionItem.js b/src/screens/ChatScreen/components/AttachmentActionItem.js
index 7660708ee..8813bfb25 100644
--- a/src/screens/ChatScreen/components/AttachmentActionItem.js
+++ b/src/screens/ChatScreen/components/AttachmentActionItem.js
@@ -40,7 +40,7 @@ const AttachmentActionItem = ({ text, itemType, iconName, onPressItem }) => {
     <React.Fragment>
       <Pressable style={styles.section} onPress={() => onPressItem({ itemType })}>
         <Icon icon={iconName} color={colors.primaryColor} size={22} />
-        <Text sm medium color={colors.textDark} style={styles.sectionText}>
+        <Text accessible={true} sm medium color={colors.textDark} style={styles.sectionText}>
           {text}
         </Text>
       </Pressable>
diff --git a/src/screens/ChatScreen/components/AttachmentPreview.js b/src/screens/ChatScreen/components/AttachmentPreview.js
index e6fbd7bb0..3ac9afc6f 100644
--- a/src/screens/ChatScreen/components/AttachmentPreview.js
+++ b/src/screens/ChatScreen/components/AttachmentPreview.js
@@ -56,10 +56,10 @@ const AttachmentPreview = ({ attachmentDetails, onRemoveAttachment }) => {
       ) : (
         <Icon icon="file-filled" style={styles.sendButton} color={colors.textLight} size={20} />
       )}
-      <Text sm medium color={colors.textDark} style={styles.name}>
+      <Text accessible={true} sm medium color={colors.textDark} style={styles.name}>
         {fileName.length < 36 ? `${fileName}` : `...${fileName.substr(fileName.length - 15)}`}
       </Text>
-      <Text sm medium color={colors.textDark} style={styles.name}>
+      <Text accessible={true} sm medium color={colors.textDark} style={styles.name}>
         {formattedFileSize}
       </Text>
       <Pressable onPress={onRemoveAttachment}>
diff --git a/src/screens/ChatScreen/components/Banner.js b/src/screens/ChatScreen/components/Banner.js
index c6aed8141..00a56b318 100644
--- a/src/screens/ChatScreen/components/Banner.js
+++ b/src/screens/ChatScreen/components/Banner.js
@@ -96,7 +96,7 @@ const BannerComponent = ({
       <Pressable style={[styles.bannerWrapper, bannerColor()]}>
         <View style={styles.bannerWrap}>
           <View>
-            <Text xs medium color={bannerTextColor()} style={styles.bannerText}>
+            <Text accessible={true} xs medium color={bannerTextColor()} style={styles.bannerText}>
               {text}
               {hrefText && hrefLink ? (
                 <Text
diff --git a/src/screens/ChatScreen/components/CannedResponses.js b/src/screens/ChatScreen/components/CannedResponses.js
index cf6a487dd..094be3135 100644
--- a/src/screens/ChatScreen/components/CannedResponses.js
+++ b/src/screens/ChatScreen/components/CannedResponses.js
@@ -59,9 +59,9 @@ const CannedResponseComponent = ({ shortCode, content, lastItem, onClick }) => {
     <Pressable
       style={[styles.itemView, !lastItem && styles.lastItemView]}
       onPress={() => onClick(content)}>
-      <Text semiBold sm color={colors.primaryColorDark} style={styles.content}>
+      <Text accessible={true} semiBold sm color={colors.primaryColorDark} style={styles.content}>
         {`${shortCode} - `}
-        <Text regular sm color={colors.textDark} style={styles.content}>
+        <Text accessible={true} regular sm color={colors.textDark} style={styles.content}>
           {content}
         </Text>
       </Text>
diff --git a/src/screens/ChatScreen/components/ChatAttachmentItem.js b/src/screens/ChatScreen/components/ChatAttachmentItem.js
index c9a2881c1..7579f6424 100644
--- a/src/screens/ChatScreen/components/ChatAttachmentItem.js
+++ b/src/screens/ChatScreen/components/ChatAttachmentItem.js
@@ -214,7 +214,11 @@ const ChatAttachmentItemComponent = ({ type, attachments, showAttachment, messag
                       {fileNameToDisplay}
                     </Text>
                     <Pressable onPress={() => showAttachment({ type: 'file', dataUrl })}>
-                      <Text xs color={attachmentDownloadTextColor()} style={styles.downloadText}>
+                      <Text
+                        accessible={true}
+                        xs
+                        color={attachmentDownloadTextColor()}
+                        style={styles.downloadText}>
                         {i18n.t('CONVERSATION.DOWNLOAD')}
                       </Text>
                     </Pressable>
diff --git a/src/screens/ChatScreen/components/ChatHeader.js b/src/screens/ChatScreen/components/ChatHeader.js
index 856f5b061..4de0176f2 100644
--- a/src/screens/ChatScreen/components/ChatHeader.js
+++ b/src/screens/ChatScreen/components/ChatHeader.js
@@ -381,7 +381,7 @@ const ChatHeader = ({
             <View style={styles.titleView}>
               <View style={styles.customerName}>
                 {customerDetails.name && (
-                  <Text md medium color={colors.textDark}>
+                  <Text accessible={true} md medium color={colors.textDark}>
                     {getTextSubstringWithEllipsis(customerDetails.name, 13)}
                   </Text>
                 )}
diff --git a/src/screens/ChatScreen/components/ChatMessage.js b/src/screens/ChatScreen/components/ChatMessage.js
index ee7cc7330..d92252a15 100644
--- a/src/screens/ChatScreen/components/ChatMessage.js
+++ b/src/screens/ChatScreen/components/ChatMessage.js
@@ -73,12 +73,12 @@ const ActivityMessageComponent = ({ message, created_at }) => {
   return (
     <View style={styles.activityView}>
       <View style={styles.messageActivity}>
-        <Text sm color={colors.textDarker}>
+        <Text accessible={true} sm color={colors.textDarker}>
           {message.content}
         </Text>
       </View>
       <View style={styles.activityDateView}>
-        <Text xxs color={colors.text} style={styles.date}>
+        <Text accessible={true} xxs color={colors.text} style={styles.date}>
           {messageStamp({ time: created_at })}
         </Text>
       </View>
diff --git a/src/screens/ChatScreen/components/ChatMessageActionItem.js b/src/screens/ChatScreen/components/ChatMessageActionItem.js
index 585c6ae07..2e00f0644 100644
--- a/src/screens/ChatScreen/components/ChatMessageActionItem.js
+++ b/src/screens/ChatScreen/components/ChatMessageActionItem.js
@@ -46,7 +46,7 @@ const ChatMessageActionItem = ({ text, itemType, onPressItem }) => {
           </View>
         )}
         <View>
-          <Text sm medium color={colors.textDark}>
+          <Text accessible={true} sm medium color={colors.textDark}>
             {text}
           </Text>
         </View>
diff --git a/src/screens/ChatScreen/components/ChatMessageDate.js b/src/screens/ChatScreen/components/ChatMessageDate.js
index 9f49826ff..0dab91dd6 100644
--- a/src/screens/ChatScreen/components/ChatMessageDate.js
+++ b/src/screens/ChatScreen/components/ChatMessageDate.js
@@ -31,7 +31,7 @@ const ChatMessageDateComponent = ({ date }) => {
   return (
     <View style={styles.mainView}>
       <View style={styles.dateView}>
-        <Text xs medium color={colors.textDark}>
+        <Text accessible={true} xs medium color={colors.textDark}>
           {date}
         </Text>
       </View>
diff --git a/src/screens/ChatScreen/components/ChatMessageItem.js b/src/screens/ChatScreen/components/ChatMessageItem.js
index f276ffc01..d20df17dd 100644
--- a/src/screens/ChatScreen/components/ChatMessageItem.js
+++ b/src/screens/ChatScreen/components/ChatMessageItem.js
@@ -234,7 +234,7 @@ const ChatMessageItemComponent = ({ conversation, type, message, created_at, sho
               defaultBGColor={colors.primaryColor}
               size={14}
             />
-            <Text xs color={colors.primaryColor} style={styles.senderScreenName}>
+            <Text accessible={true} xs color={colors.primaryColor} style={styles.senderScreenName}>
               {senderName}
             </Text>
           </View>
@@ -368,9 +368,9 @@ const ChatMessageItemComponent = ({ conversation, type, message, created_at, sho
     .map(({ key, value, title }) =>
       value ? (
         <View style={styles.emailFields} key={key}>
-          <Text xs semiBold color={emailHeadLabelColor}>
+          <Text accessible={true} xs semiBold color={emailHeadLabelColor}>
             {title}
-            <Text xs regular color={emailHeadTextColor}>
+            <Text accessible={true} xs regular color={emailHeadTextColor}>
               {value}
             </Text>
           </Text>
@@ -459,7 +459,7 @@ const ChatMessageItemComponent = ({ conversation, type, message, created_at, sho
         />
 
         <View style={styles.dateView}>
-          <Text xxs color={dateStyleColor()} style={styles.dateTextView}>
+          <Text accessible={true} xxs color={dateStyleColor()} style={styles.dateTextView}>
             {readableTime}
           </Text>
           {isPrivate && (
diff --git a/src/screens/ChatScreen/components/ConversationLabels.js b/src/screens/ChatScreen/components/ConversationLabels.js
index 38911d635..609929f24 100644
--- a/src/screens/ChatScreen/components/ConversationLabels.js
+++ b/src/screens/ChatScreen/components/ConversationLabels.js
@@ -203,7 +203,7 @@ const ConversationLabels = ({ colors, conversationDetails }) => {
         </View>
         {conversationSavedLabels && activeLabels && (
           <View style={styles.selectedView}>
-            <Text sm medium color={colors.textDark} style={styles.itemText}>
+            <Text accessible={true} sm medium color={colors.textDark} style={styles.itemText}>
               {i18n.t('CONVERSATION_LABELS.SELECTED')}
             </Text>
             {activeLabels.map(item => (
@@ -220,7 +220,7 @@ const ConversationLabels = ({ colors, conversationDetails }) => {
                       styles.labelColorDisplay,
                     ]}
                   />
-                  <Text sm medium color={colors.primaryColor}>
+                  <Text accessible={true} sm medium color={colors.primaryColor}>
                     {`${item.title}`}
                   </Text>
                 </View>
@@ -233,7 +233,7 @@ const ConversationLabels = ({ colors, conversationDetails }) => {
             {activeLabels.length === 0 && (
               <Pressable style={styles.bottomSheetItem}>
                 <View>
-                  <Text sm color={colors.textDark}>
+                  <Text accessible={true} sm color={colors.textDark}>
                     {i18n.t('CONVERSATION_LABELS.NOT_SELECTED')}
                   </Text>
                 </View>
@@ -256,7 +256,7 @@ const ConversationLabels = ({ colors, conversationDetails }) => {
                     styles.labelColorDisplay,
                   ]}
                 />
-                <Text sm medium color={colors.primaryColor}>
+                <Text accessible={true} sm medium color={colors.primaryColor}>
                   {`${item.title}`}
                 </Text>
               </View>
@@ -267,7 +267,7 @@ const ConversationLabels = ({ colors, conversationDetails }) => {
           ))}
         {filteredLabelsOnSearch && filteredLabelsOnSearch.length === 0 && (
           <View style={styles.emptyView}>
-            <Text sm medium color={colors.textDark}>
+            <Text accessible={true} sm medium color={colors.textDark}>
               {i18n.t('CONVERSATION_LABELS.NO_RESULT')}
             </Text>
           </View>
diff --git a/src/screens/ChatScreen/components/ConversationPriority.js b/src/screens/ChatScreen/components/ConversationPriority.js
index 063e91961..1c1b3fe16 100644
--- a/src/screens/ChatScreen/components/ConversationPriority.js
+++ b/src/screens/ChatScreen/components/ConversationPriority.js
@@ -117,7 +117,7 @@ const SnoozeConversation = ({ colors, conversationId, activePriority, closeModal
             onPress={() => changePriority(item.id)}>
             <View style={styles.itemView}>
               <SvgXml xml={item.icon} width={22} height={22} />
-              <Text sm medium color={colors.textDark} style={styles.itemText}>
+              <Text accessible={true} sm medium color={colors.textDark} style={styles.itemText}>
                 {item.name}
               </Text>
             </View>
diff --git a/src/screens/ChatScreen/components/ConversationTeams.js b/src/screens/ChatScreen/components/ConversationTeams.js
index fa29eacfc..b9b4c325b 100644
--- a/src/screens/ChatScreen/components/ConversationTeams.js
+++ b/src/screens/ChatScreen/components/ConversationTeams.js
@@ -170,7 +170,7 @@ const ConversationTeams = ({ colors, conversationDetails, closeModal }) => {
 
         <View style={styles.bottomSheetItemView}>
           {filteredTeamsOnSearch.length !== 0 && (
-            <Text sm medium color={colors.textDark} style={styles.itemText}>
+            <Text accessible={true} sm medium color={colors.textDark} style={styles.itemText}>
               {i18n.t('CONVERSATION_TEAMS.SELECT_TEAM')}
             </Text>
           )}
@@ -184,7 +184,7 @@ const ConversationTeams = ({ colors, conversationDetails, closeModal }) => {
               onPress={() => onClickAssignTeam(item.id)}>
               <View style={styles.teamDetails}>
                 <UserAvatar userName={item.name} size={24} fontSize={12} />
-                <Text sm medium color={colors.text} style={styles.teamName}>
+                <Text accessible={true} sm medium color={colors.text} style={styles.teamName}>
                   {`${item.name}`}
                 </Text>
               </View>
@@ -197,7 +197,7 @@ const ConversationTeams = ({ colors, conversationDetails, closeModal }) => {
           ))}
           {filteredTeamsOnSearch && filteredTeamsOnSearch.length === 0 && (
             <View style={styles.emptyView}>
-              <Text sm medium color={colors.textDark}>
+              <Text accessible={true} sm medium color={colors.textDark}>
                 {i18n.t('CONVERSATION_TEAMS.NO_RESULT')}
               </Text>
             </View>
diff --git a/src/screens/ChatScreen/components/MentionUser.js b/src/screens/ChatScreen/components/MentionUser.js
index ccd22cb13..d9e5deee6 100644
--- a/src/screens/ChatScreen/components/MentionUser.js
+++ b/src/screens/ChatScreen/components/MentionUser.js
@@ -43,10 +43,10 @@ const MentionUserComponent = ({
         fontSize={12}
         availabilityStatus={availabilityStatus}
       />
-      <Text sm semiBold color={colors.primaryColorDark} style={styles.name}>
+      <Text accessible={true} sm semiBold color={colors.primaryColorDark} style={styles.name}>
         {`${name} - `}
       </Text>
-      <Text sm color={colors.textDark} style={styles.subHeaderTitle}>
+      <Text accessible={true} sm color={colors.textDark} style={styles.subHeaderTitle}>
         {email}
       </Text>
     </Pressable>
diff --git a/src/screens/ChatScreen/components/ReplyBox.js b/src/screens/ChatScreen/components/ReplyBox.js
index 7750c2b45..2d49632ae 100644
--- a/src/screens/ChatScreen/components/ReplyBox.js
+++ b/src/screens/ChatScreen/components/ReplyBox.js
@@ -283,7 +283,7 @@ const ReplyBox = ({ conversationId, inboxId, conversationDetails, enableReplyBut
         {isAnEmailChannelAndNotInPrivateNote() && emailFields && (
           <View style={styles.emailFields}>
             <View style={styles.emailFieldsTextWrap}>
-              <Text medium sm color={colors.text} style={styles.emailFieldLabel}>
+              <Text accessible={true} medium sm color={colors.text} style={styles.emailFieldLabel}>
                 {'Cc'}
               </Text>
               <TextInput
@@ -295,7 +295,7 @@ const ReplyBox = ({ conversationId, inboxId, conversationDetails, enableReplyBut
               />
             </View>
             <View style={styles.emailFieldsTextWrap}>
-              <Text medium sm color={colors.text} style={styles.emailFieldLabel}>
+              <Text accessible={true} medium sm color={colors.text} style={styles.emailFieldLabel}>
                 {'Bcc'}
               </Text>
               <TextInput
diff --git a/src/screens/ChatScreen/components/SnoozeConversation.js b/src/screens/ChatScreen/components/SnoozeConversation.js
index abcd286a9..6e442dde8 100644
--- a/src/screens/ChatScreen/components/SnoozeConversation.js
+++ b/src/screens/ChatScreen/components/SnoozeConversation.js
@@ -116,7 +116,7 @@ const SnoozeConversation = ({ colors, conversationId, activeSnoozeValue, closeMo
             onPress={() => toggleStatusForConversations(item.key)}>
             <View style={styles.itemView}>
               <Icon icon={item.icon} color={colors.textDark} size={18} />
-              <Text sm medium color={colors.textDark} style={styles.itemText}>
+              <Text accessible={true} sm medium color={colors.textDark} style={styles.itemText}>
                 {`${i18n.t('CONVERSATION.SNOOZE_UNTIL')} ${item.title}`}
               </Text>
             </View>
diff --git a/src/screens/ChatScreen/components/UserTypingStatus.js b/src/screens/ChatScreen/components/UserTypingStatus.js
index 22e83718e..876c33401 100644
--- a/src/screens/ChatScreen/components/UserTypingStatus.js
+++ b/src/screens/ChatScreen/components/UserTypingStatus.js
@@ -26,7 +26,12 @@ const TypingStatusComponent = ({ typingUser }) => {
     <React.Fragment>
       <TouchableOpacity>
         <View>
-          <Text xs medium color={colors.successColor} style={styles.subHeaderTitle}>
+          <Text
+            accessible={true}
+            xs
+            medium
+            color={colors.successColor}
+            style={styles.subHeaderTitle}>
             {typingUser ? `${typingUser}` : ''}
           </Text>
         </View>
diff --git a/src/screens/ConfigureURLScreen/ConfigureURLScreen.js b/src/screens/ConfigureURLScreen/ConfigureURLScreen.js
index f6410392e..456bde6cb 100644
--- a/src/screens/ConfigureURLScreen/ConfigureURLScreen.js
+++ b/src/screens/ConfigureURLScreen/ConfigureURLScreen.js
@@ -83,10 +83,10 @@ const ConfigureURLScreenComponent = ({ navigation }) => {
         </View>
 
         <View style={styles.titleView}>
-          <Text lg medium color={colors.textDark} style={styles.titleText}>
+          <Text accessible={true} lg medium color={colors.textDark} style={styles.titleText}>
             {i18n.t('CONFIGURE_URL.ENTER_URL')}
           </Text>
-          <Text sm color={colors.textLight} style={styles.subTitleText}>
+          <Text accessible={true} sm color={colors.textLight} style={styles.subTitleText}>
             {i18n.t('CONFIGURE_URL.DESCRIPTION')}
           </Text>
         </View>
diff --git a/src/screens/Conversation/components/ConversationFilter/ConversationFilter.js b/src/screens/Conversation/components/ConversationFilter/ConversationFilter.js
index 8978bb52b..d093238bf 100644
--- a/src/screens/Conversation/components/ConversationFilter/ConversationFilter.js
+++ b/src/screens/Conversation/components/ConversationFilter/ConversationFilter.js
@@ -70,7 +70,7 @@ const ConversationFilter = ({ colors, activeValue, leftIcon, items, onChangeFilt
                   <Icon icon={leftIcon} color={colors.text} size={16} />
                 </View>
               )}
-              <Text sm medium color={colors.text}>
+              <Text accessible={true} sm medium color={colors.text}>
                 {item.name}
               </Text>
             </View>
diff --git a/src/screens/Conversation/components/ConversationFilter/ConversationInboxFilter.js b/src/screens/Conversation/components/ConversationFilter/ConversationInboxFilter.js
index 567be6ae8..ed1a6592d 100644
--- a/src/screens/Conversation/components/ConversationFilter/ConversationInboxFilter.js
+++ b/src/screens/Conversation/components/ConversationFilter/ConversationInboxFilter.js
@@ -86,7 +86,7 @@ const ConversationInboxFilter = ({ colors, activeValue, hasLeftIcon, items, onCh
                   <Icon icon={iconNameByInboxType(item)} color={colors.text} size={16} />
                 </View>
               )}
-              <Text sm medium color={colors.text}>
+              <Text accessible={true} sm medium color={colors.text}>
                 {item.name === 'All' ? 'All Inboxes' : item.name}
               </Text>
             </View>
diff --git a/src/screens/Conversation/components/ConversationItem/CardLabels.js b/src/screens/Conversation/components/ConversationItem/CardLabels.js
index 0ed1586a9..f77c93546 100644
--- a/src/screens/Conversation/components/ConversationItem/CardLabels.js
+++ b/src/screens/Conversation/components/ConversationItem/CardLabels.js
@@ -64,7 +64,7 @@ const CardLabel = ({ conversationDetails, conversationId }) => {
       {activeLabels.map(({ id, title, color }) => (
         <View style={styles.labelView} key={id}>
           <View style={[getLabelStyle(color)]} />
-          <Text xs medium color={colors.text}>
+          <Text accessible={true} xs medium color={colors.text}>
             {title}
           </Text>
         </View>
diff --git a/src/screens/Conversation/components/ConversationItem/ConversationAttachment.js b/src/screens/Conversation/components/ConversationItem/ConversationAttachment.js
index 2a37a8672..e6dae158a 100644
--- a/src/screens/Conversation/components/ConversationItem/ConversationAttachment.js
+++ b/src/screens/Conversation/components/ConversationItem/ConversationAttachment.js
@@ -23,7 +23,7 @@ const ConversationAttachmentItem = ({ attachment }) => {
           <View style={styles.icon}>
             <Icon icon="image-outline" color={colors.text} size={14} />
           </View>
-          <Text sm color={colors.text}>
+          <Text accessible={true} sm color={colors.text}>
             {i18n.t('CONVERSATION.PICTURE_CONTENT')}
           </Text>
         </View>
@@ -32,7 +32,7 @@ const ConversationAttachmentItem = ({ attachment }) => {
           <View style={styles.icon}>
             <Icon icon="document-outline" color={colors.text} size={14} />
           </View>
-          <Text sm color={colors.text}>
+          <Text accessible={true} sm color={colors.text}>
             {i18n.t('CONVERSATION.ATTACHMENT_CONTENT')}
           </Text>
         </View>
diff --git a/src/screens/Conversation/components/ConversationItem/ConversationContent.js b/src/screens/Conversation/components/ConversationItem/ConversationContent.js
index b96dc843e..b55aa3a53 100644
--- a/src/screens/Conversation/components/ConversationItem/ConversationContent.js
+++ b/src/screens/Conversation/components/ConversationItem/ConversationContent.js
@@ -55,11 +55,17 @@ const ConversationContent = ({ content, messageType, isPrivate, unReadCount }) =
                 </View>
               )}
               {unReadCount ? (
-                <Text semiBold sm numberOfLines={1} maxLength={8} color={colors.text}>
+                <Text
+                  accessible={true}
+                  semiBold
+                  sm
+                  numberOfLines={1}
+                  maxLength={8}
+                  color={colors.text}>
                   {findLastMessage(message)}
                 </Text>
               ) : (
-                <Text sm numberOfLines={1} maxLength={8} color={colors.text}>
+                <Text accessible={true} sm numberOfLines={1} maxLength={8} color={colors.text}>
                   {findLastMessage(message)}
                 </Text>
               )}
@@ -71,11 +77,17 @@ const ConversationContent = ({ content, messageType, isPrivate, unReadCount }) =
                 <Icon color={colors.text} icon="info-outline" size={14} />
               </View>
               {unReadCount ? (
-                <Text semiBold sm numberOfLines={1} maxLength={8} color={colors.text}>
+                <Text
+                  accessible={true}
+                  semiBold
+                  sm
+                  numberOfLines={1}
+                  maxLength={8}
+                  color={colors.text}>
                   {getTextSubstringWithEllipsis(message, 32)}
                 </Text>
               ) : (
-                <Text sm numberOfLines={1} maxLength={8} color={colors.text}>
+                <Text accessible={true} sm numberOfLines={1} maxLength={8} color={colors.text}>
                   {getTextSubstringWithEllipsis(message, 32)}
                 </Text>
               )}
@@ -85,11 +97,11 @@ const ConversationContent = ({ content, messageType, isPrivate, unReadCount }) =
       ) : (
         <View style={styles.itemView}>
           {unReadCount ? (
-            <Text semiBold sm numberOfLines={1} maxLength={8} color={colors.text}>
+            <Text accessible={true} semiBold sm numberOfLines={1} maxLength={8} color={colors.text}>
               {findLastMessage(message)}
             </Text>
           ) : (
-            <Text sm numberOfLines={1} maxLength={8} color={colors.text}>
+            <Text accessible={true} sm numberOfLines={1} maxLength={8} color={colors.text}>
               {findLastMessage(message)}
             </Text>
           )}
diff --git a/src/screens/Conversation/components/ConversationItem/ConversationItem.js b/src/screens/Conversation/components/ConversationItem/ConversationItem.js
index e0098d095..1c68ec497 100644
--- a/src/screens/Conversation/components/ConversationItem/ConversationItem.js
+++ b/src/screens/Conversation/components/ConversationItem/ConversationItem.js
@@ -141,7 +141,12 @@ const ConversationItem = ({ item, conversationTypingUsers, onPress, showAssignee
               ]}>
               <Pressable style={styles.readUnreadMessageSwipeAction}>
                 <Icon color={colors.colorWhite} icon="mail-unread-outline" size={24} />
-                <Text sm semiBold color={colors.colorWhite} style={styles.swipeActionText}>
+                <Text
+                  accessible={true}
+                  sm
+                  semiBold
+                  color={colors.colorWhite}
+                  style={styles.swipeActionText}>
                   Unread
                 </Text>
               </Pressable>
@@ -157,7 +162,12 @@ const ConversationItem = ({ item, conversationTypingUsers, onPress, showAssignee
               ]}>
               <Pressable style={styles.readUnreadMessageSwipeAction}>
                 <Icon color={colors.colorWhite} icon="mail-outline" size={24} />
-                <Text sm semiBold color={colors.colorWhite} style={styles.swipeActionText}>
+                <Text
+                  accessible={true}
+                  sm
+                  semiBold
+                  color={colors.colorWhite}
+                  style={styles.swipeActionText}>
                   Read
                 </Text>
               </Pressable>
@@ -197,7 +207,7 @@ const ConversationItem = ({ item, conversationTypingUsers, onPress, showAssignee
             <View style={styles.conversationMeta}>
               <View style={styles.metaDetails}>
                 <View style={styles.idView}>
-                  <Text xs medium color={colors.textLight}>
+                  <Text accessible={true} xs medium color={colors.textLight}>
                     #{id}
                   </Text>
                 </View>
@@ -213,7 +223,7 @@ const ConversationItem = ({ item, conversationTypingUsers, onPress, showAssignee
                 {showAssigneeLabel && assigneeName && (
                   <View style={styles.assigneeLabel}>
                     <Icon icon="person-outline" color={colors.textLighter} size={12} />
-                    <Text xs color={colors.textLighter}>
+                    <Text accessible={true} xs color={colors.textLighter}>
                       {getTextSubstringWithEllipsis(assigneeName, 14)}
                     </Text>
                   </View>
@@ -230,11 +240,11 @@ const ConversationItem = ({ item, conversationTypingUsers, onPress, showAssignee
                 <View style={styles.nameView}>
                   {!!name &&
                     (unreadCount ? (
-                      <Text sm semiBold color={colors.textDark}>
+                      <Text accessible={true} sm semiBold color={colors.textDark}>
                         {getTextSubstringWithEllipsis(name, 22)}
                       </Text>
                     ) : (
-                      <Text sm medium color={colors.textDark}>
+                      <Text accessible={true} sm medium color={colors.textDark}>
                         {getTextSubstringWithEllipsis(name, 22)}
                       </Text>
                     ))}
@@ -251,7 +261,7 @@ const ConversationItem = ({ item, conversationTypingUsers, onPress, showAssignee
                     />
                   )
                 ) : (
-                  <Text sm color={colors.successColor}>
+                  <Text accessible={true} sm color={colors.successColor}>
                     {getTextSubstringWithEllipsis(typingUser, 25)}
                   </Text>
                 )}
@@ -260,14 +270,14 @@ const ConversationItem = ({ item, conversationTypingUsers, onPress, showAssignee
             </View>
             <View style={styles.unreadTimestampContainer}>
               <View>
-                <Text xxs color={colors.textLight}>
+                <Text accessible={true} xxs color={colors.textLight}>
                   {dynamicTime({ time: created_at })}
                 </Text>
               </View>
               {unreadCount ? (
                 <View style={styles.badgeView}>
                   <View style={styles.badge}>
-                    <Text xxs medium color={colors.colorWhite}>
+                    <Text accessible={true} xxs medium color={colors.colorWhite}>
                       {unreadCount > 9 ? '9+' : unreadCount.toString()}
                     </Text>
                   </View>
diff --git a/src/screens/Conversation/components/ConversationItem/ConversationLabels.js b/src/screens/Conversation/components/ConversationItem/ConversationLabels.js
index d6138409d..9e5159dac 100644
--- a/src/screens/Conversation/components/ConversationItem/ConversationLabels.js
+++ b/src/screens/Conversation/components/ConversationItem/ConversationLabels.js
@@ -64,7 +64,7 @@ const ConversationLabel = ({ conversationDetails, conversationId }) => {
       {activeLabels.map(({ id, title, color }) => (
         <View style={styles.labelView} key={id}>
           <View style={[getLabelStyle(color)]} />
-          <Text xs medium color={colors.text}>
+          <Text accessible={true} xs medium color={colors.text}>
             {title}
           </Text>
         </View>
diff --git a/src/screens/Conversation/components/ConversationList/ConversationList.js b/src/screens/Conversation/components/ConversationList/ConversationList.js
index 11e75d0e0..6a7f3db02 100644
--- a/src/screens/Conversation/components/ConversationList/ConversationList.js
+++ b/src/screens/Conversation/components/ConversationList/ConversationList.js
@@ -76,7 +76,7 @@ const ConversationList = ({
     return (
       <View style={styles.loadMoreView}>
         {isAllConversationsAreFetched ? (
-          <Text sm color={colors.textLight}>
+          <Text accessible={true} sm color={colors.textLight}>
             {i18n.t('CONVERSATION.ALL_CONVERSATION_LOADED')} 🎉
           </Text>
         ) : (
diff --git a/src/screens/ConversationDetails/ConversationDetailsScreen.js b/src/screens/ConversationDetails/ConversationDetailsScreen.js
index 4a274b64a..160150c60 100644
--- a/src/screens/ConversationDetails/ConversationDetailsScreen.js
+++ b/src/screens/ConversationDetails/ConversationDetailsScreen.js
@@ -154,13 +154,18 @@ const ConversationDetailsScreen = ({ navigation, route }) => {
               />
             </View>
             <View>
-              <Text bold lg color={colors.textDark}>
+              <Text accessible={true} bold lg color={colors.textDark}>
                 {name}
               </Text>
             </View>
             {senderAdditionalInfo.description ? (
               <View style={styles.descriptionContainer}>
-                <Text regular sm color={colors.textDark} style={styles.description}>
+                <Text
+                  accessible={true}
+                  regular
+                  sm
+                  color={colors.textDark}
+                  style={styles.description}>
                   {senderAdditionalInfo.description}
                 </Text>
               </View>
@@ -170,7 +175,7 @@ const ConversationDetailsScreen = ({ navigation, route }) => {
           </View>
           <View style={styles.separatorView}>
             <View style={styles.separator}>
-              <Text bold sm color={colors.textDark}>
+              <Text accessible={true} bold sm color={colors.textDark}>
                 {i18n.t('CONVERSATION_LABELS.TITLE')}
               </Text>
             </View>
diff --git a/src/screens/ConversationDetails/components/AddButton.js b/src/screens/ConversationDetails/components/AddButton.js
index f0b0d84db..8d1fa64ad 100644
--- a/src/screens/ConversationDetails/components/AddButton.js
+++ b/src/screens/ConversationDetails/components/AddButton.js
@@ -40,7 +40,12 @@ const AddButton = ({ buttonLabel, iconName, onClickOpen }) => {
   return (
     <React.Fragment>
       <Pressable style={styles.addButtonWrap} onPress={onClickOpen}>
-        <Text xs medium color={colors.primaryColorDarker} style={styles.addButton}>
+        <Text
+          accessible={true}
+          xs
+          medium
+          color={colors.primaryColorDarker}
+          style={styles.addButton}>
           {buttonLabel}
         </Text>
         <Icon icon={iconName} color={colors.primaryColorDarker} size={14} />
diff --git a/src/screens/ConversationDetails/components/ContactAttributes.js b/src/screens/ConversationDetails/components/ContactAttributes.js
index 344f65d5d..0f722f7b3 100644
--- a/src/screens/ConversationDetails/components/ContactAttributes.js
+++ b/src/screens/ConversationDetails/components/ContactAttributes.js
@@ -53,7 +53,7 @@ const ContactAttributes = ({ conversationDetails }) => {
         <View>
           <View style={styles.separatorView}>
             <View style={styles.separator}>
-              <Text bold sm color={colors.textDark}>
+              <Text accessible={true} bold sm color={colors.textDark}>
                 {i18n.t('CONTACT_ATTRIBUTES.TITLE')}
               </Text>
             </View>
diff --git a/src/screens/ConversationDetails/components/ContactDetails.js b/src/screens/ConversationDetails/components/ContactDetails.js
index c1ccc7c16..19eb98e0f 100644
--- a/src/screens/ConversationDetails/components/ContactDetails.js
+++ b/src/screens/ConversationDetails/components/ContactDetails.js
@@ -43,7 +43,7 @@ const ContactDetails = ({ type, value, iconName }) => {
   return (
     <Pressable style={styles.detailsContainer} onPress={() => onClickOpen()}>
       <Icon icon={iconName} color={colors.primaryColor} size={14} />
-      <Text sm color={colors.textDark} style={styles.detailText}>
+      <Text accessible={true} sm color={colors.textDark} style={styles.detailText}>
         {value}
       </Text>
     </Pressable>
diff --git a/src/screens/ConversationDetails/components/ConversationAttributes.js b/src/screens/ConversationDetails/components/ConversationAttributes.js
index de3956829..7e6d2dd73 100644
--- a/src/screens/ConversationDetails/components/ConversationAttributes.js
+++ b/src/screens/ConversationDetails/components/ConversationAttributes.js
@@ -125,7 +125,7 @@ const ConversationAttributes = ({ conversationDetails }) => {
         <View>
           <View style={styles.separatorView}>
             <View style={styles.separator}>
-              <Text bold sm color={colors.textDark}>
+              <Text accessible={true} bold sm color={colors.textDark}>
                 {i18n.t('CONVERSATION_DETAILS.TITLE')}
               </Text>
             </View>
diff --git a/src/screens/ConversationDetails/components/ConversationParticipants.js b/src/screens/ConversationDetails/components/ConversationParticipants.js
index 01fda1ad8..7a3026f20 100644
--- a/src/screens/ConversationDetails/components/ConversationParticipants.js
+++ b/src/screens/ConversationDetails/components/ConversationParticipants.js
@@ -156,18 +156,18 @@ const ConversationParticipants = ({ conversationId }) => {
       <View>
         <View style={styles.separatorView}>
           <View style={styles.separator}>
-            <Text bold sm color={colors.textDark}>
+            <Text accessible={true} bold sm color={colors.textDark}>
               {i18n.t('CONVERSATION_PARTICIPANTS.TITLE')}
             </Text>
           </View>
           <View style={styles.accordionItemWrapper}>
             <View style={styles.totalWatchersWrapper}>
               {!isConversationWatchersExist ? (
-                <Text sm color={colors.textGrayLighter}>
+                <Text accessible={true} sm color={colors.textGrayLighter}>
                   {i18n.t('CONVERSATION_PARTICIPANTS.NO_PARTICIPANTS_TEXT')}
                 </Text>
               ) : (
-                <Text sm color={colors.textDark}>
+                <Text accessible={true} sm color={colors.textDark}>
                   {watchersText}
                 </Text>
               )}
@@ -191,7 +191,7 @@ const ConversationParticipants = ({ conversationId }) => {
                 <View />
               )}
               {isCurrentUserWatching ? (
-                <Text sm color={colors.textGrayLighter}>
+                <Text accessible={true} sm color={colors.textGrayLighter}>
                   {i18n.t('CONVERSATION_PARTICIPANTS.YOU_ARE_WATCHING')}
                 </Text>
               ) : (
@@ -199,7 +199,11 @@ const ConversationParticipants = ({ conversationId }) => {
                   style={styles.watchConversationButton}
                   onPress={() => updateConversationWatchers(currentAgent)}>
                   <Icon color={colors.primaryColor} icon="arrow-right" size={12} />
-                  <Text xs color={colors.primaryColor} style={styles.watchConversationButtonText}>
+                  <Text
+                    accessible={true}
+                    xs
+                    color={colors.primaryColor}
+                    style={styles.watchConversationButtonText}>
                     {i18n.t('CONVERSATION_PARTICIPANTS.WATCH_CONVERSATION')}
                   </Text>
                 </Pressable>
diff --git a/src/screens/ConversationDetails/components/LabelView.js b/src/screens/ConversationDetails/components/LabelView.js
index 497708efd..5d90e81a8 100644
--- a/src/screens/ConversationDetails/components/LabelView.js
+++ b/src/screens/ConversationDetails/components/LabelView.js
@@ -116,7 +116,7 @@ const LabelView = ({ conversationDetails, conversationId, openLabelsBottomSheet
           )}
         </View>
         {shouldShowEmptyMessage && (
-          <Text sm color={colors.text} style={styles.itemValue}>
+          <Text accessible={true} sm color={colors.text} style={styles.itemValue}>
             {i18n.t('CONVERSATION_LABELS.NO_LABEL')}
           </Text>
         )}
diff --git a/src/screens/ForgotPassword/ForgotPassword.js b/src/screens/ForgotPassword/ForgotPassword.js
index cd3a1fd81..912bb1969 100644
--- a/src/screens/ForgotPassword/ForgotPassword.js
+++ b/src/screens/ForgotPassword/ForgotPassword.js
@@ -76,12 +76,12 @@ const ForgotPasswordComponent = ({ navigation }) => {
         </View>
 
         <View style={styles.titleView}>
-          <Text lg medium color={colors.textDark} style={styles.titleText}>
+          <Text accessible={true} lg medium color={colors.textDark} style={styles.titleText}>
             {i18n.t('FORGOT_PASSWORD.TITLE')}
           </Text>
         </View>
         <View style={styles.titleView}>
-          <Text sm color={colors.textLight} style={styles.subTitleText}>
+          <Text accessible={true} sm color={colors.textLight} style={styles.subTitleText}>
             {i18n.t('FORGOT_PASSWORD.SUB_TITLE')}
           </Text>
         </View>
diff --git a/src/screens/LoginScreen/LoginScreen.js b/src/screens/LoginScreen/LoginScreen.js
index 171591530..bcbd46346 100644
--- a/src/screens/LoginScreen/LoginScreen.js
+++ b/src/screens/LoginScreen/LoginScreen.js
@@ -65,6 +65,8 @@ const LoginScreenComponent = ({ navigation }) => {
   const baseUrl = useSelector(selectBaseUrl);
   const activeLocale = useSelector(selectLocale);
 
+  const [hiddenPassword, setHiddenPassword] = React.useState(true);
+
   useEffect(() => {
     dispatch(resetAuth());
     if (!installationUrl) {
@@ -127,11 +129,11 @@ const LoginScreenComponent = ({ navigation }) => {
           <Image style={styles.logo} source={images.login} />
         </View>
         <View style={styles.titleView}>
-          <Text lg medium color={colors.textDark} style={styles.titleText}>
+          <Text accessible={true} lg medium color={colors.textDark} style={styles.titleText}>
             {i18n.t('LOGIN.TITLE')}
           </Text>
           {baseUrl ? (
-            <Text sm color={colors.textLight} style={styles.subTitleText}>
+            <Text accessible={true} sm color={colors.textLight} style={styles.subTitleText}>
               {i18n.t('LOGIN.DESCRIPTION', { baseUrl })}
             </Text>
           ) : null}
@@ -142,6 +144,7 @@ const LoginScreenComponent = ({ navigation }) => {
             <View>
               <Controller
                 control={control}
+                style={{ borderColor: 'red', borderWidth: 1 }}
                 rules={{
                   required: i18n.t('LOGIN.EMAIL_REQUIRED'),
                   pattern: {
@@ -167,30 +170,44 @@ const LoginScreenComponent = ({ navigation }) => {
               />
               <View style={styles.spacer} />
               <View />
-              <Controller
-                control={control}
-                rules={{
-                  required: i18n.t('LOGIN.PASSWORD_REQUIRED'),
-                }}
-                render={({ field: { onChange, onBlur, value } }) => (
-                  <TextInput
-                    style={styles.input}
-                    onBlur={onBlur}
-                    onChangeText={onChange}
-                    value={value}
-                    errors={errors}
-                    error={errors.password}
-                    label={i18n.t('LOGIN.PASSWORD')}
-                    keyboardType="default"
-                    errorMessage={i18n.t('LOGIN.PASSWORD_ERROR')}
-                    secureTextEntry={true}
+              <View>
+                <Controller
+                  control={control}
+                  style={{ borderColor: 'red', borderWidth: 1 }}
+                  rules={{
+                    required: i18n.t('LOGIN.PASSWORD_REQUIRED'),
+                  }}
+                  render={({ field: { onChange, onBlur, value } }) => (
+                    <TextInput
+                      style={[styles.input, { flex: 1, width: '100%', paddingRight: 40 }]} // Add padding to accommodate the icon
+                      onBlur={onBlur}
+                      onChangeText={onChange}
+                      value={value}
+                      errors={errors}
+                      error={errors.password}
+                      label={i18n.t('LOGIN.PASSWORD')}
+                      keyboardType="default"
+                      errorMessage={i18n.t('LOGIN.PASSWORD_ERROR')}
+                      secureTextEntry={hiddenPassword}
+                    />
+                  )}
+                  name="password"
+                />
+                <TouchableOpacity
+                  style={[
+                    styles.eyeIcon,
+                    { position: 'absolute', bottom: 10, right: 10, height: 25, width: 25 },
+                  ]} // Position the icon absolutely
+                  onPress={() => setHiddenPassword(!hiddenPassword)}>
+                  <Image
+                    style={{ width: 25, height: 25 }}
+                    source={hiddenPassword ? images.eye : images.eyeOff}
                   />
-                )}
-                name="password"
-              />
+                </TouchableOpacity>
+              </View>
             </View>
             <TouchableOpacity style={styles.forgotView} onPress={() => navigate('ResetPassword')}>
-              <Text xs medium color={colors.textLight}>
+              <Text accessible={true} xs medium color={colors.textLight}>
                 {i18n.t('LOGIN.FORGOT_PASSWORD')}
               </Text>
             </TouchableOpacity>
@@ -211,23 +228,25 @@ const LoginScreenComponent = ({ navigation }) => {
               {appName === 'Chatwoot' && (
                 <>
                   <TouchableOpacity onPress={doSignup}>
-                    <Text xs medium color={colors.textLight}>
+                    <Text accessible={true} xs medium color={colors.textLight}>
                       {i18n.t('LOGIN.CREATE_ACCOUNT')}
                     </Text>
                   </TouchableOpacity>
-                  <Text color={colors.textLight}>{'   |   '}</Text>
+                  <Text accessible={true} color={colors.textLight}>
+                    {'   |   '}
+                  </Text>
                 </>
               )}
 
               <TouchableOpacity onPress={() => navigate('ConfigureURL')}>
-                <Text xs medium color={colors.textLight}>
+                <Text accessible={true} xs medium color={colors.textLight}>
                   {i18n.t('LOGIN.CHANGE_URL')}
                 </Text>
               </TouchableOpacity>
             </View>
             <View style={styles.accountView}>
               <TouchableOpacity onPress={toggleChangeLanguageModal}>
-                <Text xs medium color={colors.textLight}>
+                <Text accessible={true} xs medium color={colors.textLight}>
                   {i18n.t('LOGIN.CHANGE_LANGUAGE')}
                 </Text>
               </TouchableOpacity>
diff --git a/src/screens/Notification/NotificationScreen.js b/src/screens/Notification/NotificationScreen.js
index 9aa9f950a..90c1667e2 100644
--- a/src/screens/Notification/NotificationScreen.js
+++ b/src/screens/Notification/NotificationScreen.js
@@ -107,7 +107,7 @@ const NotificationScreen = ({ navigation }) => {
             animating={!isAllNotificationsLoaded}
           />
         ) : (
-          <Text sm color={colors.textLight}>
+          <Text accessible={true} sm color={colors.textLight}>
             {`${i18n.t('NOTIFICATION.ALL_NOTIFICATION_LOADED')} 🎉`}
           </Text>
         )}
diff --git a/src/screens/Settings/SettingsScreen.js b/src/screens/Settings/SettingsScreen.js
index 5c015ddcc..ab30e10e9 100644
--- a/src/screens/Settings/SettingsScreen.js
+++ b/src/screens/Settings/SettingsScreen.js
@@ -192,7 +192,7 @@ const SettingsScreen = () => {
         />
         <View style={styles.separatorView}>
           <View style={styles.separator}>
-            <Text bold sm color={colors.textDark}>
+            <Text accessible={true} bold sm color={colors.textDark}>
               {i18n.t('SETTINGS.SET_AVAILABILITY')}
             </Text>
           </View>
@@ -200,7 +200,7 @@ const SettingsScreen = () => {
         </View>
         <View style={styles.separatorView}>
           <View style={styles.separator}>
-            <Text bold sm color={colors.textDark}>
+            <Text accessible={true} bold sm color={colors.textDark}>
               {i18n.t('SETTINGS.PREFERENCES')}
             </Text>
           </View>
@@ -267,7 +267,7 @@ const SettingsScreen = () => {
         </View>
         <View style={styles.separatorView}>
           <View style={styles.separator}>
-            <Text bold sm color={colors.textDark}>
+            <Text accessible={true} bold sm color={colors.textDark}>
               {i18n.t('SETTINGS.SUPPORT')}
             </Text>
           </View>
@@ -297,7 +297,12 @@ const SettingsScreen = () => {
             <Image style={styles.aboutImage} source={images.appLogo} />
           </View>
           <View style={styles.appDescriptionView}>
-            <Text color={colors.textLight} xs medium style={styles.appDescriptionText}>
+            <Text
+              accessible={true}
+              color={colors.textLight}
+              xs
+              medium
+              style={styles.appDescriptionText}>
               {`Version ${packageFile.version}`}
             </Text>
           </View>
@@ -305,7 +310,7 @@ const SettingsScreen = () => {
         <View style={styles.logoutSection}>
           <Pressable style={styles.logoutButton} onPress={onClickLogout}>
             <Icon icon="power-outline" color={colors.textDark} size={16} />
-            <Text medium sm color={colors.textDark} style={styles.logoutText}>
+            <Text accessible={true} medium sm color={colors.textDark} style={styles.logoutText}>
               {i18n.t('SETTINGS.LOGOUT')}
             </Text>
           </Pressable>
diff --git a/src/screens/Settings/components/AccordionItem.js b/src/screens/Settings/components/AccordionItem.js
index 0dc29ab10..24b082b69 100644
--- a/src/screens/Settings/components/AccordionItem.js
+++ b/src/screens/Settings/components/AccordionItem.js
@@ -54,13 +54,18 @@ const AccordionItem = ({ title, activeValue, rightIcon, leftIcon, routeName, onP
     <Pressable key={title} style={styles.accordionItem} onPress={() => onPress({ routeName })}>
       <View style={styles.itemView}>
         <Icon icon={leftIcon} color={colors.textDark} size={18} />
-        <Text medium sm color={colors.textDark} style={styles.accordionItemText}>
+        <Text accessible={true} medium sm color={colors.textDark} style={styles.accordionItemText}>
           {title}
         </Text>
       </View>
       <View style={styles.activeItemView}>
         {activeValue && (
-          <Text medium sm color={colors.textLight} style={styles.accordionItemText}>
+          <Text
+            accessible={true}
+            medium
+            sm
+            color={colors.textLight}
+            style={styles.accordionItemText}>
             {getTextSubstringWithEllipsis(activeValue, 12)}
           </Text>
         )}
diff --git a/src/screens/Settings/components/AccountsSelector.js b/src/screens/Settings/components/AccountsSelector.js
index 5114fc0c5..d88363b5e 100644
--- a/src/screens/Settings/components/AccountsSelector.js
+++ b/src/screens/Settings/components/AccountsSelector.js
@@ -81,17 +81,17 @@ const AccountsSelector = ({ accounts, activeValue, onPress, colors }) => {
             }}>
             <View style={styles.accountDetailsWrapper}>
               <View style={styles.nameIdWrapper}>
-                <Text md semiBold color={colors.textDark}>
+                <Text accessible={true} md semiBold color={colors.textDark}>
                   {account.name}
                 </Text>
                 <View
                   style={[styles.accountIdWrapper, { backgroundColor: colors.primaryColorLight }]}>
-                  <Text xs medium color={colors.text} style={styles.accountId}>
+                  <Text accessible={true} xs medium color={colors.text} style={styles.accountId}>
                     {`#${account.id}`}
                   </Text>
                 </View>
               </View>
-              <Text xs color={colors.text} style={styles.role}>
+              <Text accessible={true} xs color={colors.text} style={styles.role}>
                 {account.role}
               </Text>
             </View>
diff --git a/src/screens/Settings/components/AvailabilityStatus.js b/src/screens/Settings/components/AvailabilityStatus.js
index 50706951d..c96672c98 100644
--- a/src/screens/Settings/components/AvailabilityStatus.js
+++ b/src/screens/Settings/components/AvailabilityStatus.js
@@ -97,7 +97,7 @@ const AvailabilityStatus = ({ status }) => {
           <View>
             <Icon icon="circle-filled" color={item.color} size={14} />
           </View>
-          <Text medium sm color={colors.textDark} style={styles.statusText}>
+          <Text accessible={true} medium sm color={colors.textDark} style={styles.statusText}>
             {item.status}
           </Text>
         </Pressable>
diff --git a/src/screens/Settings/components/LanguageSelector.js b/src/screens/Settings/components/LanguageSelector.js
index a442884c4..ccfa76044 100644
--- a/src/screens/Settings/components/LanguageSelector.js
+++ b/src/screens/Settings/components/LanguageSelector.js
@@ -63,7 +63,7 @@ const LanguageSelector = ({ activeValue, onPress, colors }) => {
               onPress(language);
             }}>
             <View style={styles.languageView}>
-              <Text sm medium color={colors.text}>
+              <Text accessible={true} sm medium color={colors.text}>
                 {LANGUAGES[language]}
               </Text>
             </View>
diff --git a/src/screens/Settings/components/NotificationPreferenceItem.js b/src/screens/Settings/components/NotificationPreferenceItem.js
index 200cf7569..57fa0cd9c 100644
--- a/src/screens/Settings/components/NotificationPreferenceItem.js
+++ b/src/screens/Settings/components/NotificationPreferenceItem.js
@@ -45,7 +45,7 @@ const NotificationPreferenceItemComponent = ({ title, item, onCheckedChange, isC
   return (
     <Pressable style={styles.itemView} onPress={() => onCheckedChange({ item })}>
       <View style={styles.textView}>
-        <Text sm color={colors.text}>
+        <Text accessible={true} sm color={colors.text}>
           {title}
         </Text>
       </View>
diff --git a/src/screens/Settings/components/NotificationPreferenceSelector.js b/src/screens/Settings/components/NotificationPreferenceSelector.js
index d4db5b849..57bfc8ebd 100644
--- a/src/screens/Settings/components/NotificationPreferenceSelector.js
+++ b/src/screens/Settings/components/NotificationPreferenceSelector.js
@@ -88,7 +88,7 @@ const NotificationPreferenceSelector = ({ activeValue, onPress, colors }) => {
   return (
     <View style={styles.bottomSheet}>
       <View style={styles.itemMainView}>
-        <Text semiBold color={colors.textDark} style={styles.itemMainViewItem}>
+        <Text accessible={true} semiBold color={colors.textDark} style={styles.itemMainViewItem}>
           {i18n.t('NOTIFICATION_PREFERENCE.EMAIL')}
         </Text>
         {allEmailFlags.map(
@@ -105,7 +105,7 @@ const NotificationPreferenceSelector = ({ activeValue, onPress, colors }) => {
         )}
       </View>
       <View style={styles.itemMainView}>
-        <Text semiBold color={colors.textDark} style={styles.itemMainViewItem}>
+        <Text accessible={true} semiBold color={colors.textDark} style={styles.itemMainViewItem}>
           {i18n.t('NOTIFICATION_PREFERENCE.PUSH')}
         </Text>
         {allPushFlags.map(
diff --git a/src/screens/Settings/components/UserInformation.js b/src/screens/Settings/components/UserInformation.js
index 31037d064..0131a83bb 100644
--- a/src/screens/Settings/components/UserInformation.js
+++ b/src/screens/Settings/components/UserInformation.js
@@ -61,10 +61,10 @@ const UserInformation = ({ status, thumbnail, name, email }) => {
       </View>
       <Pressable style={styles.profileDetailsView}>
         <View style={styles.nameView}>
-          <Text bold xl color={colors.textDark} style={styles.nameText}>
+          <Text accessible={true} bold xl color={colors.textDark} style={styles.nameText}>
             {name}
           </Text>
-          <Text medium sm color={colors.text} style={styles.emailText}>
+          <Text accessible={true} medium sm color={colors.text} style={styles.emailText}>
             {email}
           </Text>
         </View>