From 05e43c70b788ffb1d7f0aa22ed566bdaa9b91f22 Mon Sep 17 00:00:00 2001
From: ov <omar.verduga@gmail.com>
Date: Fri, 31 Jul 2020 14:20:42 +0100
Subject: [PATCH] Minimal Viable Navigation Menu (#1510)

* Minimal Viable Navigation Menu
Translation with new namespace
I18Next configuration leaning on default separator and namespace

Broom: i18n + debug:false

* Minimal Viable Navigation Menu
Test entry for Toolbar.test.jsx

* 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

* Voice Over Labels in Preferences:index
Labels included in translations.json

* Voice Over Labels in Preferences:index
Labels included in translations.json

* Voice Over Labels in Preferences:index
Labels included in translations.json

* Voice Over Labels in Preferences:index
Labels included in translations.json
Snapshot updated npm run test -- -u

* translations.json ARIA labels adjacent to respective label
Updated names to call the labels
Common namespace without currently used entries

* Update Nav.jsx

Missing Common.p5logoARIA key

* Update Toolbar.test.jsx

Deleting commented line 78

* Update in keys

Co-authored-by: Andrew Nicolaou <me@andrewnicolaou.co.uk>
---
 client/components/Nav.jsx                     |  82 +++---
 .../__test__/__snapshots__/Nav.test.jsx.snap  |   1 -
 client/i18n.js                                |   3 +-
 client/modules/IDE/actions/project.js         |  16 +-
 client/modules/IDE/components/About.jsx       |  32 +--
 .../IDE/components/KeyboardShortcutModal.jsx  |  28 +-
 .../IDE/components/Preferences/index.jsx      |  90 +++----
 client/modules/IDE/components/Toast.jsx       |   2 +-
 client/modules/IDE/components/Toolbar.jsx     |   9 +-
 .../modules/IDE/components/Toolbar.test.jsx   |   1 +
 client/modules/IDE/pages/IDEView.jsx          |  23 +-
 translations/locales/en-US/translations.json  | 237 ++++++++++-------
 translations/locales/es-419/translations.json | 243 +++++++++++-------
 13 files changed, 444 insertions(+), 323 deletions(-)

diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx
index 4c27d6fa..16617112 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');
   }
 
@@ -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.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('BackEditor')}
+              {this.props.t('Nav.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.p5logoARIA')} focusable="false" className="svg__logo" />
         </li>
         <li className={navDropdownState.file}>
           <button
@@ -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.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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('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('About')}
+                {this.props.t('Nav.Help.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/components/__test__/__snapshots__/Nav.test.jsx.snap b/client/components/__test__/__snapshots__/Nav.test.jsx.snap
index c2a0b9d6..78a9bc54 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/client/i18n.js b/client/i18n.js
index 3cdf5991..66131bab 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/actions/project.js b/client/modules/IDE/actions/project.js
index 2909742f..b57cacd2 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 81bca172..dcf9073f 100644
--- a/client/modules/IDE/components/About.jsx
+++ b/client/modules/IDE/components/About.jsx
@@ -10,23 +10,13 @@ function About(props) {
   return (
     <div className="about__content">
       <Helmet>
-        <title>p5.js Web Editor | About </title>
+        <title> {t('About.TitleHelmet')} </title>
       </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>  */}
+        <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('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('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('Learn')}
+            {t('About.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.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('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('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('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('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('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 b1acadbb..4d471ea0 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('Common.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 5fd5147d..c68af5bf 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('GeneralSettings')}</h4></Tab>
-              <Tab><h4 className="tabs__title">{this.props.t('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('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.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('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="dark theme on"
+                  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('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="high contrast theme on"
+                  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('HighContrast')}</label>
+                <label htmlFor="high-contrast-theme-on" className="preference__option">{this.props.t('Preferences.HighContrastTheme')}</label>
               </div>
             </div>
             <div className="preference">
-              <h4 className="preference__title">{this.props.t('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.DecreaseFontARIA')}
                 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.DecreaseFont')}</h6>
               </button>
               <form onSubmit={this.onFontInputSubmit}>
                 <input
@@ -168,133 +168,133 @@ class Preferences extends React.Component {
               <button
                 className="preference__plus-button"
                 onClick={this.increaseFontSize}
-                aria-label="increase font size"
+                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('Increase')}</h6>
+                <h6 className="preference__label">{this.props.t('Preferences.IncreaseFont')}</h6>
               </button>
             </div>
             <div className="preference">
-              <h4 className="preference__title">{this.props.t('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.AutosaveOnARIA')}
                   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('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.AutosaveOffARIA')}
                   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('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('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.LineWrapOnARIA')}
                   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('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.LineWrapOffARIA')}
                   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('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('LineNumbers')}</h4>
+              <h4 className="preference__title">{this.props.t('Preferences.LineNumbers')}</h4>
               <div className="preference__options">
                 <input
                   type="radio"
                   onChange={() => this.props.setLineNumbers(true)}
-                  aria-label="line numbers on"
+                  aria-label={this.props.t('Preferences.LineNumbersOnARIA')}
                   name="line numbers"
                   id="line-numbers-on"
                   className="preference__radio-button"
                   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.On')}</label>
                 <input
                   type="radio"
                   onChange={() => this.props.setLineNumbers(false)}
-                  aria-label="line numbers off"
+                  aria-label={this.props.t('Preferences.LineNumbersOffARIA')}
                   name="line numbers"
                   id="line-numbers-off"
                   className="preference__radio-button"
                   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.Off')}</label>
               </div>
             </div>
             <div className="preference">
-              <h4 className="preference__title">{this.props.t('LintWarningSound')}</h4>
+              <h4 className="preference__title">{this.props.t('Preferences.LintWarningSound')}</h4>
               <div className="preference__options">
                 <input
                   type="radio"
                   onChange={() => this.props.setLintWarning(true)}
-                  aria-label="lint warning on"
+                  aria-label={this.props.t('Preferences.LintWarningOnARIA')}
                   name="lint warning"
                   id="lint-warning-on"
                   className="preference__radio-button"
                   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.On')}</label>
                 <input
                   type="radio"
                   onChange={() => this.props.setLintWarning(false)}
-                  aria-label="lint warning off"
+                  aria-label={this.props.t('Preferences.LintWarningOffARIA')}
                   name="lint warning"
                   id="lint-warning-off"
                   className="preference__radio-button"
                   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.Off')}</label>
                 <button
                   className="preference__preview-button"
                   onClick={() => beep.play()}
-                  aria-label="preview sound"
+                  aria-label={this.props.t('Preferences.PreviewSoundARIA')}
                 >
-                  {this.props.t('PreviewSound')}
+                  {this.props.t('Preferences.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.AccessibleTextBasedCanvas')}</h4>
+              <h6 className="preference__subtitle">{this.props.t('Preferences.UsedScreenReader')}</h6>
 
               <div className="preference__options">
                 <input
@@ -302,37 +302,37 @@ class Preferences extends React.Component {
                   onChange={(event) => {
                     this.props.setTextOutput(event.target.checked);
                   }}
-                  aria-label="text output on"
+                  aria-label={this.props.t('Preferences.TextOutputARIA')}
                   name="text output"
                   id="text-output-on"
                   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.PlainText')}</label>
                 <input
                   type="checkbox"
                   onChange={(event) => {
                     this.props.setGridOutput(event.target.checked);
                   }}
-                  aria-label="table output on"
+                  aria-label={this.props.t('Preferences.TableOutputARIA')}
                   name="table output"
                   id="table-output-on"
                   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.TableText')}</label>
                 <input
                   type="checkbox"
                   onChange={(event) => {
                     this.props.setSoundOutput(event.target.checked);
                   }}
-                  aria-label="sound output on"
+                  aria-label={this.props.t('Preferences.SoundOutputARIA')}
                   name="sound output"
                   id="sound-output-on"
                   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.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 5aaa3f70..f3cc0fc7 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 401a7e76..5a126b35 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/components/Toolbar.test.jsx b/client/modules/IDE/components/Toolbar.test.jsx
index d558fc46..cd435302 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} />);
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index b28e505f..04cbad77 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('Nav.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; }}>
@@ -389,16 +389,16 @@ 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"
+            ariaLabel={this.props.t('About.Title')}
           >
             <About previousPath={this.props.ide.previousPath} />
           </Overlay>
         }
         {this.props.location.pathname === '/feedback' &&
           <Overlay
-            title="Submit Feedback"
+            title={this.props.t('IDEView.SubmitFeedback')}
             previousPath={this.props.ide.previousPath}
             ariaLabel="submit-feedback"
           >
@@ -435,8 +435,8 @@ class IDEView extends React.Component {
         }
         {this.props.ide.keyboardShortcutVisible &&
           <Overlay
-            title={this.props.t('KeyboardShortcuts')}
-            ariaLabel="keyboard shortcuts"
+            title={this.props.t('KeyboardShortcuts.Title')}
+            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
@@ -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 b696d0db..56a898f5 100644
--- a/translations/locales/en-US/translations.json
+++ b/translations/locales/en-US/translations.json
@@ -1,116 +1,177 @@
 {
+  "Nav": {
+    "File": {
+      "Title": "File",
+      "New": "New",
+      "Share": "Share",
+      "Duplicate": "Duplicate",
+      "Open": "Open",
+      "Download": "Download",
+      "AddToCollection": "Add to Collection",
+      "Examples": "Examples"
+    },
+    "Edit": {
+      "Title": "Edit",
+      "TidyCode": "Tidy Code",
+      "Find": "Find",
+      "FindNext": "Find Next",
+      "FindPrevious": "Find Previous"
+    },
+    "Sketch": {
+      "Title": "Sketch",
+      "AddFile": "Add File",
+      "AddFolder": "Add Folder",
+      "Run": "Run",
+      "Stop": "Stop"
+    },
+    "Help": {
+      "Title": "Help",
+      "KeyboardShortcuts": "Keyboard Shortcuts",
+      "Reference": "Reference",
+      "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",
+      "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",
+    "TitleHelmet": "p5.js Web Editor | About",
     "Contribute": "Contribute",
     "NewP5": "New to p5.js?",
     "Report": "Report a bug",
     "Learn": "Learn",
-    "About": "About",
     "Resources": "Resources",
     "Libraries": "Libraries",
     "Forum": "Forum",
-    "File": "File",
-    "New": "New",
-    "Save": "Save",
-    "Share": "Share",
-    "Duplicate": "Duplicate",
-    "Examples": "Examples",
-    "Edit": "Edit",
-    "TidyCode": "Tidy Code",
-    "Find": "Find",
-    "AddToCollection": "Add to Collection",
-    "FindNext": "Find Next",
-    "FindPrevious": "Find Previous",
-    "Sketch": "Sketch",
-    "AddFile": "Add File",
-    "AddFolder": "Add Folder",
-    "Run": "Run",
-    "Stop": "Stop",
-    "Help": "Help",
-    "KeyboardShortcuts": "Keyboard Shortcuts",
-    "Reference": "Reference",
-    "Tidy": "Tidy",
-    "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",
+    "Examples": "Examples"
+  },
+  "Toast": {
+    "OpenedNewSketch": "Opened new sketch.",
+    "SketchSaved": "Sketch saved.",
+    "SketchFailedSave": "Failed to save sketch.",
+    "AutosaveEnabled": "Autosave enabled.",
+    "LangChange": "Language changed"
+  },
+  "Toolbar": {
     "Preview": "Preview",
     "Auto-refresh": "Auto-refresh",
-    "Console": "Console",
+    "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",
+    "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",
+    "LightTheme": "Light",
+    "LightThemeARIA": "light theme on",
+    "DarkTheme": "Dark",
+    "DarkThemeARIA": "dark theme on",
+    "HighContrastTheme": "High Contrast",
+    "HighContrastThemeARIA": "high contrast theme on",
     "TextSize": "Text Size",
-    "Decrease": "Decrease",
-    "Increase": "Increase",
-    "IndentationAmount": "Indentation amount",
+    "DecreaseFont": "Decrease",
+    "DecreaseFontARIA": "decrease font size",
+    "IncreaseFont": "Increase",
+    "IncreaseFontARIA": "increase font size",
     "Autosave": "Autosave",
     "On": "On",
+    "AutosaveOnARIA": "autosave on",
     "Off": "Off",
-    "SketchSettings": "Sketch Settings",
-    "SecurityProtocol": "Security Protocol",
-    "ServeOverHTTPS": "Serve over HTTPS",
-    "Accessibility": "Accessibility",
+    "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",
-    "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",
-    "BackEditor": "Back to Editor",
-    "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",
+    "SoundOutputARIA": "sound output on"
+  },
+  "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": "Stop Sketch",
+      "TurnOnAccessibleOutput": "Turn On Accessible Output",
+      "TurnOffAccessibleOutput": "Turn Off Accessible Output"
+    }
+  },
+  "Sidebar": {
     "Create": "Create",
-    "enter a name": "enter a name",
+    "EnterName": "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",
-    "WarningUnsavedChanges": "Are you sure you want to leave this page? You have unsaved changes.",
-    "LogOut": "Log Out"
+    "Folder": "Folder"
+  },
+  "Common": {
+    "Error": "Error",
+    "Save": "Save",
+    "p5logoARIA": "p5.js Logo"
 
+  },
+  "IDEView": {
+    "SubmitFeedback": "Submit Feedback"
+  }
 }
-
diff --git a/translations/locales/es-419/translations.json b/translations/locales/es-419/translations.json
index cd5276ec..8b8d8f87 100644
--- a/translations/locales/es-419/translations.json
+++ b/translations/locales/es-419/translations.json
@@ -1,113 +1,180 @@
 {
+  "Nav": {
+    "File": {
+      "Title": "Archivo",
+      "New": "Nuevo",
+      "Share": "Compartir",
+      "Duplicate": "Duplicar",
+      "Open": "Abrir",
+      "Download": "Descargar",
+      "AddToCollection": "Agregar a colección",
+      "Examples": "Ejemplos"
+    },
+    "Edit": {
+      "Title": "Editar",
+      "TidyCode": "Ordenar código",
+      "Find": "Buscar",
+      "FindNext": "Buscar siguiente",
+      "FindPrevious": "Buscar anterior"
+    },
+    "Sketch": {
+      "Title": "Bosquejo",
+      "AddFile": "Agregar archivo",
+      "AddFolder": "Agregar directorio",
+      "Run": "Ejecutar",
+      "Stop": "Detener"
+    },
+    "Help": {
+      "Title": "Ayuda",
+      "KeyboardShortcuts": "Atajos",
+      "Reference": "Referencia",
+      "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": "Identificación",
+      "LoginGithub": "Ingresa con Github",
+      "LoginGoogle": "Ingresa con Google",
+      "DontHaveAccount": "¿No tienes cuenta?",
+      "ForgotPassword": "¿Olvidaste tu contraseña?",
+      "ResetPassword": "Regenera tu contraseña"
+    },
+    "Auth": {
+      "Welcome": "Hola",
+      "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",
+    "TitleHelmet": "Editor Web p5.js | Acerca de",
     "Contribute": "Contribuir",
     "NewP5": "¿Empezando con p5.js?",
     "Report": "Reporta un error",
-    "Learn": "Aprende",
-    "About": "Acerca de",
+    "Learn": "Aprender",
     "Resources": "Recursos",
     "Libraries": "Bibliotecas",
     "Forum": "Foro",
-    "File": "Archivo",
-    "New": "Nuevo",
-    "Save": "Guardar",
-    "Share": "Compartir",
-    "Duplicate": "Duplicar",
-    "Examples": "Ejemplos",
-    "Edit": "Editar",
-    "TidyCode": "Ordenar código",
-    "Find": "Buscar",
-    "AddToCollection": "Agregar a colección",
-    "FindNext": "Buscar siguiente",
-    "FindPrevious": "Buscar anterior",
-    "Sketch": "Bosquejo",
-    "AddFile": "Agregar archivo",
-    "AddFolder": "Agregar directorio",
-    "Run": "Ejecutar",
-    "Stop": "Detener",
-    "Help": "Ayuda",
-    "KeyboardShortcuts": "Atajos",
-    "Reference": "Referencia",
-    "Tidy": "Ordenar",
-    "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",
+    "Examples": "Ejemplos"
+  },
+  "Toast": {
+    "OpenedNewSketch": "Abriste un nuevo bosquejo.",
+    "SketchSaved": "Bosquejo guardado.",
+    "SketchFailedSave": "Fallo al guardar el bosquejo.",
+    "AutosaveEnabled": "Grabado automático activado.",
+    "LangChange": "Lenguaje cambiado"
+  },
+  "Toolbar": {
     "Preview": "Vista previa",
     "Auto-refresh": "Auto-refrescar",
-    "Console": "Consola",
+    "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",
+    "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",
+    "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",
-    "Decrease": "Disminuir",
-    "Increase": "Aumentar",
-    "IndentationAmount": "Cantidad de indentación",
+    "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",
-    "SketchSettings": "Configuración del bosquejo",
-    "SecurityProtocol": "Protocolo de seguridad",
-    "ServeOverHTTPS": "Usar HTTPS",
-    "Accessibility": "Accesibilidad",
+    "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",
-    "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",
-    "BackEditor": "Regresa al editor",
-    "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",
+    "SoundOutputARIA": "Salida de sonido activado"
+  },
+  "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": {
     "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."
+    "Save": "Guardar",
+    "p5logoARIA": "Logo p5.js "
+  },
+  "IDEView": {
+    "SubmitFeedback": "Enviar retroalimentación"
   }
+}
+
+
+
+