From 3ba1b262811fe0150f1642276ff80c9860ac195a Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 23 Jun 2020 17:27:43 -0300
Subject: [PATCH] :sparkles: add accessibility settings

---
 client/modules/Mobile/MobilePreferences.jsx | 40 +++++++++++++++++++--
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/client/modules/Mobile/MobilePreferences.jsx b/client/modules/Mobile/MobilePreferences.jsx
index 45ebe53e..92cc2ec9 100644
--- a/client/modules/Mobile/MobilePreferences.jsx
+++ b/client/modules/Mobile/MobilePreferences.jsx
@@ -38,10 +38,10 @@ const SectionHeader = styled.h2`
 
 const MobilePreferences = (props) => {
   const {
-    setTheme, setAutosave, setLinewrap, setTextOutput, setGridOutput, setSoundOutput
+    setTheme, setAutosave, setLinewrap, setTextOutput, setGridOutput, setSoundOutput, lineNumbers, lintWarning
   } = props;
   const {
-    theme, autosave, linewrap, textOutput, gridOutput, soundOutput
+    theme, autosave, linewrap, textOutput, gridOutput, soundOutput, setLineNumbers, setLintWarning
   } = props;
 
   const generalSettings = [
@@ -91,7 +91,7 @@ const MobilePreferences = (props) => {
     }
   ];
 
-  const accessibilitySettings = [
+  const outputSettings = [
     {
       title: 'Plain-text',
       value: textOutput,
@@ -133,6 +133,35 @@ const MobilePreferences = (props) => {
     },
   ];
 
+  const accessibilitySettings = [
+    {
+      title: 'Line Numbers',
+      value: lineNumbers,
+      options: [
+        {
+          value: true, label: 'On', ariaLabel: 'line numbers on', name: 'line numbers', id: 'line-numbers-on'
+        },
+        {
+          value: false, label: 'Off', ariaLabel: 'line numbers off', name: 'line numbers', id: 'line-numbers-off'
+        },
+      ],
+      onSelect: x => setLineNumbers(x)
+    },
+    {
+      title: 'Lint Warning Sound',
+      value: lintWarning,
+      options: [
+        {
+          value: true, label: 'On', ariaLabel: 'lint warning on', name: 'lint warning', id: 'lint-warning-on'
+        },
+        {
+          value: false, label: 'Off', ariaLabel: 'lint warning off', name: 'lint warning', id: 'lint-warning-off'
+        },
+      ],
+      onSelect: x => setLintWarning(x)
+    },
+  ];
+
   // useEffect(() => { });
 
   return (
@@ -156,12 +185,17 @@ const MobilePreferences = (props) => {
             <SectionHeader>Accessibility</SectionHeader>
             { accessibilitySettings.map(option => <Selector key={`${option.title}wrapper`} {...option} />) }
 
+            <SectionHeader>Accessible Output</SectionHeader>
+            <h3>Used with screen reader</h3>
+            { outputSettings.map(option => <Selector key={`${option.title}wrapper`} {...option} />) }
+
           </Content>
         </section>
       </section>
     </Screen>);
 };
 
+
 MobilePreferences.propTypes = {
   fontSize: PropTypes.number.isRequired,
   lineNumbers: PropTypes.bool.isRequired,