diff --git a/client/modules/Mobile/MobilePreferences.jsx b/client/modules/Mobile/MobilePreferences.jsx index f8500e2b..45ebe53e 100644 --- a/client/modules/Mobile/MobilePreferences.jsx +++ b/client/modules/Mobile/MobilePreferences.jsx @@ -37,8 +37,12 @@ const SectionHeader = styled.h2` const MobilePreferences = (props) => { - const { setTheme, setAutosave, setLinewrap } = props; - const { theme, autosave, linewrap } = props; + const { + setTheme, setAutosave, setLinewrap, setTextOutput, setGridOutput, setSoundOutput + } = props; + const { + theme, autosave, linewrap, textOutput, gridOutput, soundOutput + } = props; const generalSettings = [ { @@ -87,6 +91,48 @@ const MobilePreferences = (props) => { } ]; + const accessibilitySettings = [ + { + title: 'Plain-text', + value: textOutput, + options: [ + { + value: true, label: 'On', ariaLabel: 'text output on', name: 'text output', id: 'text-output-on' + }, + { + value: false, label: 'Off', ariaLabel: 'text output off', name: 'text output', id: 'text-output-off' + }, + ], + onSelect: x => setTextOutput(x) + }, + { + title: 'Table-text', + value: gridOutput, + options: [ + { + value: true, label: 'On', ariaLabel: 'table output on', name: 'table output', id: 'table-output-on' + }, + { + value: false, label: 'Off', ariaLabel: 'table output off', name: 'table output', id: 'table-output-off' + }, + ], + onSelect: x => setGridOutput(x) + }, + { + title: 'Sound', + value: soundOutput, + options: [ + { + value: true, label: 'On', ariaLabel: 'sound output on', name: 'sound output', id: 'sound-output-on' + }, + { + value: false, label: 'Off', ariaLabel: 'sound output off', name: 'sound output', id: 'sound-output-off' + }, + ], + onSelect: x => setSoundOutput(x) + }, + ]; + // useEffect(() => { }); return ( @@ -108,13 +154,14 @@ const MobilePreferences = (props) => { { generalSettings.map(option => ) } Accessibility + { accessibilitySettings.map(option => ) } + ); }; - MobilePreferences.propTypes = { fontSize: PropTypes.number.isRequired, lineNumbers: PropTypes.bool.isRequired,