profileSettings needs more finetuning for the logout button

e-mission · Dec 14, 2023 · 69e3bee · 69e3bee
1 parent 120059c
commit 69e3bee
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 10 deletions.
diff --git a/www/js/control/ProfileSettings.jsx b/www/js/control/ProfileSettings.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext, useRef } from 'react';
-import { Modal, StyleSheet, ScrollView } from 'react-native';
+import { Modal, StyleSheet, ScrollView, View, TouchableOpacity } from 'react-native';
 import { Dialog, Button, useTheme, Text, Appbar, IconButton, TextInput } from 'react-native-paper';
 import { getAngularService } from '../angular-react-helper';
 import { useTranslation } from 'react-i18next';
@@ -407,10 +407,29 @@ const ProfileSettings = () => {
       <Appbar.Header
         statusBarHeight={0}
         elevated={true}
-        style={{ height: 46, backgroundColor: 'white', elevation: 3 }}>
+        style={{ height: 46, backgroundColor: 'white', elevation: 3 }}
+        accessibilityRole='navigation'>
         <Appbar.Content title={t('control.profile-tab')} />
-        <Text>{t('control.log-out')}</Text>
-        <IconButton icon="logout" onPress={() => setLogoutVis(true)}></IconButton>
+        <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end' }}
+          // onPress={() => setLogoutVis(true)}
+          // accessibilityLabel={`${t('control.log-out')}`}
+          aria-labelledby='logout-group'
+        >
+          {/* <Text accessible={true}>{t('control.log-out')}
+          </Text>
+          <IconButton
+            icon='logout'
+            // onPress={() => setLogoutVis(true)}
+            accessibilityLabel=''
+            accessibilityRole='button'
+          /> */}
+          <Text id='logout-group' accessible={true}>{t('control.log-out')}</Text>
+          <IconButton
+            icon='logout'
+            // accessibilityLabel={t('control.log-out')}
+            accessibilityRole='button'
+          />
+        </TouchableOpacity>
       </Appbar.Header>
 
       <ScrollView>

diff --git a/www/js/control/SettingRow.jsx b/www/js/control/SettingRow.jsx
@@ -3,6 +3,7 @@ import { StyleSheet } from 'react-native';
 import { List, Switch, useTheme } from 'react-native-paper';
 import { useTranslation } from 'react-i18next';
 
+
 const SettingRow = ({
   textKey,
   iconName = undefined,
@@ -11,35 +12,54 @@ const SettingRow = ({
   switchValue = undefined,
   descStyle = undefined,
 }) => {
-  const { t } = useTranslation(); //this accesses the translations
-  const { colors } = useTheme(); // use this to get the theme colors instead of hardcoded #hex colors
+  const { t } = useTranslation(); // Access translations
+  const { colors } = useTheme(); // Get theme colors
+
 
   let rightComponent;
   if (iconName) {
-    rightComponent = <List.Icon icon={iconName} />;
+    rightComponent = (
+      <List.Icon
+        icon={iconName}
+        accessibilityLabel={iconName}
+      />
+    );
   } else {
-    rightComponent = <Switch value={switchValue} />;
+    rightComponent = (
+      <Switch
+        value={switchValue}
+        accessibilityLabel={t(textKey)}
+        accessibilityHint={
+          switchValue ? t('Currently enabled') : t('Currently disabled')
+        }
+      />
+    );
   }
   let descriptionText;
   if (desc) {
-    descriptionText = { desc };
+    descriptionText = desc;
   } else {
     descriptionText = '';
   }
 
+
   return (
     <List.Item
       style={styles.item(colors.surface)}
       title={t(textKey)}
       titleStyle={styles.title}
-      description={desc}
+      description={descriptionText}
       descriptionStyle={descStyle ? descStyle : styles.description}
       descriptionNumberOfLines={4}
+      accessibilityLabel={t(textKey)} 
+      accessibilityRole="button"
       onPress={(e) => action(e)}
       right={() => rightComponent}
     />
   );
 };
+
+
 export const styles = StyleSheet.create({
   item: (surfaceColor) => ({
     justifyContent: 'space-between',
@@ -56,4 +76,5 @@ export const styles = StyleSheet.create({
   },
 });
 
+
 export default SettingRow;