diff --git a/www/js/control/ProfileSettings.jsx b/www/js/control/ProfileSettings.jsx index f239b8b29..c931c9a94 100644 --- 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 = () => { + style={{ height: 46, backgroundColor: 'white', elevation: 3 }} + accessibilityRole='navigation'> - {t('control.log-out')} - setLogoutVis(true)}> + setLogoutVis(true)} + // accessibilityLabel={`${t('control.log-out')}`} + aria-labelledby='logout-group' + > + {/* {t('control.log-out')} + + setLogoutVis(true)} + accessibilityLabel='' + accessibilityRole='button' + /> */} + {t('control.log-out')} + + diff --git a/www/js/control/SettingRow.jsx b/www/js/control/SettingRow.jsx index b55b3c804..cbbf25582 100644 --- 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 = ; + rightComponent = ( + + ); } else { - rightComponent = ; + rightComponent = ( + + ); } let descriptionText; if (desc) { - descriptionText = { desc }; + descriptionText = desc; } else { descriptionText = ''; } + return ( 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;