From 2fda17287b82dad0080773528c64b23b88b48632 Mon Sep 17 00:00:00 2001
From: oruburos <omar.verduga@gmail.com>
Date: Wed, 22 Jul 2020 03:03:17 +0100
Subject: [PATCH 01/11] Minimal Viable Navigation Menu Translation with new
 namespace I18Next configuration leaning on default separator and namespace

Broom: i18n + debug:false
---
 client/components/Nav.jsx                     |  76 +++---
 client/i18n.js                                |   3 +-
 client/modules/IDE/components/About.jsx       |  20 +-
 .../IDE/components/KeyboardShortcutModal.jsx  |  28 +-
 .../IDE/components/Preferences/index.jsx      |  56 ++--
 client/modules/IDE/components/Toast.jsx       |   2 +-
 client/modules/IDE/components/Toolbar.jsx     |   9 +-
 client/modules/IDE/pages/IDEView.jsx          |   7 +-
 translations/locales/en-US/translations.json  | 238 ++++++++++-------
 translations/locales/es-419/translations.json | 245 +++++++++++-------
 10 files changed, 391 insertions(+), 293 deletions(-)

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 4c27d6fa1b..e35a32315d 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -100,11 +100,11 @@ class Nav extends React.PureComponent {
     const { unsavedChanges, warnIfUnsavedChanges } = this.props;
     if (!unsavedChanges) {
       this.props.showToast(1500);
-      this.props.setToastText('Opened new sketch.');
+      this.props.setToastText('Toast.OpenedNewSketch');
       this.props.newProject();
     } else if (warnIfUnsavedChanges && warnIfUnsavedChanges()) {
       this.props.showToast(1500);
-      this.props.setToastText('Opened new sketch.');
+      this.props.setToastText('Toast.OpenedNewSketch');
       this.props.newProject();
     }
     this.setDropdown('none');
@@ -172,7 +172,7 @@ class Nav extends React.PureComponent {
   handleLangSelection(event) {
     i18next.changeLanguage(event.target.value);
     this.props.showToast(1500);
-    this.props.setToastText('LangChange');
+    this.props.setToastText('Toast.LangChange');
     this.setDropdown('none');
   }
 
@@ -271,7 +271,7 @@ class Nav extends React.PureComponent {
               }
             }}
           >
-            <span className="nav__item-header">{this.props.t('File')}</span>
+            <span className="nav__item-header">{this.props.t('Nav.File')}</span>
             <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
@@ -281,7 +281,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForFile}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('New')}
+                {this.props.t('Nav.File_DropDown.New')}
               </button>
             </li>
             { getConfig('LOGIN_ENABLED') && (!this.props.project.owner || this.isUserOwner()) &&
@@ -291,7 +291,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForFile}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('Save')}
+                {this.props.t('Nav.File_DropDown.Save')}
                 <span className="nav__keyboard-shortcut">{metaKeyName}+S</span>
               </button>
             </li> }
@@ -302,7 +302,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForFile}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('Duplicate')}
+                {this.props.t('Nav.File_DropDown.Duplicate')}
               </button>
             </li> }
             { this.props.project.id &&
@@ -312,7 +312,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForFile}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('Share')}
+                {this.props.t('Nav.File_DropDown.Share')}
               </button>
             </li> }
             { this.props.project.id &&
@@ -322,7 +322,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForFile}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('Download')}
+                {this.props.t('Nav.File_DropDown.Download')}
               </button>
             </li> }
             { this.props.user.authenticated &&
@@ -333,7 +333,7 @@ class Nav extends React.PureComponent {
                 onBlur={this.handleBlur}
                 onClick={this.setDropdownForNone}
               >
-                {this.props.t('Open')}
+                {this.props.t('Nav.File_DropDown.Open')}
               </Link>
             </li> }
             {getConfig('UI_COLLECTIONS_ENABLED') &&
@@ -346,7 +346,7 @@ class Nav extends React.PureComponent {
                   onBlur={this.handleBlur}
                   onClick={this.setDropdownForNone}
                 >
-                  {this.props.t('AddToCollection')}
+                  {this.props.t('Nav.File_DropDown.AddToCollection')}
                 </Link>
               </li>}
             { getConfig('EXAMPLES_ENABLED') &&
@@ -357,7 +357,7 @@ class Nav extends React.PureComponent {
                 onBlur={this.handleBlur}
                 onClick={this.setDropdownForNone}
               >
-                {this.props.t('Examples')}
+                {this.props.t('Nav.File_DropDown.Examples')}
               </Link>
             </li> }
           </ul>
@@ -373,7 +373,7 @@ class Nav extends React.PureComponent {
               }
             }}
           >
-            <span className="nav__item-header">{this.props.t('Edit')}</span>
+            <span className="nav__item-header">{this.props.t('Nav.Edit')}</span>
             <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown" >
@@ -386,7 +386,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForEdit}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('TidyCode')}
+                {this.props.t('Nav.Edit_DropDown.TidyCode')}
                 <span className="nav__keyboard-shortcut">{'\u21E7'}+Tab</span>
               </button>
             </li>
@@ -396,7 +396,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForEdit}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('Find')}
+                {this.props.t('Nav.Edit_DropDown.Find')}
                 <span className="nav__keyboard-shortcut">{metaKeyName}+F</span>
               </button>
             </li>
@@ -406,7 +406,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForEdit}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('FindNext')}
+                {this.props.t('Nav.Edit_DropDown.FindNext')}
                 <span className="nav__keyboard-shortcut">{metaKeyName}+G</span>
               </button>
             </li>
@@ -416,7 +416,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForEdit}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('FindPrevious')}
+                {this.props.t('Nav.Edit_DropDown.FindPrevious')}
                 <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+G</span>
               </button>
             </li>
@@ -433,7 +433,7 @@ class Nav extends React.PureComponent {
               }
             }}
           >
-            <span className="nav__item-header">{this.props.t('Sketch')}</span>
+            <span className="nav__item-header">{this.props.t('Nav.Sketch')}</span>
             <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
@@ -443,7 +443,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForSketch}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('AddFile')}
+                {this.props.t('Nav.Sketch_DropDown.AddFile')}
               </button>
             </li>
             <li className="nav__dropdown-item">
@@ -452,7 +452,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForSketch}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('AddFolder')}
+                {this.props.t('Nav.Sketch_DropDown.AddFolder')}
               </button>
             </li>
             <li className="nav__dropdown-item">
@@ -461,7 +461,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForSketch}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('Run')}
+                {this.props.t('Nav.Sketch_DropDown.Run')}
                 <span className="nav__keyboard-shortcut">{metaKeyName}+Enter</span>
               </button>
             </li>
@@ -471,7 +471,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForSketch}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('Stop')}
+                {this.props.t('Nav.Sketch_DropDown.Stop')}
                 <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+Enter</span>
               </button>
             </li>
@@ -508,7 +508,7 @@ class Nav extends React.PureComponent {
               }
             }}
           >
-            <span className="nav__item-header">{this.props.t('Help')}</span>
+            <span className="nav__item-header">{this.props.t('Nav.Help')}</span>
             <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
@@ -518,7 +518,7 @@ class Nav extends React.PureComponent {
                 onBlur={this.handleBlur}
                 onClick={this.handleKeyboardShortcuts}
               >
-                {this.props.t('KeyboardShortcuts')}
+                {this.props.t('Nav.Help_DropDown.KeyboardShortcuts')}
               </button>
             </li>
             <li className="nav__dropdown-item">
@@ -529,7 +529,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForHelp}
                 onBlur={this.handleBlur}
                 onClick={this.setDropdownForNone}
-              >{this.props.t('Reference')}
+              >{this.props.t('Nav.Help_DropDown.Reference')}
               </a>
             </li>
             <li className="nav__dropdown-item">
@@ -539,7 +539,7 @@ class Nav extends React.PureComponent {
                 onBlur={this.handleBlur}
                 onClick={this.setDropdownForNone}
               >
-                {this.props.t('About')}
+                {this.props.t('Nav.Help_DropDown.About')}
               </Link>
             </li>
           </ul>
@@ -562,7 +562,7 @@ class Nav extends React.PureComponent {
               }
             }}
           >
-            <span className="nav__item-header"> {this.props.t('Lang')}</span>
+            <span className="nav__item-header"> {this.props.t('Nav.Lang')}</span>
             <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
@@ -608,13 +608,13 @@ class Nav extends React.PureComponent {
       <ul className="nav__items-right" title="user-menu">
         <li className="nav__item">
           <Link to="/login" className="nav__auth-button">
-            <span className="nav__item-header">{this.props.t('Login')}</span>
+            <span className="nav__item-header">{this.props.t('Nav.Login.Login')}</span>
           </Link>
         </li>
-        <span className="nav__item-or">{this.props.t('LoginOr')}</span>
+        <span className="nav__item-or">{this.props.t('Nav.Login.LoginOr')}</span>
         <li className="nav__item">
           <Link to="/signup" className="nav__auth-button">
-            <span className="nav__item-header">{this.props.t('SignUp')}</span>
+            <span className="nav__item-header">{this.props.t('Nav.Login.SignUp')}</span>
           </Link>
         </li>
       </ul>
@@ -625,7 +625,7 @@ class Nav extends React.PureComponent {
     return (
       <ul className="nav__items-right" title="user-menu">
         <li className="nav__item">
-          <span>{this.props.t('Hello')}, {this.props.user.username}!</span>
+          <span>{this.props.t('Nav.Auth.Hello')}, {this.props.user.username}!</span>
         </li>
         <span className="nav__item-spacer">|</span>
         <li className={navDropdownState.account}>
@@ -640,7 +640,7 @@ class Nav extends React.PureComponent {
               }
             }}
           >
-            {this.props.t('MyAccount')}
+            {this.props.t('Nav.Auth.MyAccount')}
             <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
@@ -651,7 +651,7 @@ class Nav extends React.PureComponent {
                 onBlur={this.handleBlur}
                 onClick={this.setDropdownForNone}
               >
-                {this.props.t('MySketches')}
+                {this.props.t('Nav.Auth.MySketches')}
               </Link>
             </li>
             {getConfig('UI_COLLECTIONS_ENABLED') &&
@@ -662,7 +662,7 @@ class Nav extends React.PureComponent {
                   onBlur={this.handleBlur}
                   onClick={this.setDropdownForNone}
                 >
-                  {this.props.t('MyCollections')}
+                  {this.props.t('Nav.Auth.MyCollections')}
                 </Link>
               </li>
             }
@@ -673,7 +673,7 @@ class Nav extends React.PureComponent {
                 onBlur={this.handleBlur}
                 onClick={this.setDropdownForNone}
               >
-                {this.props.t('MyAssets')}
+                {this.props.t('Nav.Auth.MyAssets')}
               </Link>
             </li>
             <li className="nav__dropdown-item">
@@ -683,7 +683,7 @@ class Nav extends React.PureComponent {
                 onBlur={this.handleBlur}
                 onClick={this.setDropdownForNone}
               >
-                {this.props.t('Settings')}
+                {this.props.t('Preferences.Settings')}
               </Link>
             </li>
             <li className="nav__dropdown-item">
@@ -692,7 +692,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForAccount}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('LogOut')}
+                {this.props.t('Nav.Auth.LogOut')}
               </button>
             </li>
           </ul>
@@ -842,5 +842,5 @@ const mapDispatchToProps = {
   setAllAccessibleOutput
 };
 
-export default withTranslation('WebEditor')(withRouter(connect(mapStateToProps, mapDispatchToProps)(Nav)));
+export default withTranslation()(withRouter(connect(mapStateToProps, mapDispatchToProps)(Nav)));
 export { Nav as NavComponent };
diff --git a/client/i18n.js b/client/i18n.js
index 3cdf5991cd..66131bab04 100644
--- a/client/i18n.js
+++ b/client/i18n.js
@@ -16,11 +16,10 @@ const options = {
 
 i18n
   .use(initReactI18next) // pass the i18n instance to react-i18next.
-  .use(LanguageDetector)// to detect the language from currentBrowser
+  // .use(LanguageDetector)// to detect the language from currentBrowser
   .use(Backend) // to fetch the data from server
   .init({
     lng: 'en-US',
-    defaultNS: 'WebEditor',
     fallbackLng, // if user computer language is not on the list of available languages, than we will be using the fallback language specified earlier
     debug: false,
     backend: options,
diff --git a/client/modules/IDE/components/About.jsx b/client/modules/IDE/components/About.jsx
index 81bca172bd..94e30339e1 100644
--- a/client/modules/IDE/components/About.jsx
+++ b/client/modules/IDE/components/About.jsx
@@ -10,7 +10,7 @@ function About(props) {
   return (
     <div className="about__content">
       <Helmet>
-        <title>p5.js Web Editor | About </title>
+        <title>p5.js Web Editor | {t('About.Title')} </title>
       </Helmet>
       <div className="about__content-column">
         <SquareLogoIcon className="about__logo" role="img" aria-label="p5.js Logo" focusable="false" />
@@ -26,7 +26,7 @@ function About(props) {
         </p>  */}
       </div>
       <div className="about__content-column">
-        <h3 className="about__content-column-title">{t('NewP5')}</h3>
+        <h3 className="about__content-column-title">{t('About.About_Modal.NewP5')}</h3>
         <p className="about__content-column-list">
           <a
             href="https://p5js.org/examples/"
@@ -34,7 +34,7 @@ function About(props) {
             rel="noopener noreferrer"
           >
             <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
-            {t('Examples')}
+            {t('About.About_Modal.Examples')}
           </a>
         </p>
         <p className="about__content-column-list">
@@ -44,12 +44,12 @@ function About(props) {
             rel="noopener noreferrer"
           >
             <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
-            {t('Learn')}
+            {t('About.About_Modal.Learn')}
           </a>
         </p>
       </div>
       <div className="about__content-column">
-        <h3 className="about__content-column-title">{t('Resources')}</h3>
+        <h3 className="about__content-column-title">{t('About.About_Modal.Resources')}</h3>
         <p className="about__content-column-list">
           <a
             href="https://p5js.org/libraries/"
@@ -57,7 +57,7 @@ function About(props) {
             rel="noopener noreferrer"
           >
             <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
-            {t('Libraries')}
+            {t('About.About_Modal.Libraries')}
           </a>
         </p>
         <p className="about__content-column-list">
@@ -67,7 +67,7 @@ function About(props) {
             rel="noopener noreferrer"
           >
             <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
-            {t('Reference')}
+            {t('Nav.Help_DropDown.Reference')}
           </a>
         </p>
         <p className="about__content-column-list">
@@ -77,7 +77,7 @@ function About(props) {
             rel="noopener noreferrer"
           >
             <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
-            {t('Forum')}
+            {t('About.About_Modal.Forum')}
           </a>
         </p>
       </div>
@@ -87,7 +87,7 @@ function About(props) {
             href="https://github.com/processing/p5.js-web-editor"
             target="_blank"
             rel="noopener noreferrer"
-          >{t('Contribute')}
+          >{t('About.About_Modal.Contribute')}
           </a>
         </p>
         <p className="about__footer-list">
@@ -95,7 +95,7 @@ function About(props) {
             href="https://github.com/processing/p5.js-web-editor/issues/new"
             target="_blank"
             rel="noopener noreferrer"
-          >{t('Report')}
+          >{t('About.About_Modal.Report')}
           </a>
         </p>
         <p className="about__footer-list">
diff --git a/client/modules/IDE/components/KeyboardShortcutModal.jsx b/client/modules/IDE/components/KeyboardShortcutModal.jsx
index b1acadbb0d..6d5b25c16e 100644
--- a/client/modules/IDE/components/KeyboardShortcutModal.jsx
+++ b/client/modules/IDE/components/KeyboardShortcutModal.jsx
@@ -6,50 +6,50 @@ function KeyboardShortcutModal() {
   const { t } = useTranslation();
   return (
     <div className="keyboard-shortcuts">
-      <h3 className="keyboard-shortcuts__title">{t('CodeEditing')}</h3>
+      <h3 className="keyboard-shortcuts__title">{t('KeyboardShortcuts.CodeEditing.CodeEditing')}</h3>
       <p className="keyboard-shortcuts__description">
-        {t('Code editing keyboard shortcuts follow')} <a href="https://shortcuts.design/toolspage-sublimetext.html" target="_blank" rel="noopener noreferrer">{t('Sublime Text shortcuts')}</a>.
+        {t('KeyboardShortcuts.ShortcutsFollow')} <a href="https://shortcuts.design/toolspage-sublimetext.html" target="_blank" rel="noopener noreferrer">{t('KeyboardShortcuts.SublimeText')}</a>.
       </p>
       <ul className="keyboard-shortcuts__list">
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">{'\u21E7'} + Tab</span>
-          <span>{t('Tidy')}</span>
+          <span>{t('KeyboardShortcuts.CodeEditing.Tidy')}</span>
         </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
             {metaKeyName} + F
           </span>
-          <span>{t('FindText')}</span>
+          <span>{t('KeyboardShortcuts.CodeEditing.FindText')}</span>
         </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
             {metaKeyName} + G
           </span>
-          <span>{t('FindNextTextMatch')}</span>
+          <span>{t('KeyboardShortcuts.CodeEditing.FindNextTextMatch')}</span>
         </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
             {metaKeyName} + {'\u21E7'} + G
           </span>
-          <span>{t('FindPreviousTextMatch')}</span>
+          <span>{t('KeyboardShortcuts.CodeEditing.FindPreviousTextMatch')}</span>
         </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
             {metaKeyName} + [
           </span>
-          <span>{t('IndentCodeLeft')}</span>
+          <span>{t('KeyboardShortcuts.CodeEditing.IndentCodeLeft')}</span>
         </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
             {metaKeyName} + ]
           </span>
-          <span>{t('IndentCodeRight')}</span>
+          <span>{t('KeyboardShortcuts.CodeEditing.IndentCodeRight')}</span>
         </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
             {metaKeyName} + /
           </span>
-          <span>{t('CommentLine')}</span>
+          <span>{t('KeyboardShortcuts.CodeEditing.CommentLine')}</span>
         </li>
       </ul>
       <h3 className="keyboard-shortcuts__title">General</h3>
@@ -58,31 +58,31 @@ function KeyboardShortcutModal() {
           <span className="keyboard-shortcut__command">
             {metaKeyName} + S
           </span>
-          <span>{t('Save')}</span>
+          <span>{t('Nav.File.Save')}</span>
         </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
             {metaKeyName} + Enter
           </span>
-          <span>{t('StartSketch')}</span>
+          <span>{t('KeyboardShortcuts.General.StartSketch')}</span>
         </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
             {metaKeyName} + {'\u21E7'} + Enter
           </span>
-          <span>{t('StopSketch')}</span>
+          <span>{t('KeyboardShortcuts.General.StopSketch')}</span>
         </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
             {metaKeyName} + {'\u21E7'} + 1
           </span>
-          <span>{t('TurnOnAccessibleOutput')}</span>
+          <span>{t('KeyboardShortcuts.General.TurnOnAccessibleOutput')}</span>
         </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
             {metaKeyName} + {'\u21E7'} + 2
           </span>
-          <span>{t('TurnOffAccessibleOutput')}</span>
+          <span>{t('KeyboardShortcuts.General.TurnOffAccessibleOutput')}</span>
         </li>
       </ul>
     </div>
diff --git a/client/modules/IDE/components/Preferences/index.jsx b/client/modules/IDE/components/Preferences/index.jsx
index 5fd5147da5..b58abf7eab 100644
--- a/client/modules/IDE/components/Preferences/index.jsx
+++ b/client/modules/IDE/components/Preferences/index.jsx
@@ -99,13 +99,13 @@ class Preferences extends React.Component {
         <Tabs>
           <TabList>
             <div className="tabs__titles">
-              <Tab><h4 className="tabs__title">{this.props.t('GeneralSettings')}</h4></Tab>
-              <Tab><h4 className="tabs__title">{this.props.t('Accessibility')}</h4></Tab>
+              <Tab><h4 className="tabs__title">{this.props.t('Preferences.Option.GeneralSettings')}</h4></Tab>
+              <Tab><h4 className="tabs__title">{this.props.t('Preferences.Option.Accessibility')}</h4></Tab>
             </div>
           </TabList>
           <TabPanel>
             <div className="preference">
-              <h4 className="preference__title">{this.props.t('Theme')}</h4>
+              <h4 className="preference__title">{this.props.t('Preferences.Option.Theme')}</h4>
               <div className="preference__options">
                 <input
                   type="radio"
@@ -117,7 +117,7 @@ class Preferences extends React.Component {
                   value="light"
                   checked={this.props.theme === 'light'}
                 />
-                <label htmlFor="light-theme-on" className="preference__option">{this.props.t('Light')}</label>
+                <label htmlFor="light-theme-on" className="preference__option">{this.props.t('Preferences.Option.Light')}</label>
                 <input
                   type="radio"
                   onChange={() => this.props.setTheme('dark')}
@@ -128,7 +128,7 @@ class Preferences extends React.Component {
                   value="dark"
                   checked={this.props.theme === 'dark'}
                 />
-                <label htmlFor="dark-theme-on" className="preference__option">{this.props.t('Dark')}</label>
+                <label htmlFor="dark-theme-on" className="preference__option">{this.props.t('Preferences.Option.Dark')}</label>
                 <input
                   type="radio"
                   onChange={() => this.props.setTheme('contrast')}
@@ -139,11 +139,11 @@ class Preferences extends React.Component {
                   value="contrast"
                   checked={this.props.theme === 'contrast'}
                 />
-                <label htmlFor="high-contrast-theme-on" className="preference__option">{this.props.t('HighContrast')}</label>
+                <label htmlFor="high-contrast-theme-on" className="preference__option">{this.props.t('Preferences.Option.HighContrast')}</label>
               </div>
             </div>
             <div className="preference">
-              <h4 className="preference__title">{this.props.t('TextSize')}</h4>
+              <h4 className="preference__title">{this.props.t('Preferences.Option.TextSize')}</h4>
               <button
                 className="preference__minus-button"
                 onClick={this.decreaseFontSize}
@@ -151,7 +151,7 @@ class Preferences extends React.Component {
                 disabled={this.state.fontSize <= 8}
               >
                 <MinusIcon focusable="false" aria-hidden="true" />
-                <h6 className="preference__label">{this.props.t('Decrease')}</h6>
+                <h6 className="preference__label">{this.props.t('Preferences.Option.Decrease')}</h6>
               </button>
               <form onSubmit={this.onFontInputSubmit}>
                 <input
@@ -172,11 +172,11 @@ class Preferences extends React.Component {
                 disabled={this.state.fontSize >= 36}
               >
                 <PlusIcon focusable="false" aria-hidden="true" />
-                <h6 className="preference__label">{this.props.t('Increase')}</h6>
+                <h6 className="preference__label">{this.props.t('Preferences.Option.Increase')}</h6>
               </button>
             </div>
             <div className="preference">
-              <h4 className="preference__title">{this.props.t('Autosave')}</h4>
+              <h4 className="preference__title">{this.props.t('Preferences.Option.Autosave')}</h4>
               <div className="preference__options">
                 <input
                   type="radio"
@@ -188,7 +188,7 @@ class Preferences extends React.Component {
                   value="On"
                   checked={this.props.autosave}
                 />
-                <label htmlFor="autosave-on" className="preference__option">{this.props.t('On')}</label>
+                <label htmlFor="autosave-on" className="preference__option">{this.props.t('Preferences.Option.On')}</label>
                 <input
                   type="radio"
                   onChange={() => this.props.setAutosave(false)}
@@ -199,11 +199,11 @@ class Preferences extends React.Component {
                   value="Off"
                   checked={!this.props.autosave}
                 />
-                <label htmlFor="autosave-off" className="preference__option">{this.props.t('Off')}</label>
+                <label htmlFor="autosave-off" className="preference__option">{this.props.t('Preferences.Option.Off')}</label>
               </div>
             </div>
             <div className="preference">
-              <h4 className="preference__title">{this.props.t('WordWrap')}</h4>
+              <h4 className="preference__title">{this.props.t('Preferences.Option.WordWrap')}</h4>
               <div className="preference__options">
                 <input
                   type="radio"
@@ -215,7 +215,7 @@ class Preferences extends React.Component {
                   value="On"
                   checked={this.props.linewrap}
                 />
-                <label htmlFor="linewrap-on" className="preference__option">{this.props.t('On')}</label>
+                <label htmlFor="linewrap-on" className="preference__option">{this.props.t('Preferences.Option.On')}</label>
                 <input
                   type="radio"
                   onChange={() => this.props.setLinewrap(false)}
@@ -226,13 +226,13 @@ class Preferences extends React.Component {
                   value="Off"
                   checked={!this.props.linewrap}
                 />
-                <label htmlFor="linewrap-off" className="preference__option">{this.props.t('Off')}</label>
+                <label htmlFor="linewrap-off" className="preference__option">{this.props.t('Preferences.Option.Off')}</label>
               </div>
             </div>
           </TabPanel>
           <TabPanel>
             <div className="preference">
-              <h4 className="preference__title">{this.props.t('LineNumbers')}</h4>
+              <h4 className="preference__title">{this.props.t('Preferences.Option.LineNumbers')}</h4>
               <div className="preference__options">
                 <input
                   type="radio"
@@ -244,7 +244,7 @@ class Preferences extends React.Component {
                   value="On"
                   checked={this.props.lineNumbers}
                 />
-                <label htmlFor="line-numbers-on" className="preference__option">{this.props.t('On')}</label>
+                <label htmlFor="line-numbers-on" className="preference__option">{this.props.t('Preferences.Option.On')}</label>
                 <input
                   type="radio"
                   onChange={() => this.props.setLineNumbers(false)}
@@ -255,11 +255,11 @@ class Preferences extends React.Component {
                   value="Off"
                   checked={!this.props.lineNumbers}
                 />
-                <label htmlFor="line-numbers-off" className="preference__option">{this.props.t('Off')}</label>
+                <label htmlFor="line-numbers-off" className="preference__option">{this.props.t('Preferences.Option.Off')}</label>
               </div>
             </div>
             <div className="preference">
-              <h4 className="preference__title">{this.props.t('LintWarningSound')}</h4>
+              <h4 className="preference__title">{this.props.t('Preferences.Option.LintWarningSound')}</h4>
               <div className="preference__options">
                 <input
                   type="radio"
@@ -271,7 +271,7 @@ class Preferences extends React.Component {
                   value="On"
                   checked={this.props.lintWarning}
                 />
-                <label htmlFor="lint-warning-on" className="preference__option">{this.props.t('On')}</label>
+                <label htmlFor="lint-warning-on" className="preference__option">{this.props.t('Preferences.Option.On')}</label>
                 <input
                   type="radio"
                   onChange={() => this.props.setLintWarning(false)}
@@ -282,19 +282,19 @@ class Preferences extends React.Component {
                   value="Off"
                   checked={!this.props.lintWarning}
                 />
-                <label htmlFor="lint-warning-off" className="preference__option">{this.props.t('Off')}</label>
+                <label htmlFor="lint-warning-off" className="preference__option">{this.props.t('Preferences.Option.Off')}</label>
                 <button
                   className="preference__preview-button"
                   onClick={() => beep.play()}
                   aria-label="preview sound"
                 >
-                  {this.props.t('PreviewSound')}
+                  {this.props.t('Preferences.Option.PreviewSound')}
                 </button>
               </div>
             </div>
             <div className="preference">
-              <h4 className="preference__title">{this.props.t('AccessibleTextBasedCanvas')}</h4>
-              <h6 className="preference__subtitle">{this.props.t('UsedScreenReader')}</h6>
+              <h4 className="preference__title">{this.props.t('Preferences.Option.AccessibleTextBasedCanvas')}</h4>
+              <h6 className="preference__subtitle">{this.props.t('Preferences.Option.UsedScreenReader')}</h6>
 
               <div className="preference__options">
                 <input
@@ -308,7 +308,7 @@ class Preferences extends React.Component {
                   value="On"
                   checked={(this.props.textOutput)}
                 />
-                <label htmlFor="text-output-on" className="preference__option preference__canvas">{this.props.t('PlainText')}</label>
+                <label htmlFor="text-output-on" className="preference__option preference__canvas">{this.props.t('Preferences.Option.PlainText')}</label>
                 <input
                   type="checkbox"
                   onChange={(event) => {
@@ -320,7 +320,7 @@ class Preferences extends React.Component {
                   value="On"
                   checked={(this.props.gridOutput)}
                 />
-                <label htmlFor="table-output-on" className="preference__option preference__canvas">{this.props.t('TableText')}</label>
+                <label htmlFor="table-output-on" className="preference__option preference__canvas">{this.props.t('Preferences.Option.TableText')}</label>
                 <input
                   type="checkbox"
                   onChange={(event) => {
@@ -332,7 +332,7 @@ class Preferences extends React.Component {
                   value="On"
                   checked={(this.props.soundOutput)}
                 />
-                <label htmlFor="sound-output-on" className="preference__option preference__canvas">{this.props.t('Sound')}</label>
+                <label htmlFor="sound-output-on" className="preference__option preference__canvas">{this.props.t('Preferences.Option.Sound')}</label>
               </div>
             </div>
           </TabPanel>
@@ -364,4 +364,4 @@ Preferences.propTypes = {
   t: PropTypes.func.isRequired,
 };
 
-export default withTranslation('WebEditor')(Preferences);
+export default withTranslation()(Preferences);
diff --git a/client/modules/IDE/components/Toast.jsx b/client/modules/IDE/components/Toast.jsx
index 5aaa3f70bd..f3cc0fc76c 100644
--- a/client/modules/IDE/components/Toast.jsx
+++ b/client/modules/IDE/components/Toast.jsx
@@ -8,7 +8,7 @@ import * as ToastActions from '../actions/toast';
 import ExitIcon from '../../../images/exit.svg';
 
 function Toast(props) {
-  const { t } = useTranslation('WebEditor');
+  const { t } = useTranslation();
   return (
     <section className="toast">
       <p>
diff --git a/client/modules/IDE/components/Toolbar.jsx b/client/modules/IDE/components/Toolbar.jsx
index 401a7e7666..5a126b3534 100644
--- a/client/modules/IDE/components/Toolbar.jsx
+++ b/client/modules/IDE/components/Toolbar.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import classNames from 'classnames';
+import { withTranslation } from 'react-i18next';
 import * as IDEActions from '../actions/ide';
 import * as preferenceActions from '../actions/preferences';
 import * as projectActions from '../actions/project';
@@ -115,7 +116,7 @@ class Toolbar extends React.Component {
             }}
           />
           <label htmlFor="autorefresh" className="toolbar__autorefresh-label">
-            Auto-refresh
+            {this.props.t('Toolbar.Auto-refresh')}
           </label>
         </div>
         <div className={nameContainerClass}>
@@ -197,7 +198,8 @@ Toolbar.propTypes = {
   startSketch: PropTypes.func.isRequired,
   startAccessibleSketch: PropTypes.func.isRequired,
   saveProject: PropTypes.func.isRequired,
-  currentUser: PropTypes.string
+  currentUser: PropTypes.string,
+  t: PropTypes.func.isRequired
 };
 
 Toolbar.defaultProps = {
@@ -224,4 +226,5 @@ const mapDispatchToProps = {
 };
 
 export const ToolbarComponent = Toolbar;
-export default connect(mapStateToProps, mapDispatchToProps)(Toolbar);
+// export default connect(mapStateToProps, mapDispatchToProps)(Toolbar);
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(Toolbar));
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index b28e505f7f..148fa05034 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -389,7 +389,7 @@ class IDEView extends React.Component {
         }
         { this.props.location.pathname === '/about' &&
           <Overlay
-            title={this.props.t('About')}
+            title={this.props.t('About.Title')}
             previousPath={this.props.ide.previousPath}
             ariaLabel="about"
           >
@@ -435,7 +435,7 @@ class IDEView extends React.Component {
         }
         {this.props.ide.keyboardShortcutVisible &&
           <Overlay
-            title={this.props.t('KeyboardShortcuts')}
+            title={this.props.t('KeyboardShortcuts.Title')}
             ariaLabel="keyboard shortcuts"
             closeOverlay={this.props.closeKeyboardShortcutModal}
           >
@@ -640,4 +640,5 @@ function mapDispatchToProps(dispatch) {
   );
 }
 
-export default withTranslation('WebEditor')(withRouter(connect(mapStateToProps, mapDispatchToProps)(IDEView)));
+
+export default withTranslation()(withRouter(connect(mapStateToProps, mapDispatchToProps)(IDEView)));
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index b696d0db92..a95ef45998 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -1,116 +1,160 @@
 {
-    "Contribute": "Contribute",
-    "NewP5": "New to p5.js?",
-    "Report": "Report a bug",
-    "Learn": "Learn",
-    "About": "About",
-    "Resources": "Resources",
-    "Libraries": "Libraries",
-    "Forum": "Forum",
+  "Nav": {
     "File": "File",
-    "New": "New",
-    "Save": "Save",
-    "Share": "Share",
-    "Duplicate": "Duplicate",
-    "Examples": "Examples",
+    "File_DropDown": {
+      "New": "New",
+      "Save": "Save",
+      "Share": "Share",
+      "Duplicate": "Duplicate",
+      "Open": "Open",
+      "Download": "Download",
+      "AddToCollection": "Add to Collection",
+      "Examples": "Examples"
+    },
     "Edit": "Edit",
-    "TidyCode": "Tidy Code",
-    "Find": "Find",
-    "AddToCollection": "Add to Collection",
-    "FindNext": "Find Next",
-    "FindPrevious": "Find Previous",
+    "Edit_DropDown": {
+      "TidyCode": "Tidy Code",
+      "Find": "Find",
+      "FindNext": "Find Next",
+      "FindPrevious": "Find Previous"
+    },
     "Sketch": "Sketch",
-    "AddFile": "Add File",
-    "AddFolder": "Add Folder",
-    "Run": "Run",
-    "Stop": "Stop",
+    "Sketch_DropDown": {
+      "AddFile": "Add File",
+      "AddFolder": "Add Folder",
+      "Run": "Run",
+      "Stop": "Stop"
+    },
     "Help": "Help",
-    "KeyboardShortcuts": "Keyboard Shortcuts",
-    "Reference": "Reference",
-    "Tidy": "Tidy",
+    "Help_DropDown": {
+      "KeyboardShortcuts": "Keyboard Shortcuts",
+      "Reference": "Reference",
+      "About": "About"
+    },
     "Lang": "Language",
-    "FindNextMatch": "Find Next Match",
-    "FindPrevMatch": "Find Previous Match",
-    "IndentCodeLeft": "Indent Code Left",
-    "IndentCodeRight": "Indent Code Right",
-    "CommentLine": "Comment Line",
-    "StartSketch": "Start Sketch",
-    "StopSketch": "StopSketch",
-    "TurnOnAccessibleOutput": "Turn On Accessible Output",
-    "TurnOffAccessibleOutput": "Turn Off Accessible Output",
-    "ToogleSidebar": "Toogle Sidebar",
-    "ToogleConsole": "Toogle Console",
+    "Login": {
+      "Login": "Log in",
+      "LoginOr": "or",
+      "SignUp": "Sign up",
+      "Email": "email",
+      "Username": "username",
+      "LoginGithub": "Login with Github",
+      "LoginGoogle": "Login with Google",
+      "DontHaveAccount": "Don't have an account?",
+      "ForgotPassword": "Forgot your password?",
+      "ResetPassword": "Reset your password"
+    },
+    "Auth": {
+      "Welcome": "Welcome",
+      "Hello": "Hello",
+      "MyAccount": "My Account",
+      "My": "My",
+      "MySketches": "My Sketches",
+      "MyCollections": "My Collections",
+      "Asset": "Asset",
+      "MyAssets": "My Assets",
+      "LogOut": "Log Out"
+    }
+  },
+  "About": {
+    "Title": "About",
+    "About_Modal": {
+      "Contribute": "Contribute",
+      "NewP5": "New to p5.js?",
+      "Report": "Report a bug",
+      "Learn": "Learn",
+      "Resources": "Resources",
+      "Libraries": "Libraries",
+      "Forum": "Forum",
+      "Examples": "Examples"
+    }
+  },
+  "Toast": {
+    "OpenedNewSketch": "Opened new sketch.",
+    "SketchSaved": "Sketch saved.",
+    "AutosaveEnabled": "Autosave enabled.",
+    "LangChange": "Language changed"
+  },
+  "Toolbar": {
     "Preview": "Preview",
-    "Auto-refresh": "Auto-refresh",
-    "Console": "Console",
+    "Auto-refresh": "Auto-refresh"
+  },
+  "Console": {
+    "Clear": "Clear",
+    "Console": "Console"
+  },
+  "Preferences": {
     "Settings": "Settings",
-    "GeneralSettings": "General settings",
-    "Theme": "Theme",
-    "Light": "Light",
-    "Dark": "Dark",
-    "HighContrast": "High Contrast",
-    "TextSize": "Text Size",
-    "Decrease": "Decrease",
-    "Increase": "Increase",
-    "IndentationAmount": "Indentation amount",
-    "Autosave": "Autosave",
-    "On": "On",
-    "Off": "Off",
-    "SketchSettings": "Sketch Settings",
-    "SecurityProtocol": "Security Protocol",
-    "ServeOverHTTPS": "Serve over HTTPS",
-    "Accessibility": "Accessibility",
-    "LintWarningSound": "Lint warning sound",
-    "PreviewSound": "Preview sound",
-    "AccessibleTextBasedCanvas": "Accessible text-based canvas",
-    "UsedScreenReader": "Used with screen reader",
-    "PlainText": "Plain-text",
-    "TableText": "Table-text",
-    "Sound": "Sound",
-    "WordWrap": "Word Wrap",
-    "LineNumbers": "Line numbers",
-    "LangChange": "Language changed",
-    "Welcome": "Welcome",
-    "Login": "Log in",
-    "LoginOr": "or",
-    "SignUp": "Sign up",
-    "Email": "email",
-    "Username": "username",
-    "LoginGithub": "Login with Github",
-    "LoginGoogle": "Login with Google",
-    "DontHaveAccount": "Don't have an account?",
-    "ForgotPassword": "Forgot your password?",
-    "ResetPassword": "Reset your password",
+    "Option": {
+      "GeneralSettings": "General settings",
+      "Accessibility": "Accessibility",
+      "Theme": "Theme",
+      "Light": "Light",
+      "Dark": "Dark",
+      "HighContrast": "High Contrast",
+      "TextSize": "Text Size",
+      "Decrease": "Decrease",
+      "Increase": "Increase",
+      "IndentationAmount": "Indentation amount",
+      "Autosave": "Autosave",
+      "On": "On",
+      "Off": "Off",
+      "WordWrap": "Word Wrap",
+      "LintWarningSound": "Lint warning sound",
+      "PreviewSound": "Preview sound",
+      "AccessibleTextBasedCanvas": "Accessible text-based canvas",
+      "UsedScreenReader": "Used with screen reader",
+      "PlainText": "Plain-text",
+      "TableText": "Table-text",
+      "Sound": "Sound",
+      "LineNumbers": "Line numbers"
+    }
+  },
+  "KeyboardShortcuts": {
+    "Title": " Keyboard Shortcuts",
+    "ShortcutsFollow": "Code editing keyboard shortcuts follow",
+    "SublimeText": "Sublime Text shortcuts",
+    "CodeEditing": {
+      "Tidy": "Tidy",
+      "FindText": "Find Text",
+      "FindNextMatch": "Find Next Match",
+      "FindPrevMatch": "Find Previous Match",
+      "IndentCodeLeft": "Indent Code Left",
+      "IndentCodeRight": "Indent Code Right",
+      "CommentLine": "Comment Line",
+      "FindNextTextMatch": "Find Next Text Match",
+      "FindPreviousTextMatch": "Find Previous Text Match",
+      "CodeEditing": "Code Editing"
+    },
+    "General": {
+      "StartSketch": "Start Sketch",
+      "StopSketch": "StopSketch",
+      "TurnOnAccessibleOutput": "Turn On Accessible Output",
+      "TurnOffAccessibleOutput": "Turn Off Accessible Output"
+    }
+  },
+  "Sidebar": {
+    "Create": "Create",
+    "EnterName": "enter a name",
+    "Add": "Add",
+    "Folder": "Folder"
+  },
+  "Common": {
     "BackEditor": "Back to Editor",
+    "ToogleSidebar": "Toogle Sidebar",
+    "ToogleConsole": "Toogle Console",
     "UsernameSplit": "User Name",
     "Password": "Password",
     "ConfirmPassword": "Confirm Password",
-    "OpenedNewSketch": "Opened new sketch.",
-    "Hello": "Hello",
-    "MyAccount": "My Account",
-    "My":"My",
-    "MySketches": "My Sketches",
-    "MyCollections": "My Collections",
-    "Asset": "Asset",
-    "MyAssets": "My Assets",
     "TitleAbout": "p5.js Web Editor | About",
-    "CodeEditing": "Code Editing",
     "Error": "Error",
     "In order to save": "In order to save",
     "you must be logged in": "you must be logged in",
     "Please": "please",
-    "Find in files": "Find in files",
-    "Create": "Create",
-    "enter a name": "enter a name",
-    "Add": "Add",
-    "Folder": "Folder",
-    "FindText": "Find Text",
-    "FindNextTextMatch": "Find Next Text Match",
-    "FindPreviousTextMatch": "Find Previous Text Match",
-    "Code editing keyboard shortcuts follow": "Code editing keyboard shortcuts follow",
-    "Sublime Text shortcuts": "Sublime Text shortcuts",
+    "FindInFiles": "Find in files",
     "WarningUnsavedChanges": "Are you sure you want to leave this page? You have unsaved changes.",
-    "LogOut": "Log Out"
-
+    "SketchSettings": "Sketch Settings",
+    "SecurityProtocol": "Security Protocol",
+    "ServeOverHTTPS": "Serve over HTTPS"
+  }
 }
-
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
index cd5276ecc2..c86c753903 100644
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@@ -1,113 +1,164 @@
 {
-    "Contribute": "Contribuir",
-    "NewP5": "¿Empezando con p5.js?",
-    "Report": "Reporta un error",
-    "Learn": "Aprende",
-    "About": "Acerca de",
-    "Resources": "Recursos",
-    "Libraries": "Bibliotecas",
-    "Forum": "Foro",
+  "Nav": {
     "File": "Archivo",
-    "New": "Nuevo",
-    "Save": "Guardar",
-    "Share": "Compartir",
-    "Duplicate": "Duplicar",
-    "Examples": "Ejemplos",
+    "File_DropDown": {
+      "New": "Nuevo",
+      "Save": "Guardar",
+      "Share": "Compartir",
+      "Duplicate": "Duplicar",
+      "Open": "Abrir",
+      "Download": "Descargar",
+      "AddToCollection": "Agregar a colección",
+      "Examples": "Ejemplos"
+    },
     "Edit": "Editar",
-    "TidyCode": "Ordenar código",
-    "Find": "Buscar",
-    "AddToCollection": "Agregar a colección",
-    "FindNext": "Buscar siguiente",
-    "FindPrevious": "Buscar anterior",
+    "Edit_DropDown": {
+      "TidyCode": "Ordenar código",
+      "Find": "Buscar",
+      "FindNext": "Buscar siguiente",
+      "FindPrevious": "Buscar anterior"
+    },
     "Sketch": "Bosquejo",
-    "AddFile": "Agregar archivo",
-    "AddFolder": "Agregar directorio",
-    "Run": "Ejecutar",
-    "Stop": "Detener",
+    "Sketch_DropDown": {
+      "AddFile": "Agregar archivo",
+      "AddFolder": "Agregar directorio",
+      "Run": "Ejecutar",
+      "Stop": "Detener"
+    },
     "Help": "Ayuda",
-    "KeyboardShortcuts": "Atajos",
-    "Reference": "Referencia",
-    "Tidy": "Ordenar",
+    "Help_DropDown": {
+      "KeyboardShortcuts": "Atajos",
+      "Reference": "Referencia",
+      "About": "Acerca de"
+    },
     "Lang": "Lenguaje",
-    "FindNextMatch": "Encontrar siguiente ocurrencia",
-    "FindPrevMatch": "Encontrar ocurrencia previa",
-    "IndentCodeLeft": "Indentar código a la izquierda",
-    "IndentCodeRight": "Indentar código a la derecha",
-    "CommentLine": "Comentar línea de código",
-    "StartSketch": "Iniciar bosquejo",
-    "StopSketch": "Detener bosquejo",
-    "TurnOnAccessibleOutput": "Activar salida accesible",
-    "TurnOffAccessibleOutput": "Desactivar salida accesible",
-    "ToogleSidebar": "Alternar barra de deslizamiento",
-    "ToogleConsole": "Alternar consola",
+    "Login": {
+      "Login": "Ingresa",
+      "LoginOr": "o",
+      "SignUp": "registráte",
+      "Email": "correo electrónico",
+      "Username": "nombre de usuario",
+      "LoginGithub": "Ingresa con Github",
+      "LoginGoogle": "Ingresa con Google",
+      "DontHaveAccount": "¿No tienes cuenta?",
+      "ForgotPassword": "¿Olvidaste tu contraseña?",
+      "ResetPassword": "Regenera tu contraseña"
+    },
+    "Auth": {
+      "Welcome": "Bienvenido",
+      "Hello": "Hola",
+      "MyAccount": "Mi Cuenta",
+      "My": "Mi",
+      "MySketches": "Mis bosquejos",
+      "MyCollections": "Mis colecciones",
+      "Asset": "Asset",
+      "MyAssets": "Mis assets",
+      "LogOut": "Cerrar sesión"
+    }
+  },
+  "About": {
+    "Title": "Acerca de",
+    "About_Modal": {
+      "Contribute": "Contribuir",
+      "NewP5": "¿Empezando con p5.js?",
+      "Report": "Reporta un error",
+      "Learn": "Aprender",
+      "Resources": "Recursos",
+      "Libraries": "Bibliotecas",
+      "Forum": "Foro",
+      "Examples": "Ejemplos"
+    }
+  },
+  "Toast": {
+    "OpenedNewSketch": "Abriste un nuevo bosquejo.",
+    "SketchSaved": "Bosquejo guardado.",
+    "AutosaveEnabled": "Grabado automático activado.",
+    "LangChange": "Lenguaje cambiado"
+  },
+  "Toolbar": {
     "Preview": "Vista previa",
-    "Auto-refresh": "Auto-refrescar",
-    "Console": "Consola",
+    "Auto-refresh": "Auto-refrescar"
+  },
+  "Console": {
+    "Clear": "Limpiar",
+    "Console": "Consola"
+  },
+  "Preferences": {
     "Settings": "Configuración",
-    "GeneralSettings": "Configuración general",
-    "Theme": "Modo de visualización",
-    "Light": "Claro",
-    "Dark": "Oscuro",
-    "HighContrast": "Alto contraste",
-    "TextSize": "Tamaño del texto",
-    "Decrease": "Disminuir",
-    "Increase": "Aumentar",
-    "IndentationAmount": "Cantidad de indentación",
-    "Autosave": "Grabar automáticamente",
-    "On": "Activar",
-    "Off": "Desactivar",
-    "SketchSettings": "Configuración del bosquejo",
-    "SecurityProtocol": "Protocolo de seguridad",
-    "ServeOverHTTPS": "Usar HTTPS",
-    "Accessibility": "Accesibilidad",
-    "LintWarningSound": "Sonido de alarma Lint",
-    "PreviewSound": "Probar sonido",
-    "AccessibleTextBasedCanvas": "Lienzo accesible por texto",
-    "UsedScreenReader": "Uso con screen reader",
-    "PlainText": "Texto sin formato",
-    "TableText": "Tablero de texto",
-    "Sound": "Sonido",
-    "WordWrap": "Ajuste automático de línea",
-    "LineNumbers": "Número de línea",
-    "LangChange": "Lenguaje cambiado",
-    "Welcome": "Bienvenida",
-    "Login": "Ingresa",
-    "LoginOr": "o",
-    "SignUp": "registráte",
-    "email": "correo electrónico",
-    "username": "nombre de usuario",
-    "LoginGithub": "Ingresa con Github",
-    "LoginGoogle": "Ingresa con Google",
-    "DontHaveAccount": "No tienes cuenta?",
-    "ForgotPassword": "¿Olvidaste tu contraseña?",
-    "ResetPassword": "Regenera tu contraseña",
+    "Option": {
+      "GeneralSettings": "Configuración general",
+      "Accessibility": "Accesibilidad",
+      "Theme": "Modo de visualización",
+      "Light": "Claro",
+      "Dark": "Oscuro",
+      "HighContrast": "Alto contraste",
+      "TextSize": "Tamaño del texto",
+      "Decrease": "Disminuir",
+      "Increase": "Aumentar",
+      "IndentationAmount": "Cantidad de indentación",
+      "Autosave": "Grabar automáticamente",
+      "On": "Activar",
+      "Off": "Desactivar",
+      "WordWrap":  "Ajuste automático de línea",
+      "LintWarningSound": "Sonido de alarma Lint",
+      "PreviewSound": "Probar sonido",
+      "AccessibleTextBasedCanvas": "Lienzo accesible por texto",
+      "UsedScreenReader": "Uso con screen reader",
+      "PlainText": "Texto sin formato",
+      "TableText":  "Tablero de texto",
+      "Sound": "Sonido",
+      "LineNumbers": "Número de línea"
+    }
+  },
+  "KeyboardShortcuts": {
+    "Title": " Atajos de teclado",
+    "ShortcutsFollow": "Los atajos para edición son como",
+    "SublimeText": "los atajos de Sublime Text ",
+    "CodeEditing": {
+      "Tidy": "Ordenar",
+      "FindText":  "Encontrar texto",
+      "FindNextMatch": "Encontrar siguiente ocurrencia",
+      "FindPrevMatch": "Encontrar ocurrencia previa",
+      "IndentCodeLeft": "Indentar código a la izquierda",
+      "IndentCodeRight": "Indentar código a la derecha",
+      "CommentLine": "Comentar línea de código",
+      "FindNextTextMatch": "Encontrar la siguiente ocurrencia de texto",
+      "FindPreviousTextMatch": "Encontrar la ocurrencia previa de texto",
+      "CodeEditing": "Editando Código"
+    },
+    "General": {
+      "StartSketch":  "Iniciar bosquejo",
+      "StopSketch": "Detener bosquejo",
+      "TurnOnAccessibleOutput":  "Activar salida accesible",
+      "TurnOffAccessibleOutput": "Desactivar salida accesible"
+    }
+  },
+  "Sidebar": {
+    "Create": "Crear",
+    "EnterName": "Introduce un nombre",
+    "Add": "Agregar",
+    "Folder": "Directorio"
+  },
+  "Common": {
     "BackEditor": "Regresa al editor",
+    "ToogleSidebar": "Alternar barra de deslizamiento",
+    "ToogleConsole": "Alternar consola",
     "UsernameSplit": "Nombre de usuario",
     "Password": "Contraseña",
     "ConfirmPassword": "Confirma la contraseña",
-    "OpenedNewSketch": "Creaste nuevo bosquejo.",
-    "Hello": "Hola",
-    "MyAccount": "Mi Cuenta",
-    "My": "Mi",
-    "MySketches": "Mis bosquejos",
-    "MyCollections":"Mis colecciones",
-    "Asset": "Asset",
-    "MyAssets": "Mis assets",
-    "TitleAbout": "Editor Web p5.js  | Acerca de",
-    "CodeEditing": "Editando Código",
+    "TitleAbout": "p5.js Web Editor | Acerca de",
     "Error": "Error",
     "In order to save": "Para guardar",
     "you must be logged in": "debes ingresar a tu cuenta",
     "Please": "Por favor",
-    "Find in files": "Encontrar en archivos",
-    "Create": "Create",
-    "enter a name": "enter a name",
-    "Add": "Add",
-    "Folder": "Directorio",
-    "FindText": "Encontrar texto",
-    "FindNextTextMatch": "Encontrar la siguiente ocurrencia de texto",
-    "FindPreviousTextMatch": "Encontrar la ocurrencia previa de texto",
-    "Code editing keyboard shortcuts follow": "Los atajos para edición son como",
-    "Sublime Text shortcuts": "los atajos de Sublime Text ",
-    "WarningUnsavedChanges": "¿Estás seguro de que quieres salir de la página? Tienes cambios sin guardar."
-  }
+    "FindInFiles": "Encontrar en archivos",
+    "WarningUnsavedChanges": "¿Estás seguro de que quieres salir de la página? Tienes cambios sin guardar.",
+    "SketchSettings": "Configuración del Bosquejo ",
+    "SecurityProtocol": "Protocolo de Seguridad",
+    "ServeOverHTTPS": "Utilizar HTTPS"
+   }
+}
+
+
+
+

From 8f90cf73d78bd2290065fa212c6c791837beb500 Mon Sep 17 00:00:00 2001
From: oruburos <omar.verduga@gmail.com>
Date: Wed, 22 Jul 2020 17:32:25 +0100
Subject: [PATCH 02/11] Minimal Viable Navigation Menu Test entry for
 Toolbar.test.jsx

---
 client/modules/IDE/components/Toolbar.test.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/modules/IDE/components/Toolbar.test.jsx b/client/modules/IDE/components/Toolbar.test.jsx
index d558fc464c..cd43530260 100644
--- a/client/modules/IDE/components/Toolbar.test.jsx
+++ b/client/modules/IDE/components/Toolbar.test.jsx
@@ -33,6 +33,7 @@ const renderComponent = (extraProps = {}) => {
       isEditingName: false,
       id: 'id',
     },
+    t: jest.fn()
   }, extraProps);
 
   render(<ToolbarComponent {...props} />);

From fc7e3cd5943cef573732098b9b8258fdc8ca4244 Mon Sep 17 00:00:00 2001
From: oruburos <omar.verduga@gmail.com>
Date: Thu, 23 Jul 2020 13:13:36 +0100
Subject: [PATCH 03/11] Translation.json : Changes in translation for new
 namespace About : broom About lines 17-26 Nav component : changes in keys
 KeyboardShortcutModal.jsx: Key now in Common

---
 client/components/Nav.jsx                     | 46 +++++++++----------
 client/modules/IDE/components/About.jsx       | 28 ++++-------
 .../IDE/components/KeyboardShortcutModal.jsx  |  2 +-
 translations/locales/en-US/translations.json  | 26 +++++------
 translations/locales/es-419/translations.json | 36 +++++++--------
 5 files changed, 62 insertions(+), 76 deletions(-)

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index e35a32315d..635d5f3a02 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -271,7 +271,7 @@ class Nav extends React.PureComponent {
               }
             }}
           >
-            <span className="nav__item-header">{this.props.t('Nav.File')}</span>
+            <span className="nav__item-header">{this.props.t('Nav.File.Title')}</span>
             <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
@@ -281,7 +281,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForFile}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('Nav.File_DropDown.New')}
+                {this.props.t('Nav.File.New')}
               </button>
             </li>
             { getConfig('LOGIN_ENABLED') && (!this.props.project.owner || this.isUserOwner()) &&
@@ -291,7 +291,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForFile}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('Nav.File_DropDown.Save')}
+                {this.props.t('Common.Save')}
                 <span className="nav__keyboard-shortcut">{metaKeyName}+S</span>
               </button>
             </li> }
@@ -302,7 +302,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForFile}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('Nav.File_DropDown.Duplicate')}
+                {this.props.t('Nav.File.Duplicate')}
               </button>
             </li> }
             { this.props.project.id &&
@@ -312,7 +312,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForFile}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('Nav.File_DropDown.Share')}
+                {this.props.t('Nav.File.Share')}
               </button>
             </li> }
             { this.props.project.id &&
@@ -322,7 +322,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForFile}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('Nav.File_DropDown.Download')}
+                {this.props.t('Nav.File.Download')}
               </button>
             </li> }
             { this.props.user.authenticated &&
@@ -333,7 +333,7 @@ class Nav extends React.PureComponent {
                 onBlur={this.handleBlur}
                 onClick={this.setDropdownForNone}
               >
-                {this.props.t('Nav.File_DropDown.Open')}
+                {this.props.t('Nav.File.Open')}
               </Link>
             </li> }
             {getConfig('UI_COLLECTIONS_ENABLED') &&
@@ -346,7 +346,7 @@ class Nav extends React.PureComponent {
                   onBlur={this.handleBlur}
                   onClick={this.setDropdownForNone}
                 >
-                  {this.props.t('Nav.File_DropDown.AddToCollection')}
+                  {this.props.t('Nav.File.AddToCollection')}
                 </Link>
               </li>}
             { getConfig('EXAMPLES_ENABLED') &&
@@ -357,7 +357,7 @@ class Nav extends React.PureComponent {
                 onBlur={this.handleBlur}
                 onClick={this.setDropdownForNone}
               >
-                {this.props.t('Nav.File_DropDown.Examples')}
+                {this.props.t('Nav.File.Examples')}
               </Link>
             </li> }
           </ul>
@@ -373,7 +373,7 @@ class Nav extends React.PureComponent {
               }
             }}
           >
-            <span className="nav__item-header">{this.props.t('Nav.Edit')}</span>
+            <span className="nav__item-header">{this.props.t('Nav.Edit.Title')}</span>
             <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown" >
@@ -386,7 +386,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForEdit}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('Nav.Edit_DropDown.TidyCode')}
+                {this.props.t('Nav.Edit.TidyCode')}
                 <span className="nav__keyboard-shortcut">{'\u21E7'}+Tab</span>
               </button>
             </li>
@@ -396,7 +396,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForEdit}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('Nav.Edit_DropDown.Find')}
+                {this.props.t('Nav.Edit.Find')}
                 <span className="nav__keyboard-shortcut">{metaKeyName}+F</span>
               </button>
             </li>
@@ -406,7 +406,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForEdit}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('Nav.Edit_DropDown.FindNext')}
+                {this.props.t('Nav.Edit.FindNext')}
                 <span className="nav__keyboard-shortcut">{metaKeyName}+G</span>
               </button>
             </li>
@@ -416,7 +416,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForEdit}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('Nav.Edit_DropDown.FindPrevious')}
+                {this.props.t('Nav.Edit.FindPrevious')}
                 <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+G</span>
               </button>
             </li>
@@ -433,7 +433,7 @@ class Nav extends React.PureComponent {
               }
             }}
           >
-            <span className="nav__item-header">{this.props.t('Nav.Sketch')}</span>
+            <span className="nav__item-header">{this.props.t('Nav.Sketch.Title')}</span>
             <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
@@ -443,7 +443,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForSketch}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('Nav.Sketch_DropDown.AddFile')}
+                {this.props.t('Nav.Sketch.AddFile')}
               </button>
             </li>
             <li className="nav__dropdown-item">
@@ -452,7 +452,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForSketch}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('Nav.Sketch_DropDown.AddFolder')}
+                {this.props.t('Nav.Sketch.AddFolder')}
               </button>
             </li>
             <li className="nav__dropdown-item">
@@ -461,7 +461,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForSketch}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('Nav.Sketch_DropDown.Run')}
+                {this.props.t('Nav.Sketch.Run')}
                 <span className="nav__keyboard-shortcut">{metaKeyName}+Enter</span>
               </button>
             </li>
@@ -471,7 +471,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForSketch}
                 onBlur={this.handleBlur}
               >
-                {this.props.t('Nav.Sketch_DropDown.Stop')}
+                {this.props.t('Nav.Sketch.Stop')}
                 <span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+Enter</span>
               </button>
             </li>
@@ -508,7 +508,7 @@ class Nav extends React.PureComponent {
               }
             }}
           >
-            <span className="nav__item-header">{this.props.t('Nav.Help')}</span>
+            <span className="nav__item-header">{this.props.t('Nav.Help.Title')}</span>
             <TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
           </button>
           <ul className="nav__dropdown">
@@ -518,7 +518,7 @@ class Nav extends React.PureComponent {
                 onBlur={this.handleBlur}
                 onClick={this.handleKeyboardShortcuts}
               >
-                {this.props.t('Nav.Help_DropDown.KeyboardShortcuts')}
+                {this.props.t('Nav.Help.KeyboardShortcuts')}
               </button>
             </li>
             <li className="nav__dropdown-item">
@@ -529,7 +529,7 @@ class Nav extends React.PureComponent {
                 onFocus={this.handleFocusForHelp}
                 onBlur={this.handleBlur}
                 onClick={this.setDropdownForNone}
-              >{this.props.t('Nav.Help_DropDown.Reference')}
+              >{this.props.t('Nav.Help.Reference')}
               </a>
             </li>
             <li className="nav__dropdown-item">
@@ -539,7 +539,7 @@ class Nav extends React.PureComponent {
                 onBlur={this.handleBlur}
                 onClick={this.setDropdownForNone}
               >
-                {this.props.t('Nav.Help_DropDown.About')}
+                {this.props.t('Nav.Help.About')}
               </Link>
             </li>
           </ul>
diff --git a/client/modules/IDE/components/About.jsx b/client/modules/IDE/components/About.jsx
index 94e30339e1..0f0cd1b170 100644
--- a/client/modules/IDE/components/About.jsx
+++ b/client/modules/IDE/components/About.jsx
@@ -14,19 +14,9 @@ function About(props) {
       </Helmet>
       <div className="about__content-column">
         <SquareLogoIcon className="about__logo" role="img" aria-label="p5.js Logo" focusable="false" />
-        {/* Video button to hello p5 video page */}
-        {/* <p className="about__play-video">
-          <a
-            href="http://hello.p5js.org/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <PlayIcon className="about__play-video-button" title="Play Hello Video" />
-          Play hello! video</a>
-        </p>  */}
       </div>
       <div className="about__content-column">
-        <h3 className="about__content-column-title">{t('About.About_Modal.NewP5')}</h3>
+        <h3 className="about__content-column-title">{t('About.NewP5')}</h3>
         <p className="about__content-column-list">
           <a
             href="https://p5js.org/examples/"
@@ -34,7 +24,7 @@ function About(props) {
             rel="noopener noreferrer"
           >
             <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
-            {t('About.About_Modal.Examples')}
+            {t('About.Examples')}
           </a>
         </p>
         <p className="about__content-column-list">
@@ -44,12 +34,12 @@ function About(props) {
             rel="noopener noreferrer"
           >
             <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
-            {t('About.About_Modal.Learn')}
+            {t('About.Learn')}
           </a>
         </p>
       </div>
       <div className="about__content-column">
-        <h3 className="about__content-column-title">{t('About.About_Modal.Resources')}</h3>
+        <h3 className="about__content-column-title">{t('About.Resources')}</h3>
         <p className="about__content-column-list">
           <a
             href="https://p5js.org/libraries/"
@@ -57,7 +47,7 @@ function About(props) {
             rel="noopener noreferrer"
           >
             <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
-            {t('About.About_Modal.Libraries')}
+            {t('About.Libraries')}
           </a>
         </p>
         <p className="about__content-column-list">
@@ -67,7 +57,7 @@ function About(props) {
             rel="noopener noreferrer"
           >
             <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
-            {t('Nav.Help_DropDown.Reference')}
+            {t('Nav.Help.Reference')}
           </a>
         </p>
         <p className="about__content-column-list">
@@ -77,7 +67,7 @@ function About(props) {
             rel="noopener noreferrer"
           >
             <AsteriskIcon className="about__content-column-asterisk" aria-hidden="true" focusable="false" />
-            {t('About.About_Modal.Forum')}
+            {t('About.Forum')}
           </a>
         </p>
       </div>
@@ -87,7 +77,7 @@ function About(props) {
             href="https://github.com/processing/p5.js-web-editor"
             target="_blank"
             rel="noopener noreferrer"
-          >{t('About.About_Modal.Contribute')}
+          >{t('About.Contribute')}
           </a>
         </p>
         <p className="about__footer-list">
@@ -95,7 +85,7 @@ function About(props) {
             href="https://github.com/processing/p5.js-web-editor/issues/new"
             target="_blank"
             rel="noopener noreferrer"
-          >{t('About.About_Modal.Report')}
+          >{t('About.Report')}
           </a>
         </p>
         <p className="about__footer-list">
diff --git a/client/modules/IDE/components/KeyboardShortcutModal.jsx b/client/modules/IDE/components/KeyboardShortcutModal.jsx
index 6d5b25c16e..4d471ea06e 100644
--- a/client/modules/IDE/components/KeyboardShortcutModal.jsx
+++ b/client/modules/IDE/components/KeyboardShortcutModal.jsx
@@ -58,7 +58,7 @@ function KeyboardShortcutModal() {
           <span className="keyboard-shortcut__command">
             {metaKeyName} + S
           </span>
-          <span>{t('Nav.File.Save')}</span>
+          <span>{t('Common.Save')}</span>
         </li>
         <li className="keyboard-shortcut-item">
           <span className="keyboard-shortcut__command">
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index a95ef45998..5c2f91c5f4 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -1,9 +1,8 @@
 {
   "Nav": {
-    "File": "File",
-    "File_DropDown": {
+    "File": {
+      "Title": "File",
       "New": "New",
-      "Save": "Save",
       "Share": "Share",
       "Duplicate": "Duplicate",
       "Open": "Open",
@@ -11,22 +10,22 @@
       "AddToCollection": "Add to Collection",
       "Examples": "Examples"
     },
-    "Edit": "Edit",
-    "Edit_DropDown": {
+    "Edit": {
+      "Title": "Edit",
       "TidyCode": "Tidy Code",
       "Find": "Find",
       "FindNext": "Find Next",
       "FindPrevious": "Find Previous"
     },
-    "Sketch": "Sketch",
-    "Sketch_DropDown": {
+    "Sketch": {
+      "Title": "Sketch",
       "AddFile": "Add File",
       "AddFolder": "Add Folder",
       "Run": "Run",
       "Stop": "Stop"
     },
-    "Help": "Help",
-    "Help_DropDown": {
+    "Help": {
+      "Title": "Help",
       "KeyboardShortcuts": "Keyboard Shortcuts",
       "Reference": "Reference",
       "About": "About"
@@ -58,16 +57,14 @@
   },
   "About": {
     "Title": "About",
-    "About_Modal": {
-      "Contribute": "Contribute",
-      "NewP5": "New to p5.js?",
-      "Report": "Report a bug",
+    "Contribute": "Contribute",
+    "NewP5": "New to p5.js?",
+     "Report": "Report a bug",
       "Learn": "Learn",
       "Resources": "Resources",
       "Libraries": "Libraries",
       "Forum": "Forum",
       "Examples": "Examples"
-    }
   },
   "Toast": {
     "OpenedNewSketch": "Opened new sketch.",
@@ -140,6 +137,7 @@
     "Folder": "Folder"
   },
   "Common": {
+    "Save": "Save",
     "BackEditor": "Back to Editor",
     "ToogleSidebar": "Toogle Sidebar",
     "ToogleConsole": "Toogle Console",
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
index c86c753903..2ba30ca479 100644
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@@ -1,9 +1,8 @@
 {
   "Nav": {
-    "File": "Archivo",
-    "File_DropDown": {
+    "File": {
+      "Title": "Archivo",
       "New": "Nuevo",
-      "Save": "Guardar",
       "Share": "Compartir",
       "Duplicate": "Duplicar",
       "Open": "Abrir",
@@ -11,22 +10,22 @@
       "AddToCollection": "Agregar a colección",
       "Examples": "Ejemplos"
     },
-    "Edit": "Editar",
-    "Edit_DropDown": {
+    "Edit": {
+      "Title": "Editar",
       "TidyCode": "Ordenar código",
       "Find": "Buscar",
       "FindNext": "Buscar siguiente",
       "FindPrevious": "Buscar anterior"
     },
-    "Sketch": "Bosquejo",
-    "Sketch_DropDown": {
+    "Sketch": {
+      "Title": "Bosquejo",
       "AddFile": "Agregar archivo",
       "AddFolder": "Agregar directorio",
       "Run": "Ejecutar",
       "Stop": "Detener"
     },
-    "Help": "Ayuda",
-    "Help_DropDown": {
+    "Help": {
+      "Title": "Ayuda",
       "KeyboardShortcuts": "Atajos",
       "Reference": "Referencia",
       "About": "Acerca de"
@@ -58,16 +57,14 @@
   },
   "About": {
     "Title": "Acerca de",
-    "About_Modal": {
-      "Contribute": "Contribuir",
-      "NewP5": "¿Empezando con p5.js?",
-      "Report": "Reporta un error",
-      "Learn": "Aprender",
-      "Resources": "Recursos",
-      "Libraries": "Bibliotecas",
-      "Forum": "Foro",
-      "Examples": "Ejemplos"
-    }
+    "Contribute": "Contribuir",
+    "NewP5": "¿Empezando con p5.js?",
+     "Report": "Reporta un error",
+     "Learn": "Aprender",
+     "Resources": "Recursos",
+     "Libraries": "Bibliotecas",
+     "Forum": "Foro",
+     "Examples": "Ejemplos"
   },
   "Toast": {
     "OpenedNewSketch": "Abriste un nuevo bosquejo.",
@@ -140,6 +137,7 @@
     "Folder": "Directorio"
   },
   "Common": {
+    "Save": "Guardar",
     "BackEditor": "Regresa al editor",
     "ToogleSidebar": "Alternar barra de deslizamiento",
     "ToogleConsole": "Alternar consola",

From 02e6cef321de2dea6eafbecc5329f5c3184188ca Mon Sep 17 00:00:00 2001
From: oruburos <omar.verduga@gmail.com>
Date: Thu, 23 Jul 2020 15:36:33 +0100
Subject: [PATCH 04/11] Voice Over Labels in Preferences:index Labels included
 in translations.json

---
 .../IDE/components/Preferences/index.jsx      | 72 +++++++++----------
 translations/locales/en-US/translations.json  | 13 +++-
 translations/locales/es-419/translations.json | 13 +++-
 3 files changed, 58 insertions(+), 40 deletions(-)

diff --git a/client/modules/IDE/components/Preferences/index.jsx b/client/modules/IDE/components/Preferences/index.jsx
index b58abf7eab..c3efd36825 100644
--- a/client/modules/IDE/components/Preferences/index.jsx
+++ b/client/modules/IDE/components/Preferences/index.jsx
@@ -99,59 +99,59 @@ class Preferences extends React.Component {
         <Tabs>
           <TabList>
             <div className="tabs__titles">
-              <Tab><h4 className="tabs__title">{this.props.t('Preferences.Option.GeneralSettings')}</h4></Tab>
-              <Tab><h4 className="tabs__title">{this.props.t('Preferences.Option.Accessibility')}</h4></Tab>
+              <Tab><h4 className="tabs__title">{this.props.t('Preferences.GeneralSettings')}</h4></Tab>
+              <Tab><h4 className="tabs__title">{this.props.t('Preferences.Accessibility')}</h4></Tab>
             </div>
           </TabList>
           <TabPanel>
             <div className="preference">
-              <h4 className="preference__title">{this.props.t('Preferences.Option.Theme')}</h4>
+              <h4 className="preference__title">{this.props.t('Preferences.Theme')}</h4>
               <div className="preference__options">
                 <input
                   type="radio"
                   onChange={() => this.props.setTheme('light')}
-                  aria-label="light theme on"
+                  aria-label={this.props.t('Preferences.ARIA.LightThemeOn')}
                   name="light theme"
                   id="light-theme-on"
                   className="preference__radio-button"
                   value="light"
                   checked={this.props.theme === 'light'}
                 />
-                <label htmlFor="light-theme-on" className="preference__option">{this.props.t('Preferences.Option.Light')}</label>
+                <label htmlFor="light-theme-on" className="preference__option">{this.props.t('Preferences.Light')}</label>
                 <input
                   type="radio"
                   onChange={() => this.props.setTheme('dark')}
-                  aria-label="dark theme on"
+                  aria-label={this.props.t('Preferences.ARIA.DarkThemeOn')}
                   name="dark theme"
                   id="dark-theme-on"
                   className="preference__radio-button"
                   value="dark"
                   checked={this.props.theme === 'dark'}
                 />
-                <label htmlFor="dark-theme-on" className="preference__option">{this.props.t('Preferences.Option.Dark')}</label>
+                <label htmlFor="dark-theme-on" className="preference__option">{this.props.t('Preferences.Dark')}</label>
                 <input
                   type="radio"
                   onChange={() => this.props.setTheme('contrast')}
-                  aria-label="high contrast theme on"
+                  aria-label={this.props.t('Preferences.ARIA.HighContrastThemeOn')}
                   name="high contrast theme"
                   id="high-contrast-theme-on"
                   className="preference__radio-button"
                   value="contrast"
                   checked={this.props.theme === 'contrast'}
                 />
-                <label htmlFor="high-contrast-theme-on" className="preference__option">{this.props.t('Preferences.Option.HighContrast')}</label>
+                <label htmlFor="high-contrast-theme-on" className="preference__option">{this.props.t('Preferences.HighContrast')}</label>
               </div>
             </div>
             <div className="preference">
-              <h4 className="preference__title">{this.props.t('Preferences.Option.TextSize')}</h4>
+              <h4 className="preference__title">{this.props.t('Preferences.TextSize')}</h4>
               <button
                 className="preference__minus-button"
                 onClick={this.decreaseFontSize}
-                aria-label="decrease font size"
+                aria-label={this.props.t('Preferences.ARIA.DecreaseFontSize')}
                 disabled={this.state.fontSize <= 8}
               >
                 <MinusIcon focusable="false" aria-hidden="true" />
-                <h6 className="preference__label">{this.props.t('Preferences.Option.Decrease')}</h6>
+                <h6 className="preference__label">{this.props.t('Preferences.Decrease')}</h6>
               </button>
               <form onSubmit={this.onFontInputSubmit}>
                 <input
@@ -168,71 +168,71 @@ class Preferences extends React.Component {
               <button
                 className="preference__plus-button"
                 onClick={this.increaseFontSize}
-                aria-label="increase font size"
+                aria-label={this.props.t('Preferences.ARIA.IncreaseFontSize')}
                 disabled={this.state.fontSize >= 36}
               >
                 <PlusIcon focusable="false" aria-hidden="true" />
-                <h6 className="preference__label">{this.props.t('Preferences.Option.Increase')}</h6>
+                <h6 className="preference__label">{this.props.t('Preferences.Increase')}</h6>
               </button>
             </div>
             <div className="preference">
-              <h4 className="preference__title">{this.props.t('Preferences.Option.Autosave')}</h4>
+              <h4 className="preference__title">{this.props.t('Preferences.Autosave')}</h4>
               <div className="preference__options">
                 <input
                   type="radio"
                   onChange={() => this.props.setAutosave(true)}
-                  aria-label="autosave on"
+                  aria-label={this.props.t('Preferences.ARIA.AutosaveOn')}
                   name="autosave"
                   id="autosave-on"
                   className="preference__radio-button"
                   value="On"
                   checked={this.props.autosave}
                 />
-                <label htmlFor="autosave-on" className="preference__option">{this.props.t('Preferences.Option.On')}</label>
+                <label htmlFor="autosave-on" className="preference__option">{this.props.t('Preferences.On')}</label>
                 <input
                   type="radio"
                   onChange={() => this.props.setAutosave(false)}
-                  aria-label="autosave off"
+                  aria-label={this.props.t('Preferences.ARIA.AutosaveOff')}
                   name="autosave"
                   id="autosave-off"
                   className="preference__radio-button"
                   value="Off"
                   checked={!this.props.autosave}
                 />
-                <label htmlFor="autosave-off" className="preference__option">{this.props.t('Preferences.Option.Off')}</label>
+                <label htmlFor="autosave-off" className="preference__option">{this.props.t('Preferences.Off')}</label>
               </div>
             </div>
             <div className="preference">
-              <h4 className="preference__title">{this.props.t('Preferences.Option.WordWrap')}</h4>
+              <h4 className="preference__title">{this.props.t('Preferences.WordWrap')}</h4>
               <div className="preference__options">
                 <input
                   type="radio"
                   onChange={() => this.props.setLinewrap(true)}
-                  aria-label="linewrap on"
+                  aria-label={this.props.t('Preferences.ARIA.LineWrapOn')}
                   name="linewrap"
                   id="linewrap-on"
                   className="preference__radio-button"
                   value="On"
                   checked={this.props.linewrap}
                 />
-                <label htmlFor="linewrap-on" className="preference__option">{this.props.t('Preferences.Option.On')}</label>
+                <label htmlFor="linewrap-on" className="preference__option">{this.props.t('Preferences.On')}</label>
                 <input
                   type="radio"
                   onChange={() => this.props.setLinewrap(false)}
-                  aria-label="linewrap off"
+                  aria-label={this.props.t('Preferences.ARIA.LineWrapOff')}
                   name="linewrap"
                   id="linewrap-off"
                   className="preference__radio-button"
                   value="Off"
                   checked={!this.props.linewrap}
                 />
-                <label htmlFor="linewrap-off" className="preference__option">{this.props.t('Preferences.Option.Off')}</label>
+                <label htmlFor="linewrap-off" className="preference__option">{this.props.t('Preferences.Off')}</label>
               </div>
             </div>
           </TabPanel>
           <TabPanel>
             <div className="preference">
-              <h4 className="preference__title">{this.props.t('Preferences.Option.LineNumbers')}</h4>
+              <h4 className="preference__title">{this.props.t('Preferences.LineNumbers')}</h4>
               <div className="preference__options">
                 <input
                   type="radio"
@@ -244,7 +244,7 @@ class Preferences extends React.Component {
                   value="On"
                   checked={this.props.lineNumbers}
                 />
-                <label htmlFor="line-numbers-on" className="preference__option">{this.props.t('Preferences.Option.On')}</label>
+                <label htmlFor="line-numbers-on" className="preference__option">{this.props.t('Preferences.On')}</label>
                 <input
                   type="radio"
                   onChange={() => this.props.setLineNumbers(false)}
@@ -255,11 +255,11 @@ class Preferences extends React.Component {
                   value="Off"
                   checked={!this.props.lineNumbers}
                 />
-                <label htmlFor="line-numbers-off" className="preference__option">{this.props.t('Preferences.Option.Off')}</label>
+                <label htmlFor="line-numbers-off" className="preference__option">{this.props.t('Preferences.Off')}</label>
               </div>
             </div>
             <div className="preference">
-              <h4 className="preference__title">{this.props.t('Preferences.Option.LintWarningSound')}</h4>
+              <h4 className="preference__title">{this.props.t('Preferences.LintWarningSound')}</h4>
               <div className="preference__options">
                 <input
                   type="radio"
@@ -271,7 +271,7 @@ class Preferences extends React.Component {
                   value="On"
                   checked={this.props.lintWarning}
                 />
-                <label htmlFor="lint-warning-on" className="preference__option">{this.props.t('Preferences.Option.On')}</label>
+                <label htmlFor="lint-warning-on" className="preference__option">{this.props.t('Preferences.On')}</label>
                 <input
                   type="radio"
                   onChange={() => this.props.setLintWarning(false)}
@@ -282,19 +282,19 @@ class Preferences extends React.Component {
                   value="Off"
                   checked={!this.props.lintWarning}
                 />
-                <label htmlFor="lint-warning-off" className="preference__option">{this.props.t('Preferences.Option.Off')}</label>
+                <label htmlFor="lint-warning-off" className="preference__option">{this.props.t('Preferences.Off')}</label>
                 <button
                   className="preference__preview-button"
                   onClick={() => beep.play()}
                   aria-label="preview sound"
                 >
-                  {this.props.t('Preferences.Option.PreviewSound')}
+                  {this.props.t('Preferences.PreviewSound')}
                 </button>
               </div>
             </div>
             <div className="preference">
-              <h4 className="preference__title">{this.props.t('Preferences.Option.AccessibleTextBasedCanvas')}</h4>
-              <h6 className="preference__subtitle">{this.props.t('Preferences.Option.UsedScreenReader')}</h6>
+              <h4 className="preference__title">{this.props.t('Preferences.AccessibleTextBasedCanvas')}</h4>
+              <h6 className="preference__subtitle">{this.props.t('Preferences.UsedScreenReader')}</h6>
 
               <div className="preference__options">
                 <input
@@ -308,7 +308,7 @@ class Preferences extends React.Component {
                   value="On"
                   checked={(this.props.textOutput)}
                 />
-                <label htmlFor="text-output-on" className="preference__option preference__canvas">{this.props.t('Preferences.Option.PlainText')}</label>
+                <label htmlFor="text-output-on" className="preference__option preference__canvas">{this.props.t('Preferences.PlainText')}</label>
                 <input
                   type="checkbox"
                   onChange={(event) => {
@@ -320,7 +320,7 @@ class Preferences extends React.Component {
                   value="On"
                   checked={(this.props.gridOutput)}
                 />
-                <label htmlFor="table-output-on" className="preference__option preference__canvas">{this.props.t('Preferences.Option.TableText')}</label>
+                <label htmlFor="table-output-on" className="preference__option preference__canvas">{this.props.t('Preferences.TableText')}</label>
                 <input
                   type="checkbox"
                   onChange={(event) => {
@@ -332,7 +332,7 @@ class Preferences extends React.Component {
                   value="On"
                   checked={(this.props.soundOutput)}
                 />
-                <label htmlFor="sound-output-on" className="preference__option preference__canvas">{this.props.t('Preferences.Option.Sound')}</label>
+                <label htmlFor="sound-output-on" className="preference__option preference__canvas">{this.props.t('Preferences.Sound')}</label>
               </div>
             </div>
           </TabPanel>
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index 5c2f91c5f4..0fe72c5c26 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -82,7 +82,6 @@
   },
   "Preferences": {
     "Settings": "Settings",
-    "Option": {
       "GeneralSettings": "General settings",
       "Accessibility": "Accessibility",
       "Theme": "Theme",
@@ -104,7 +103,17 @@
       "PlainText": "Plain-text",
       "TableText": "Table-text",
       "Sound": "Sound",
-      "LineNumbers": "Line numbers"
+      "LineNumbers": "Line numbers",
+    "ARIA": {
+      "LightThemeOn": "light theme on",
+      "DarkThemeOn": "dark theme on",
+      "HighContrastThemeOn": "high contrast theme on",
+      "DecreaseFontSize": "decrease font size",
+      "IncreaseFontSize": "increase font size",
+      "AutosaveOn": "autosave on",
+      "AutosaveOff": "autosave off",
+      "LineWrapOn": "linewrap on",
+      "LineWrapOff": "linewrap off"
     }
   },
   "KeyboardShortcuts": {
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
index 2ba30ca479..7c080e7157 100644
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@@ -82,7 +82,6 @@
   },
   "Preferences": {
     "Settings": "Configuración",
-    "Option": {
       "GeneralSettings": "Configuración general",
       "Accessibility": "Accesibilidad",
       "Theme": "Modo de visualización",
@@ -104,7 +103,17 @@
       "PlainText": "Texto sin formato",
       "TableText":  "Tablero de texto",
       "Sound": "Sonido",
-      "LineNumbers": "Número de línea"
+      "LineNumbers": "Número de línea",
+    "ARIA": {
+      "LightThemeOn": "Modo de visualización claro activado",
+      "DarkThemeOn": "Modo de visualización oscuro activado",
+      "HighContrastThemeOn": "Modo de visualización de alto contraste activado",
+      "DecreaseFontSize": "Disminuir tamaño del texto",
+      "IncreaseFontSize": "Aumentar tamaño del texto",
+      "AutosaveOn": "Grabado automático activado",
+      "AutosaveOff": "Grabado automático desactivado",
+      "LineWrapOn": "Ajuste automático de línea activado",
+      "LineWrapOff": "Ajuste automático de línea desactivado"
     }
   },
   "KeyboardShortcuts": {

From 11145ccd5b3d8083485f7494fcc0df99b5a66634 Mon Sep 17 00:00:00 2001
From: oruburos <omar.verduga@gmail.com>
Date: Mon, 27 Jul 2020 21:47:14 +0100
Subject: [PATCH 05/11] Voice Over Labels in Preferences:index Labels included
 in translations.json

---
 .../modules/IDE/components/Preferences/index.jsx | 16 ++++++++--------
 translations/locales/en-US/translations.json     | 10 +++++++++-
 translations/locales/es-419/translations.json    | 10 +++++++++-
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/client/modules/IDE/components/Preferences/index.jsx b/client/modules/IDE/components/Preferences/index.jsx
index c3efd36825..582850fbaa 100644
--- a/client/modules/IDE/components/Preferences/index.jsx
+++ b/client/modules/IDE/components/Preferences/index.jsx
@@ -237,7 +237,7 @@ class Preferences extends React.Component {
                 <input
                   type="radio"
                   onChange={() => this.props.setLineNumbers(true)}
-                  aria-label="line numbers on"
+                  aria-label={this.props.t('Preferences.ARIA.LineNumbersOn')}
                   name="line numbers"
                   id="line-numbers-on"
                   className="preference__radio-button"
@@ -248,7 +248,7 @@ class Preferences extends React.Component {
                 <input
                   type="radio"
                   onChange={() => this.props.setLineNumbers(false)}
-                  aria-label="line numbers off"
+                  aria-label={this.props.t('Preferences.ARIA.LineNumbersOff')}
                   name="line numbers"
                   id="line-numbers-off"
                   className="preference__radio-button"
@@ -264,7 +264,7 @@ class Preferences extends React.Component {
                 <input
                   type="radio"
                   onChange={() => this.props.setLintWarning(true)}
-                  aria-label="lint warning on"
+                  aria-label={this.props.t('Preferences.ARIA.LintWarningOn')}
                   name="lint warning"
                   id="lint-warning-on"
                   className="preference__radio-button"
@@ -275,7 +275,7 @@ class Preferences extends React.Component {
                 <input
                   type="radio"
                   onChange={() => this.props.setLintWarning(false)}
-                  aria-label="lint warning off"
+                  aria-label={this.props.t('Preferences.ARIA.LintWarningOff')}
                   name="lint warning"
                   id="lint-warning-off"
                   className="preference__radio-button"
@@ -286,7 +286,7 @@ class Preferences extends React.Component {
                 <button
                   className="preference__preview-button"
                   onClick={() => beep.play()}
-                  aria-label="preview sound"
+                  aria-label={this.props.t('Preferences.ARIA.PreviewSound')}
                 >
                   {this.props.t('Preferences.PreviewSound')}
                 </button>
@@ -302,7 +302,7 @@ class Preferences extends React.Component {
                   onChange={(event) => {
                     this.props.setTextOutput(event.target.checked);
                   }}
-                  aria-label="text output on"
+                  aria-label={this.props.t('Preferences.ARIA.TextOutputOn')}
                   name="text output"
                   id="text-output-on"
                   value="On"
@@ -314,7 +314,7 @@ class Preferences extends React.Component {
                   onChange={(event) => {
                     this.props.setGridOutput(event.target.checked);
                   }}
-                  aria-label="table output on"
+                  aria-label={this.props.t('Preferences.ARIA.TableOutputOn')}
                   name="table output"
                   id="table-output-on"
                   value="On"
@@ -326,7 +326,7 @@ class Preferences extends React.Component {
                   onChange={(event) => {
                     this.props.setSoundOutput(event.target.checked);
                   }}
-                  aria-label="sound output on"
+                  aria-label={this.props.t('Preferences.ARIA.SoundOutputOn')}
                   name="sound output"
                   id="sound-output-on"
                   value="On"
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index 0fe72c5c26..d4f6f2ab0f 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -113,7 +113,15 @@
       "AutosaveOn": "autosave on",
       "AutosaveOff": "autosave off",
       "LineWrapOn": "linewrap on",
-      "LineWrapOff": "linewrap off"
+      "LineWrapOff": "linewrap off",
+      "LineNumbersOn": "line numbers on",
+      "LineNumbersOff": "line numbers off",
+      "LintWarningOn": "lint warning on",
+      "LintWarningOff": "lint warning off",
+      "PreviewSound": "preview sound",
+      "TextOutputOn": "text output on",
+      "TableOutputOn": "table output on",
+      "SoundOutputOn": "sound output on"
     }
   },
   "KeyboardShortcuts": {
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
index 7c080e7157..c8adba3d64 100644
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@@ -113,7 +113,15 @@
       "AutosaveOn": "Grabado automático activado",
       "AutosaveOff": "Grabado automático desactivado",
       "LineWrapOn": "Ajuste automático de línea activado",
-      "LineWrapOff": "Ajuste automático de línea desactivado"
+      "LineWrapOff": "Ajuste automático de línea desactivado",
+      "LineNumbersOn": "Número de línea activado",
+      "LineNumbersOff": "Número de línea desactivado",
+      "LintWarningOn": "Sonido de alarma Lint activado",
+      "LintWarningOff": "Sonido de alarma Lint desactivado",
+      "PreviewSound": "Probar sonido",
+      "TextOutputOn": "Salida de texto activado",
+      "TableOutputOn": "Salida de tablero activado",
+      "SoundOutputOn": "Salida de sonido activado"
     }
   },
   "KeyboardShortcuts": {

From 11941b7401c53e5c7b216914a4aec7d54374e017 Mon Sep 17 00:00:00 2001
From: oruburos <omar.verduga@gmail.com>
Date: Mon, 27 Jul 2020 23:41:21 +0100
Subject: [PATCH 06/11] Voice Over Labels in Preferences:index Labels included
 in translations.json

---
 client/components/Nav.jsx                     |  6 +++---
 client/modules/IDE/actions/project.js         | 16 ++++++++--------
 client/modules/IDE/components/About.jsx       |  2 +-
 client/modules/IDE/pages/IDEView.jsx          | 14 +++++++-------
 translations/locales/en-US/translations.json  | 11 +++++++++--
 translations/locales/es-419/translations.json | 14 +++++++++++---
 6 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 635d5f3a02..9407f296a4 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -240,13 +240,13 @@ class Nav extends React.PureComponent {
     return (
       <ul className="nav__items-left">
         <li className="nav__item-logo">
-          <LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
+          <LogoIcon role="img" aria-label={this.props.t('Common.ARIA.p5logo')} focusable="false" className="svg__logo" />
         </li>
         <li className="nav__item nav__item--no-icon">
           <Link to="/" className="nav__back-link">
             <CaretLeftIcon className="nav__back-icon" focusable="false" aria-hidden="true" />
             <span className="nav__item-header">
-              {this.props.t('BackEditor')}
+              {this.props.t('Common.BackEditor')}
             </span>
           </Link>
         </li>
@@ -258,7 +258,7 @@ class Nav extends React.PureComponent {
     return (
       <ul className="nav__items-left">
         <li className="nav__item-logo">
-          <LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
+          <LogoIcon role="img" aria-label={this.props.t('Common.ARIA.p5logo')} focusable="false" className="svg__logo" />
         </li>
         <li className={navDropdownState.file}>
           <button
diff --git a/client/modules/IDE/actions/project.js b/client/modules/IDE/actions/project.js
index 2909742f2d..b57cacd22f 100644
--- a/client/modules/IDE/actions/project.js
+++ b/client/modules/IDE/actions/project.js
@@ -157,19 +157,19 @@ export function saveProject(selectedFile = null, autosave = false) {
           if (!autosave) {
             if (state.ide.justOpenedProject && state.preferences.autosave) {
               dispatch(showToast(5500));
-              dispatch(setToastText('Sketch saved.'));
-              setTimeout(() => dispatch(setToastText('Autosave enabled.')), 1500);
+              dispatch(setToastText('Toast.SketchSaved'));
+              setTimeout(() => dispatch(setToastText('Toast.AutosaveEnabled')), 1500);
               dispatch(resetJustOpenedProject());
             } else {
               dispatch(showToast(1500));
-              dispatch(setToastText('Sketch saved.'));
+              dispatch(setToastText('Toast.SketchSaved'));
             }
           }
         })
         .catch((error) => {
           const { response } = error;
           dispatch(endSavingProject());
-          dispatch(setToastText('Failed to save sketch.'));
+          dispatch(setToastText('Toast.SketchFailedSave'));
           dispatch(showToast(1500));
           if (response.status === 403) {
             dispatch(showErrorModal('staleSession'));
@@ -199,19 +199,19 @@ export function saveProject(selectedFile = null, autosave = false) {
         if (!autosave) {
           if (state.preferences.autosave) {
             dispatch(showToast(5500));
-            dispatch(setToastText('Sketch saved.'));
-            setTimeout(() => dispatch(setToastText('Autosave enabled.')), 1500);
+            dispatch(setToastText('Toast.SketchSaved'));
+            setTimeout(() => dispatch(setToastText('Toast.AutosaveEnabled')), 1500);
             dispatch(resetJustOpenedProject());
           } else {
             dispatch(showToast(1500));
-            dispatch(setToastText('Sketch saved.'));
+            dispatch(setToastText('Toast.SketchSaved'));
           }
         }
       })
       .catch((error) => {
         const { response } = error;
         dispatch(endSavingProject());
-        dispatch(setToastText('Failed to save sketch.'));
+        dispatch(setToastText('Toast.SketchFailedSave'));
         dispatch(showToast(1500));
         if (response.status === 403) {
           dispatch(showErrorModal('staleSession'));
diff --git a/client/modules/IDE/components/About.jsx b/client/modules/IDE/components/About.jsx
index 0f0cd1b170..d49d787a06 100644
--- a/client/modules/IDE/components/About.jsx
+++ b/client/modules/IDE/components/About.jsx
@@ -13,7 +13,7 @@ function About(props) {
         <title>p5.js Web Editor | {t('About.Title')} </title>
       </Helmet>
       <div className="about__content-column">
-        <SquareLogoIcon className="about__logo" role="img" aria-label="p5.js Logo" focusable="false" />
+        <SquareLogoIcon className="about__logo" role="img" aria-label={t('Common.ARIA.p5logo')} focusable="false" />
       </div>
       <div className="about__content-column">
         <h3 className="about__content-column-title">{t('About.NewP5')}</h3>
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index 148fa05034..8cee3dfb1f 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -55,7 +55,7 @@ function warnIfUnsavedChanges(props) { // eslint-disable-line
     props.persistState();
     window.onbeforeunload = null;
   } else if (props.ide.unsavedChanges) {
-    if (!window.confirm(props.t('WarningUnsavedChanges'))) {
+    if (!window.confirm(props.t('Common.WarningUnsavedChanges'))) {
       return false;
     }
     props.setUnsavedChanges(false);
@@ -221,8 +221,8 @@ class IDEView extends React.Component {
         <Toolbar key={this.props.project.id} />
         {this.props.ide.preferencesIsVisible &&
           <Overlay
-            title={this.props.t('Settings')}
-            ariaLabel="settings"
+            title={this.props.t('Preferences.Settings')}
+            ariaLabel={this.props.t('Preferences.Settings')}
             closeOverlay={this.props.closePreferences}
           >
             <Preferences
@@ -328,7 +328,7 @@ class IDEView extends React.Component {
               </SplitPane>
               <section className="preview-frame-holder">
                 <header className="preview-frame__header">
-                  <h2 className="preview-frame__title">{this.props.t('Preview')}</h2>
+                  <h2 className="preview-frame__title">{this.props.t('Toolbar.Preview')}</h2>
                 </header>
                 <div className="preview-frame__content">
                   <div className="preview-frame-overlay" ref={(element) => { this.overlay = element; }}>
@@ -391,7 +391,7 @@ class IDEView extends React.Component {
           <Overlay
             title={this.props.t('About.Title')}
             previousPath={this.props.ide.previousPath}
-            ariaLabel="about"
+            ariaLabel={this.props.t('About.Title')}
           >
             <About previousPath={this.props.ide.previousPath} />
           </Overlay>
@@ -436,7 +436,7 @@ class IDEView extends React.Component {
         {this.props.ide.keyboardShortcutVisible &&
           <Overlay
             title={this.props.t('KeyboardShortcuts.Title')}
-            ariaLabel="keyboard shortcuts"
+            ariaLabel={this.props.t('KeyboardShortcuts.Title')}
             closeOverlay={this.props.closeKeyboardShortcutModal}
           >
             <KeyboardShortcutModal />
@@ -445,7 +445,7 @@ class IDEView extends React.Component {
         {this.props.ide.errorType &&
           <Overlay
             title="Error"
-            ariaLabel="error"
+            ariaLabel={this.props.t('Common.Error')}
             closeOverlay={this.props.hideErrorModal}
           >
             <ErrorModal
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index d4f6f2ab0f..38de93a118 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -154,6 +154,7 @@
     "Folder": "Folder"
   },
   "Common": {
+    "Error": "Error",
     "Save": "Save",
     "BackEditor": "Back to Editor",
     "ToogleSidebar": "Toogle Sidebar",
@@ -162,7 +163,6 @@
     "Password": "Password",
     "ConfirmPassword": "Confirm Password",
     "TitleAbout": "p5.js Web Editor | About",
-    "Error": "Error",
     "In order to save": "In order to save",
     "you must be logged in": "you must be logged in",
     "Please": "please",
@@ -170,6 +170,13 @@
     "WarningUnsavedChanges": "Are you sure you want to leave this page? You have unsaved changes.",
     "SketchSettings": "Sketch Settings",
     "SecurityProtocol": "Security Protocol",
-    "ServeOverHTTPS": "Serve over HTTPS"
+    "ServeOverHTTPS": "Serve over HTTPS",
+    "ARIA": {
+      "p5logo": "p5.js Logo"
+    }
+  },
+  "IDEVIEW": {
+    "SubmitFeedback": "Submit Feedback"
+
   }
 }
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
index c8adba3d64..05ccae20f3 100644
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@@ -69,6 +69,7 @@
   "Toast": {
     "OpenedNewSketch": "Abriste un nuevo bosquejo.",
     "SketchSaved": "Bosquejo guardado.",
+    "SketchFailedSave": "Failed to save sketch.",
     "AutosaveEnabled": "Grabado automático activado.",
     "LangChange": "Lenguaje cambiado"
   },
@@ -154,6 +155,7 @@
     "Folder": "Directorio"
   },
   "Common": {
+    "Error": "Error",
     "Save": "Guardar",
     "BackEditor": "Regresa al editor",
     "ToogleSidebar": "Alternar barra de deslizamiento",
@@ -162,7 +164,6 @@
     "Password": "Contraseña",
     "ConfirmPassword": "Confirma la contraseña",
     "TitleAbout": "p5.js Web Editor | Acerca de",
-    "Error": "Error",
     "In order to save": "Para guardar",
     "you must be logged in": "debes ingresar a tu cuenta",
     "Please": "Por favor",
@@ -170,8 +171,15 @@
     "WarningUnsavedChanges": "¿Estás seguro de que quieres salir de la página? Tienes cambios sin guardar.",
     "SketchSettings": "Configuración del Bosquejo ",
     "SecurityProtocol": "Protocolo de Seguridad",
-    "ServeOverHTTPS": "Utilizar HTTPS"
-   }
+    "ServeOverHTTPS": "Utilizar HTTPS",
+    "ARIA": {
+      "p5logo": "Logo p5.js "
+    }
+   },
+  "IDEVIEW": {
+    "SubmitFeedback": "Submit Feedback"
+
+  }
 }
 
 

From 63d291372171756f52d3eac8a9448d0053d49da0 Mon Sep 17 00:00:00 2001
From: oruburos <omar.verduga@gmail.com>
Date: Mon, 27 Jul 2020 23:55:55 +0100
Subject: [PATCH 07/11] Voice Over Labels in Preferences:index Labels included
 in translations.json Snapshot updated npm run test -- -u

---
 client/components/__test__/__snapshots__/Nav.test.jsx.snap | 1 -
 translations/locales/en-US/translations.json               | 2 +-
 translations/locales/es-419/translations.json              | 5 ++---
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/client/components/__test__/__snapshots__/Nav.test.jsx.snap b/client/components/__test__/__snapshots__/Nav.test.jsx.snap
index c2a0b9d663..78a9bc5483 100644
--- a/client/components/__test__/__snapshots__/Nav.test.jsx.snap
+++ b/client/components/__test__/__snapshots__/Nav.test.jsx.snap
@@ -14,7 +14,6 @@ exports[`Nav renders correctly 1`] = `
           class="nav__item-logo"
         >
           <test-file-stub
-            aria-label="p5.js Logo"
             classname="svg__logo"
             focusable="false"
             role="img"
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index 38de93a118..e6c59ce92b 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -69,6 +69,7 @@
   "Toast": {
     "OpenedNewSketch": "Opened new sketch.",
     "SketchSaved": "Sketch saved.",
+    "SketchFailedSave": "Failed to save sketch.",
     "AutosaveEnabled": "Autosave enabled.",
     "LangChange": "Language changed"
   },
@@ -177,6 +178,5 @@
   },
   "IDEVIEW": {
     "SubmitFeedback": "Submit Feedback"
-
   }
 }
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
index 05ccae20f3..c5184ec739 100644
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@@ -69,7 +69,7 @@
   "Toast": {
     "OpenedNewSketch": "Abriste un nuevo bosquejo.",
     "SketchSaved": "Bosquejo guardado.",
-    "SketchFailedSave": "Failed to save sketch.",
+    "SketchFailedSave": "Fallo al guardar el bosquejo.",
     "AutosaveEnabled": "Grabado automático activado.",
     "LangChange": "Lenguaje cambiado"
   },
@@ -163,7 +163,7 @@
     "UsernameSplit": "Nombre de usuario",
     "Password": "Contraseña",
     "ConfirmPassword": "Confirma la contraseña",
-    "TitleAbout": "p5.js Web Editor | Acerca de",
+    "TitleAbout": "Editor Web p5.js | Acerca de",
     "In order to save": "Para guardar",
     "you must be logged in": "debes ingresar a tu cuenta",
     "Please": "Por favor",
@@ -178,7 +178,6 @@
    },
   "IDEVIEW": {
     "SubmitFeedback": "Submit Feedback"
-
   }
 }
 

From b3606c9528d90efe27ea5a37384915324f56d698 Mon Sep 17 00:00:00 2001
From: oruburos <omar.verduga@gmail.com>
Date: Tue, 28 Jul 2020 19:33:27 +0100
Subject: [PATCH 08/11] translations.json ARIA labels adjacent to respective
 label Updated names to call the labels Common namespace without currently
 used entries

---
 client/components/Nav.jsx                     |   4 +-
 client/modules/IDE/components/About.jsx       |   4 +-
 .../IDE/components/Preferences/index.jsx      |  44 +++---
 .../modules/IDE/components/Toolbar.test.jsx   |   1 +
 client/modules/IDE/pages/IDEView.jsx          |   2 +-
 translations/locales/en-US/translations.json  | 131 ++++++++--------
 translations/locales/es-419/translations.json | 144 +++++++++---------
 7 files changed, 160 insertions(+), 170 deletions(-)

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 9407f296a4..e489d1b0ec 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -240,13 +240,13 @@ class Nav extends React.PureComponent {
     return (
       <ul className="nav__items-left">
         <li className="nav__item-logo">
-          <LogoIcon role="img" aria-label={this.props.t('Common.ARIA.p5logo')} focusable="false" className="svg__logo" />
+          <LogoIcon role="img" aria-label={this.props.t('Common.p5logoARIA')} focusable="false" className="svg__logo" />
         </li>
         <li className="nav__item nav__item--no-icon">
           <Link to="/" className="nav__back-link">
             <CaretLeftIcon className="nav__back-icon" focusable="false" aria-hidden="true" />
             <span className="nav__item-header">
-              {this.props.t('Common.BackEditor')}
+              {this.props.t('Nav.BackEditor')}
             </span>
           </Link>
         </li>
diff --git a/client/modules/IDE/components/About.jsx b/client/modules/IDE/components/About.jsx
index d49d787a06..0cab0ec5d7 100644
--- a/client/modules/IDE/components/About.jsx
+++ b/client/modules/IDE/components/About.jsx
@@ -10,10 +10,10 @@ function About(props) {
   return (
     <div className="about__content">
       <Helmet>
-        <title>p5.js Web Editor | {t('About.Title')} </title>
+        <title>p5.js Web Editor | {t('About.TitleHelmet')} </title>
       </Helmet>
       <div className="about__content-column">
-        <SquareLogoIcon className="about__logo" role="img" aria-label={t('Common.ARIA.p5logo')} focusable="false" />
+        <SquareLogoIcon className="about__logo" role="img" aria-label={t('Common.p5logoARIA')} focusable="false" />
       </div>
       <div className="about__content-column">
         <h3 className="about__content-column-title">{t('About.NewP5')}</h3>
diff --git a/client/modules/IDE/components/Preferences/index.jsx b/client/modules/IDE/components/Preferences/index.jsx
index 582850fbaa..c68af5bfee 100644
--- a/client/modules/IDE/components/Preferences/index.jsx
+++ b/client/modules/IDE/components/Preferences/index.jsx
@@ -110,36 +110,36 @@ class Preferences extends React.Component {
                 <input
                   type="radio"
                   onChange={() => this.props.setTheme('light')}
-                  aria-label={this.props.t('Preferences.ARIA.LightThemeOn')}
+                  aria-label={this.props.t('Preferences.LightThemeARIA')}
                   name="light theme"
                   id="light-theme-on"
                   className="preference__radio-button"
                   value="light"
                   checked={this.props.theme === 'light'}
                 />
-                <label htmlFor="light-theme-on" className="preference__option">{this.props.t('Preferences.Light')}</label>
+                <label htmlFor="light-theme-on" className="preference__option">{this.props.t('Preferences.LightTheme')}</label>
                 <input
                   type="radio"
                   onChange={() => this.props.setTheme('dark')}
-                  aria-label={this.props.t('Preferences.ARIA.DarkThemeOn')}
+                  aria-label={this.props.t('Preferences.DarkThemeARIA')}
                   name="dark theme"
                   id="dark-theme-on"
                   className="preference__radio-button"
                   value="dark"
                   checked={this.props.theme === 'dark'}
                 />
-                <label htmlFor="dark-theme-on" className="preference__option">{this.props.t('Preferences.Dark')}</label>
+                <label htmlFor="dark-theme-on" className="preference__option">{this.props.t('Preferences.DarkTheme')}</label>
                 <input
                   type="radio"
                   onChange={() => this.props.setTheme('contrast')}
-                  aria-label={this.props.t('Preferences.ARIA.HighContrastThemeOn')}
+                  aria-label={this.props.t('Preferences.HighContrastThemeARIA')}
                   name="high contrast theme"
                   id="high-contrast-theme-on"
                   className="preference__radio-button"
                   value="contrast"
                   checked={this.props.theme === 'contrast'}
                 />
-                <label htmlFor="high-contrast-theme-on" className="preference__option">{this.props.t('Preferences.HighContrast')}</label>
+                <label htmlFor="high-contrast-theme-on" className="preference__option">{this.props.t('Preferences.HighContrastTheme')}</label>
               </div>
             </div>
             <div className="preference">
@@ -147,11 +147,11 @@ class Preferences extends React.Component {
               <button
                 className="preference__minus-button"
                 onClick={this.decreaseFontSize}
-                aria-label={this.props.t('Preferences.ARIA.DecreaseFontSize')}
+                aria-label={this.props.t('Preferences.DecreaseFontARIA')}
                 disabled={this.state.fontSize <= 8}
               >
                 <MinusIcon focusable="false" aria-hidden="true" />
-                <h6 className="preference__label">{this.props.t('Preferences.Decrease')}</h6>
+                <h6 className="preference__label">{this.props.t('Preferences.DecreaseFont')}</h6>
               </button>
               <form onSubmit={this.onFontInputSubmit}>
                 <input
@@ -168,11 +168,11 @@ class Preferences extends React.Component {
               <button
                 className="preference__plus-button"
                 onClick={this.increaseFontSize}
-                aria-label={this.props.t('Preferences.ARIA.IncreaseFontSize')}
+                aria-label={this.props.t('Preferences.IncreaseFontARIA')}
                 disabled={this.state.fontSize >= 36}
               >
                 <PlusIcon focusable="false" aria-hidden="true" />
-                <h6 className="preference__label">{this.props.t('Preferences.Increase')}</h6>
+                <h6 className="preference__label">{this.props.t('Preferences.IncreaseFont')}</h6>
               </button>
             </div>
             <div className="preference">
@@ -181,7 +181,7 @@ class Preferences extends React.Component {
                 <input
                   type="radio"
                   onChange={() => this.props.setAutosave(true)}
-                  aria-label={this.props.t('Preferences.ARIA.AutosaveOn')}
+                  aria-label={this.props.t('Preferences.AutosaveOnARIA')}
                   name="autosave"
                   id="autosave-on"
                   className="preference__radio-button"
@@ -192,7 +192,7 @@ class Preferences extends React.Component {
                 <input
                   type="radio"
                   onChange={() => this.props.setAutosave(false)}
-                  aria-label={this.props.t('Preferences.ARIA.AutosaveOff')}
+                  aria-label={this.props.t('Preferences.AutosaveOffARIA')}
                   name="autosave"
                   id="autosave-off"
                   className="preference__radio-button"
@@ -208,7 +208,7 @@ class Preferences extends React.Component {
                 <input
                   type="radio"
                   onChange={() => this.props.setLinewrap(true)}
-                  aria-label={this.props.t('Preferences.ARIA.LineWrapOn')}
+                  aria-label={this.props.t('Preferences.LineWrapOnARIA')}
                   name="linewrap"
                   id="linewrap-on"
                   className="preference__radio-button"
@@ -219,7 +219,7 @@ class Preferences extends React.Component {
                 <input
                   type="radio"
                   onChange={() => this.props.setLinewrap(false)}
-                  aria-label={this.props.t('Preferences.ARIA.LineWrapOff')}
+                  aria-label={this.props.t('Preferences.LineWrapOffARIA')}
                   name="linewrap"
                   id="linewrap-off"
                   className="preference__radio-button"
@@ -237,7 +237,7 @@ class Preferences extends React.Component {
                 <input
                   type="radio"
                   onChange={() => this.props.setLineNumbers(true)}
-                  aria-label={this.props.t('Preferences.ARIA.LineNumbersOn')}
+                  aria-label={this.props.t('Preferences.LineNumbersOnARIA')}
                   name="line numbers"
                   id="line-numbers-on"
                   className="preference__radio-button"
@@ -248,7 +248,7 @@ class Preferences extends React.Component {
                 <input
                   type="radio"
                   onChange={() => this.props.setLineNumbers(false)}
-                  aria-label={this.props.t('Preferences.ARIA.LineNumbersOff')}
+                  aria-label={this.props.t('Preferences.LineNumbersOffARIA')}
                   name="line numbers"
                   id="line-numbers-off"
                   className="preference__radio-button"
@@ -264,7 +264,7 @@ class Preferences extends React.Component {
                 <input
                   type="radio"
                   onChange={() => this.props.setLintWarning(true)}
-                  aria-label={this.props.t('Preferences.ARIA.LintWarningOn')}
+                  aria-label={this.props.t('Preferences.LintWarningOnARIA')}
                   name="lint warning"
                   id="lint-warning-on"
                   className="preference__radio-button"
@@ -275,7 +275,7 @@ class Preferences extends React.Component {
                 <input
                   type="radio"
                   onChange={() => this.props.setLintWarning(false)}
-                  aria-label={this.props.t('Preferences.ARIA.LintWarningOff')}
+                  aria-label={this.props.t('Preferences.LintWarningOffARIA')}
                   name="lint warning"
                   id="lint-warning-off"
                   className="preference__radio-button"
@@ -286,7 +286,7 @@ class Preferences extends React.Component {
                 <button
                   className="preference__preview-button"
                   onClick={() => beep.play()}
-                  aria-label={this.props.t('Preferences.ARIA.PreviewSound')}
+                  aria-label={this.props.t('Preferences.PreviewSoundARIA')}
                 >
                   {this.props.t('Preferences.PreviewSound')}
                 </button>
@@ -302,7 +302,7 @@ class Preferences extends React.Component {
                   onChange={(event) => {
                     this.props.setTextOutput(event.target.checked);
                   }}
-                  aria-label={this.props.t('Preferences.ARIA.TextOutputOn')}
+                  aria-label={this.props.t('Preferences.TextOutputARIA')}
                   name="text output"
                   id="text-output-on"
                   value="On"
@@ -314,7 +314,7 @@ class Preferences extends React.Component {
                   onChange={(event) => {
                     this.props.setGridOutput(event.target.checked);
                   }}
-                  aria-label={this.props.t('Preferences.ARIA.TableOutputOn')}
+                  aria-label={this.props.t('Preferences.TableOutputARIA')}
                   name="table output"
                   id="table-output-on"
                   value="On"
@@ -326,7 +326,7 @@ class Preferences extends React.Component {
                   onChange={(event) => {
                     this.props.setSoundOutput(event.target.checked);
                   }}
-                  aria-label={this.props.t('Preferences.ARIA.SoundOutputOn')}
+                  aria-label={this.props.t('Preferences.SoundOutputARIA')}
                   name="sound output"
                   id="sound-output-on"
                   value="On"
diff --git a/client/modules/IDE/components/Toolbar.test.jsx b/client/modules/IDE/components/Toolbar.test.jsx
index cd43530260..07ed358088 100644
--- a/client/modules/IDE/components/Toolbar.test.jsx
+++ b/client/modules/IDE/components/Toolbar.test.jsx
@@ -75,6 +75,7 @@ describe('<ToolbarComponent />', () => {
   it('sketch owner can\'t change to empty name', async () => {
     const props = renderComponent({ project: { isEditingName: true } });
 
+    // const sketchNameInput = screen.getByLabelText('New sketch name');
     const sketchNameInput = screen.getByLabelText('New sketch name');
     fireEvent.change(sketchNameInput, { target: { value: '' } });
     fireEvent.blur(sketchNameInput);
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index 8cee3dfb1f..a640b12e4b 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -398,7 +398,7 @@ class IDEView extends React.Component {
         }
         {this.props.location.pathname === '/feedback' &&
           <Overlay
-            title="Submit Feedback"
+            title={this.props.t('IDEView.SubmitFeedback')}
             previousPath={this.props.ide.previousPath}
             ariaLabel="submit-feedback"
           >
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index e6c59ce92b..4e456cdcd4 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -31,6 +31,8 @@
       "About": "About"
     },
     "Lang": "Language",
+    "BackEditor": "Back to Editor",
+    "WarningUnsavedChanges": "Are you sure you want to leave this page? You have unsaved changes.",
     "Login": {
       "Login": "Log in",
       "LoginOr": "or",
@@ -57,14 +59,15 @@
   },
   "About": {
     "Title": "About",
+    "TitleHelmet": "p5.js Web Editor | About",
     "Contribute": "Contribute",
     "NewP5": "New to p5.js?",
-     "Report": "Report a bug",
-      "Learn": "Learn",
-      "Resources": "Resources",
-      "Libraries": "Libraries",
-      "Forum": "Forum",
-      "Examples": "Examples"
+    "Report": "Report a bug",
+    "Learn": "Learn",
+    "Resources": "Resources",
+    "Libraries": "Libraries",
+    "Forum": "Forum",
+    "Examples": "Examples"
   },
   "Toast": {
     "OpenedNewSketch": "Opened new sketch.",
@@ -75,55 +78,63 @@
   },
   "Toolbar": {
     "Preview": "Preview",
-    "Auto-refresh": "Auto-refresh"
+    "Auto-refresh": "Auto-refresh",
+    "OpenPreferencesARIA": "Open Preferences",
+    "PlaySketchARIA": "Play sketch",
+    "PlayOnlyVisualSketchARIA": "Play only visual sketch",
+    "StopSketchARIA": "Stop sketch",
+    "EditSketchARIA": "Edit sketch name",
+    "NewSketchNameARIA": "New sketch name"
   },
   "Console": {
+    "Title": "Console",
     "Clear": "Clear",
-    "Console": "Console"
+    "ClearARIA": "Clear console",
+    "Close": "Close",
+    "CloseARIA": "Close console",
+    "Open": "Open",
+    "OpenARIA": "Open console"
   },
   "Preferences": {
     "Settings": "Settings",
-      "GeneralSettings": "General settings",
-      "Accessibility": "Accessibility",
-      "Theme": "Theme",
-      "Light": "Light",
-      "Dark": "Dark",
-      "HighContrast": "High Contrast",
-      "TextSize": "Text Size",
-      "Decrease": "Decrease",
-      "Increase": "Increase",
-      "IndentationAmount": "Indentation amount",
-      "Autosave": "Autosave",
-      "On": "On",
-      "Off": "Off",
-      "WordWrap": "Word Wrap",
-      "LintWarningSound": "Lint warning sound",
-      "PreviewSound": "Preview sound",
-      "AccessibleTextBasedCanvas": "Accessible text-based canvas",
-      "UsedScreenReader": "Used with screen reader",
-      "PlainText": "Plain-text",
-      "TableText": "Table-text",
-      "Sound": "Sound",
-      "LineNumbers": "Line numbers",
-    "ARIA": {
-      "LightThemeOn": "light theme on",
-      "DarkThemeOn": "dark theme on",
-      "HighContrastThemeOn": "high contrast theme on",
-      "DecreaseFontSize": "decrease font size",
-      "IncreaseFontSize": "increase font size",
-      "AutosaveOn": "autosave on",
-      "AutosaveOff": "autosave off",
-      "LineWrapOn": "linewrap on",
-      "LineWrapOff": "linewrap off",
-      "LineNumbersOn": "line numbers on",
-      "LineNumbersOff": "line numbers off",
-      "LintWarningOn": "lint warning on",
-      "LintWarningOff": "lint warning off",
-      "PreviewSound": "preview sound",
-      "TextOutputOn": "text output on",
-      "TableOutputOn": "table output on",
-      "SoundOutputOn": "sound output on"
-    }
+    "GeneralSettings": "General settings",
+    "Accessibility": "Accessibility",
+    "Theme": "Theme",
+    "LightTheme": "Light",
+    "LightThemeARIA": "light theme on",
+    "DarkTheme": "Dark",
+    "DarkThemeARIA": "dark theme on",
+    "HighContrastTheme": "High Contrast",
+    "HighContrastThemeARIA": "high contrast theme on",
+    "TextSize": "Text Size",
+    "DecreaseFont": "Decrease",
+    "DecreaseFontARIA": "decrease font size",
+    "IncreaseFont": "Increase",
+    "IncreaseFontARIA": "increase font size",
+    "Autosave": "Autosave",
+    "On": "On",
+    "AutosaveOnARIA": "autosave on",
+    "Off": "Off",
+    "AutosaveOffARIA": "autosave off",
+    "WordWrap": "Word Wrap",
+    "LineWrapOnARIA": "linewrap on",
+    "LineWrapOffARIA": "linewrap off",
+    "LineNumbers": "Line numbers",
+    "LineNumbersOnARIA": "line numbers on",
+    "LineNumbersOffARIA": "line numbers off",
+    "LintWarningSound": "Lint warning sound",
+    "LintWarningOnARIA": "lint warning on",
+    "LintWarningOffARIA": "lint warning off",
+    "PreviewSound": "Preview sound",
+    "PreviewSoundARIA": "preview sound",
+    "AccessibleTextBasedCanvas": "Accessible text-based canvas",
+    "UsedScreenReader": "Used with screen reader",
+    "PlainText": "Plain-text",
+    "TextOutputARIA": "text output on",
+    "TableText": "Table-text",
+    "TableOutputARIA": "table output on",
+    "Sound": "Sound",
+    "SoundOutputARIA": "sound output on"
   },
   "KeyboardShortcuts": {
     "Title": " Keyboard Shortcuts",
@@ -157,26 +168,10 @@
   "Common": {
     "Error": "Error",
     "Save": "Save",
-    "BackEditor": "Back to Editor",
-    "ToogleSidebar": "Toogle Sidebar",
-    "ToogleConsole": "Toogle Console",
-    "UsernameSplit": "User Name",
-    "Password": "Password",
-    "ConfirmPassword": "Confirm Password",
-    "TitleAbout": "p5.js Web Editor | About",
-    "In order to save": "In order to save",
-    "you must be logged in": "you must be logged in",
-    "Please": "please",
-    "FindInFiles": "Find in files",
-    "WarningUnsavedChanges": "Are you sure you want to leave this page? You have unsaved changes.",
-    "SketchSettings": "Sketch Settings",
-    "SecurityProtocol": "Security Protocol",
-    "ServeOverHTTPS": "Serve over HTTPS",
-    "ARIA": {
-      "p5logo": "p5.js Logo"
-    }
+    "p5logoARIA": "p5.js Logo"
+
   },
-  "IDEVIEW": {
+  "IDEView": {
     "SubmitFeedback": "Submit Feedback"
   }
 }
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
index c5184ec739..8b8d8f873a 100644
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@@ -31,12 +31,14 @@
       "About": "Acerca de"
     },
     "Lang": "Lenguaje",
+    "BackEditor": "Regresa al editor",
+    "WarningUnsavedChanges": "¿Realmente quieres salir de la página? Tienes cambios sin guardar.",
     "Login": {
       "Login": "Ingresa",
       "LoginOr": "o",
       "SignUp": "registráte",
       "Email": "correo electrónico",
-      "Username": "nombre de usuario",
+      "Username": "Identificación",
       "LoginGithub": "Ingresa con Github",
       "LoginGoogle": "Ingresa con Google",
       "DontHaveAccount": "¿No tienes cuenta?",
@@ -44,7 +46,7 @@
       "ResetPassword": "Regenera tu contraseña"
     },
     "Auth": {
-      "Welcome": "Bienvenido",
+      "Welcome": "Hola",
       "Hello": "Hola",
       "MyAccount": "Mi Cuenta",
       "My": "Mi",
@@ -57,14 +59,15 @@
   },
   "About": {
     "Title": "Acerca de",
+    "TitleHelmet": "Editor Web p5.js | Acerca de",
     "Contribute": "Contribuir",
     "NewP5": "¿Empezando con p5.js?",
-     "Report": "Reporta un error",
-     "Learn": "Aprender",
-     "Resources": "Recursos",
-     "Libraries": "Bibliotecas",
-     "Forum": "Foro",
-     "Examples": "Ejemplos"
+    "Report": "Reporta un error",
+    "Learn": "Aprender",
+    "Resources": "Recursos",
+    "Libraries": "Bibliotecas",
+    "Forum": "Foro",
+    "Examples": "Ejemplos"
   },
   "Toast": {
     "OpenedNewSketch": "Abriste un nuevo bosquejo.",
@@ -75,55 +78,63 @@
   },
   "Toolbar": {
     "Preview": "Vista previa",
-    "Auto-refresh": "Auto-refrescar"
+    "Auto-refresh": "Auto-refrescar",
+    "OpenPreferencesARIA": "Abrir Preferencias",
+    "PlaySketchARIA": "Ejecutar bosquejo",
+    "PlayOnlyVisualSketchARIA": "Ejecutar bosquejo visual",
+    "StopSketchARIA": "Detener bosquejo",
+    "EditSketchARIA": "Editar nombre de bosquejo",
+    "NewSketchNameARIA": "Nuevo nombre de bosquejo"
   },
   "Console": {
+    "Title": "Consola",
     "Clear": "Limpiar",
-    "Console": "Consola"
+    "ClearARIA": "limpiar consola",
+    "Close": "Cerrar",
+    "CloseARIA": "cerrar consola",
+    "Open": "Abrir",
+    "OpenARIA": "Abrir consola"
   },
   "Preferences": {
     "Settings": "Configuración",
-      "GeneralSettings": "Configuración general",
-      "Accessibility": "Accesibilidad",
-      "Theme": "Modo de visualización",
-      "Light": "Claro",
-      "Dark": "Oscuro",
-      "HighContrast": "Alto contraste",
-      "TextSize": "Tamaño del texto",
-      "Decrease": "Disminuir",
-      "Increase": "Aumentar",
-      "IndentationAmount": "Cantidad de indentación",
-      "Autosave": "Grabar automáticamente",
-      "On": "Activar",
-      "Off": "Desactivar",
-      "WordWrap":  "Ajuste automático de línea",
-      "LintWarningSound": "Sonido de alarma Lint",
-      "PreviewSound": "Probar sonido",
-      "AccessibleTextBasedCanvas": "Lienzo accesible por texto",
-      "UsedScreenReader": "Uso con screen reader",
-      "PlainText": "Texto sin formato",
-      "TableText":  "Tablero de texto",
-      "Sound": "Sonido",
-      "LineNumbers": "Número de línea",
-    "ARIA": {
-      "LightThemeOn": "Modo de visualización claro activado",
-      "DarkThemeOn": "Modo de visualización oscuro activado",
-      "HighContrastThemeOn": "Modo de visualización de alto contraste activado",
-      "DecreaseFontSize": "Disminuir tamaño del texto",
-      "IncreaseFontSize": "Aumentar tamaño del texto",
-      "AutosaveOn": "Grabado automático activado",
-      "AutosaveOff": "Grabado automático desactivado",
-      "LineWrapOn": "Ajuste automático de línea activado",
-      "LineWrapOff": "Ajuste automático de línea desactivado",
-      "LineNumbersOn": "Número de línea activado",
-      "LineNumbersOff": "Número de línea desactivado",
-      "LintWarningOn": "Sonido de alarma Lint activado",
-      "LintWarningOff": "Sonido de alarma Lint desactivado",
-      "PreviewSound": "Probar sonido",
-      "TextOutputOn": "Salida de texto activado",
-      "TableOutputOn": "Salida de tablero activado",
-      "SoundOutputOn": "Salida de sonido activado"
-    }
+    "GeneralSettings": "Configuración general",
+    "Accessibility": "Accesibilidad",
+    "Theme": "Modo de visualización",
+    "LightTheme": "Claro",
+    "LightThemeARIA": "Modo de visualización claro activado",
+    "DarkTheme": "Oscuro",
+    "DarkThemeARIA": "Modo de visualización oscuro activado",
+    "HighContrastTheme": "Alto contraste",
+    "HighContrastThemeARIA": "Modo de visualización de alto contraste activado",
+    "TextSize": "Tamaño del texto",
+    "DecreaseFont": "Disminuir",
+    "DecreaseFontARIA": "Disminuir tamaño del texto",
+    "IncreaseFont": "Aumentar",
+    "IncreaseFontARIA": "Aumentar tamaño del texto",
+    "Autosave": "Grabar automáticamente",
+    "On": "Activar",
+    "AutosaveOnARIA": "Grabado automático activado",
+    "Off": "Desactivar",
+    "AutosaveOffARIA": "Grabado automático desactivado",
+    "WordWrap": "Ajuste automático de línea",
+    "LineWrapOnARIA": "Ajuste automático de línea activado",
+    "LineWrapOffARIA": "Ajuste automático de línea desactivado",
+    "LineNumbers": "Número de línea",
+    "LineNumbersOnARIA": "Número de línea activado",
+    "LineNumbersOffARIA": "Número de línea desactivado",
+    "LintWarningSound": "Sonido de alarma Lint",
+    "LintWarningOnARIA": "Sonido de alarma Lint activado",
+    "LintWarningOffARIA": "Sonido de alarma Lint desactivado",
+    "PreviewSound": "Probar sonido",
+    "PreviewSoundARIA": "Probar sonido",
+    "AccessibleTextBasedCanvas": "Lienzo accesible por texto",
+    "UsedScreenReader": "Uso con screen reader",
+    "PlainText": "Texto sin formato",
+    "TextOutputARIA": "Salida de texto activado",
+    "TableText": "Tablero de texto",
+    "TableOutputARIA": "Salida de tablero activado",
+    "Sound": "Sonido",
+    "SoundOutputARIA": "Salida de sonido activado"
   },
   "KeyboardShortcuts": {
     "Title": " Atajos de teclado",
@@ -131,7 +142,7 @@
     "SublimeText": "los atajos de Sublime Text ",
     "CodeEditing": {
       "Tidy": "Ordenar",
-      "FindText":  "Encontrar texto",
+      "FindText": "Encontrar texto",
       "FindNextMatch": "Encontrar siguiente ocurrencia",
       "FindPrevMatch": "Encontrar ocurrencia previa",
       "IndentCodeLeft": "Indentar código a la izquierda",
@@ -142,9 +153,9 @@
       "CodeEditing": "Editando Código"
     },
     "General": {
-      "StartSketch":  "Iniciar bosquejo",
+      "StartSketch": "Iniciar bosquejo",
       "StopSketch": "Detener bosquejo",
-      "TurnOnAccessibleOutput":  "Activar salida accesible",
+      "TurnOnAccessibleOutput": "Activar salida accesible",
       "TurnOffAccessibleOutput": "Desactivar salida accesible"
     }
   },
@@ -157,27 +168,10 @@
   "Common": {
     "Error": "Error",
     "Save": "Guardar",
-    "BackEditor": "Regresa al editor",
-    "ToogleSidebar": "Alternar barra de deslizamiento",
-    "ToogleConsole": "Alternar consola",
-    "UsernameSplit": "Nombre de usuario",
-    "Password": "Contraseña",
-    "ConfirmPassword": "Confirma la contraseña",
-    "TitleAbout": "Editor Web p5.js | Acerca de",
-    "In order to save": "Para guardar",
-    "you must be logged in": "debes ingresar a tu cuenta",
-    "Please": "Por favor",
-    "FindInFiles": "Encontrar en archivos",
-    "WarningUnsavedChanges": "¿Estás seguro de que quieres salir de la página? Tienes cambios sin guardar.",
-    "SketchSettings": "Configuración del Bosquejo ",
-    "SecurityProtocol": "Protocolo de Seguridad",
-    "ServeOverHTTPS": "Utilizar HTTPS",
-    "ARIA": {
-      "p5logo": "Logo p5.js "
-    }
-   },
-  "IDEVIEW": {
-    "SubmitFeedback": "Submit Feedback"
+    "p5logoARIA": "Logo p5.js "
+  },
+  "IDEView": {
+    "SubmitFeedback": "Enviar retroalimentación"
   }
 }
 

From 2fc71c128cd4570fceca67a1971bf7df4cc74169 Mon Sep 17 00:00:00 2001
From: ov <omar.verduga@gmail.com>
Date: Thu, 30 Jul 2020 13:51:22 +0100
Subject: [PATCH 09/11] Update Nav.jsx

Missing Common.p5logoARIA key
---
 client/components/Nav.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index e489d1b0ec..1661711291 100644
--- a/client/components/Nav.jsx
+++ b/client/components/Nav.jsx
@@ -258,7 +258,7 @@ class Nav extends React.PureComponent {
     return (
       <ul className="nav__items-left">
         <li className="nav__item-logo">
-          <LogoIcon role="img" aria-label={this.props.t('Common.ARIA.p5logo')} focusable="false" className="svg__logo" />
+          <LogoIcon role="img" aria-label={this.props.t('Common.p5logoARIA')} focusable="false" className="svg__logo" />
         </li>
         <li className={navDropdownState.file}>
           <button

From 1e809a9663027421c787b986bcab6e28243ecbaf Mon Sep 17 00:00:00 2001
From: ov <omar.verduga@gmail.com>
Date: Thu, 30 Jul 2020 14:08:21 +0100
Subject: [PATCH 10/11] Update Toolbar.test.jsx

Deleting commented line 78
---
 client/modules/IDE/components/Toolbar.test.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/modules/IDE/components/Toolbar.test.jsx b/client/modules/IDE/components/Toolbar.test.jsx
index 07ed358088..cd43530260 100644
--- a/client/modules/IDE/components/Toolbar.test.jsx
+++ b/client/modules/IDE/components/Toolbar.test.jsx
@@ -75,7 +75,6 @@ describe('<ToolbarComponent />', () => {
   it('sketch owner can\'t change to empty name', async () => {
     const props = renderComponent({ project: { isEditingName: true } });
 
-    // const sketchNameInput = screen.getByLabelText('New sketch name');
     const sketchNameInput = screen.getByLabelText('New sketch name');
     fireEvent.change(sketchNameInput, { target: { value: '' } });
     fireEvent.blur(sketchNameInput);

From 118741a51b6ce54634ef15f26cfcac47de98ca67 Mon Sep 17 00:00:00 2001
From: oruburos <omar.verduga@gmail.com>
Date: Fri, 31 Jul 2020 00:54:43 +0100
Subject: [PATCH 11/11] Update in keys

---
 client/modules/IDE/components/About.jsx      | 2 +-
 client/modules/IDE/pages/IDEView.jsx         | 2 +-
 translations/locales/en-US/translations.json | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/modules/IDE/components/About.jsx b/client/modules/IDE/components/About.jsx
index 0cab0ec5d7..dcf9073f0a 100644
--- a/client/modules/IDE/components/About.jsx
+++ b/client/modules/IDE/components/About.jsx
@@ -10,7 +10,7 @@ function About(props) {
   return (
     <div className="about__content">
       <Helmet>
-        <title>p5.js Web Editor | {t('About.TitleHelmet')} </title>
+        <title> {t('About.TitleHelmet')} </title>
       </Helmet>
       <div className="about__content-column">
         <SquareLogoIcon className="about__logo" role="img" aria-label={t('Common.p5logoARIA')} focusable="false" />
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index a640b12e4b..04cbad776d 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -55,7 +55,7 @@ function warnIfUnsavedChanges(props) { // eslint-disable-line
     props.persistState();
     window.onbeforeunload = null;
   } else if (props.ide.unsavedChanges) {
-    if (!window.confirm(props.t('Common.WarningUnsavedChanges'))) {
+    if (!window.confirm(props.t('Nav.WarningUnsavedChanges'))) {
       return false;
     }
     props.setUnsavedChanges(false);
diff --git a/translations/locales/en-US/translations.json b/translations/locales/en-US/translations.json
index 4e456cdcd4..56a898f563 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -154,7 +154,7 @@
     },
     "General": {
       "StartSketch": "Start Sketch",
-      "StopSketch": "StopSketch",
+      "StopSketch": "Stop Sketch",
       "TurnOnAccessibleOutput": "Turn On Accessible Output",
       "TurnOffAccessibleOutput": "Turn Off Accessible Output"
     }