Missing ARIA label NavBasic, Removing Italian entry from Language Dropdown, Changing translation for Asset (#1583)

* Removing i18 unused imports
* Removing Italian from Language Dropddown in Nav
* Adding ARIA Label in NavTest
* Changing translation from "Asset" to "Recurso" for spanish
* Assetlist bug, EditableInput.jsx QuickAddList.jsx StopPropogation error

Author: oruburos

client/components/Nav.jsx

@@ -566,16 +566,6 @@ class Nav extends React.PureComponent {
           </button>
           <ul className="nav__dropdown">
 
-            <li className="nav__dropdown-item">
-              <button
-                onFocus={this.handleFocusForLang}
-                onBlur={this.handleBlur}
-                value="it"
-                onClick={e => this.handleLangSelection(e)}
-              >
-                Italian (Test Fallback)
-              </button>
-            </li>
             <li className="nav__dropdown-item">
               <button
                 onFocus={this.handleFocusForLang}

client/components/NavBasic.jsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { withTranslation } from 'react-i18next';
 
 import LogoIcon from '../images/p5js-logo-small.svg';
 import ArrowIcon from '../images/triangle-arrow-left.svg';
@@ -14,7 +15,7 @@ class NavBasic extends React.PureComponent {
       <nav className="nav" title="main-navigation" ref={(node) => { this.node = node; }}>
         <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>
           { this.props.onBack && (
             <li className="nav__item">
@@ -34,6 +35,7 @@ class NavBasic extends React.PureComponent {
 
 NavBasic.propTypes = {
   onBack: PropTypes.func,
+  t: PropTypes.func.isRequired
 };
 
-export default NavBasic;
+export default withTranslation()(NavBasic);

client/modules/IDE/components/AssetList.jsx

@@ -61,13 +61,13 @@ class AssetListRowBase extends React.Component {
   handleAssetDelete = () => {
     const { key, name } = this.props.asset;
     this.closeOptions();
-    if (window.confirm(`Are you sure you want to delete "${name}"?`)) {
+    if (window.confirm(this.props.t('Common.DeleteConfirmation', { name }))) {
       this.props.deleteAssetRequest(key);
     }
   }
 
   render() {
-    const { asset, username } = this.props;
+    const { asset, username, t } = this.props;
     const { optionsOpen } = this.state;
     return (
       <tr className="asset-table__row" key={asset.key}>
@@ -86,7 +86,7 @@ class AssetListRowBase extends React.Component {
             onClick={this.toggleOptions}
             onBlur={this.onBlurComponent}
             onFocus={this.onFocusComponent}
-            aria-label={this.props.t('AssetList.ToggleOpenCloseARIA')}
+            aria-label={t('AssetList.ToggleOpenCloseARIA')}
           >
             <DownFilledTriangleIcon focusable="false" aria-hidden="true" />
           </button>
@@ -101,7 +101,7 @@ class AssetListRowBase extends React.Component {
                   onBlur={this.onBlurComponent}
                   onFocus={this.onFocusComponent}
                 >
-                  {this.props.t('AssetList.Delete')}
+                  {t('AssetList.Delete')}
                 </button>
               </li>
               <li>
@@ -112,7 +112,7 @@ class AssetListRowBase extends React.Component {
                   onFocus={this.onFocusComponent}
                   className="asset-table__action-option"
                 >
-                  {this.props.t('AssetList.OpenNewTab')}
+                  {t('AssetList.OpenNewTab')}
                 </Link>
               </li>
             </ul>}
@@ -194,7 +194,7 @@ class AssetList extends React.Component {
               </tr>
             </thead>
             <tbody>
-              {assetList.map(asset => <AssetListRow asset={asset} key={asset.key} />)}
+              {assetList.map(asset => <AssetListRow asset={asset} key={asset.key} t={t} />)}
             </tbody>
           </table>}
       </article>

client/modules/IDE/components/EditableInput.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import i18next from 'i18next';
 import EditIcon from '../../../images/pencil.svg';
 
@@ -22,7 +22,7 @@ function EditableInput({
     isEditing ? 'is-editing' : 'is-not-editing'
   } editable-input--${hasValue ? 'has-value' : 'has-placeholder'}`;
   const inputRef = React.createRef();
-
+  const { t } = useTranslation();
   React.useEffect(() => {
     if (isEditing) {
       inputRef.current.focus();
@@ -60,7 +60,7 @@ function EditableInput({
       <button
         className="editable-input__label"
         onClick={beginEditing}
-        aria-label={this.props.t('EditableInput.EditValue', { display: displayValue })}
+        aria-label={t('EditableInput.EditValue', { display: displayValue })}
       >
         <span>{displayValue}</span>
         <EditIcon
@@ -101,7 +101,6 @@ EditableInput.propTypes = {
   onChange: PropTypes.func.isRequired,
   validate: PropTypes.func,
   value: PropTypes.string,
-  t: PropTypes.func.isRequired
 };
 
-export default withTranslation()(EditableInput);
+export default EditableInput;

client/modules/IDE/components/QuickAddList/QuickAddList.jsx

@@ -19,7 +19,7 @@ const Item = ({
         className="quick-add__item-view"
         to={url}
         target="_blank"
-        onClick={e => e.stopPropogation()}
+        onClick={e => e.stopPropagation()}
       >
         {t('QuickAddList.View')}
       </Link>

client/modules/IDE/reducers/preferences.js

@@ -1,4 +1,3 @@
-import i18next from 'i18next';
 import * as ActionTypes from '../../../constants';
 
 

client/modules/User/components/LoginForm.jsx

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withTranslation } from 'react-i18next';
-import i18n from 'i18next';
 import Button from '../../../common/Button';
 
 import { domOnlyProps } from '../../../utils/reduxFormUtils';

client/modules/User/components/SocialAuthButton.jsx

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import styled from 'styled-components';
-import i18n from 'i18next';
 import { withTranslation } from 'react-i18next';
 
 import { remSize } from '../../../theme';

client/modules/User/pages/LoginView.jsx

@@ -4,7 +4,6 @@ import { reduxForm } from 'redux-form';
 import { Link, browserHistory } from 'react-router';
 import { Helmet } from 'react-helmet';
 import { withTranslation } from 'react-i18next';
-import i18n from 'i18next';
 import { validateAndLoginUser } from '../actions';
 import LoginForm from '../components/LoginForm';
 import { validateLogin } from '../../../utils/reduxFormUtils';

translations/locales/es-419/translations.json

@@ -43,8 +43,8 @@
       "My": "Mi",
       "MySketches": "Mis bosquejos",
       "MyCollections": "Mis colecciones",
-      "Asset": "Asset",
-      "MyAssets": "Mis assets",
+      "Asset": "Recurso",
+      "MyAssets": "Mis recursos",
       "LogOut": "Cerrar sesión"
     }
   },
@@ -342,11 +342,11 @@
     "InvalidState": "Algo salió mal."
   },
   "AssetList": {
-    "Title": "Editor Web p5.js | Mis assets",
-    "ToggleOpenCloseARIA": "Alternar Abrir/Cerrar Opciones de Asset",
+    "Title": "Editor Web p5.js | Mis recursos",
+    "ToggleOpenCloseARIA": "Alternar Abrir/Cerrar Opciones de Recurso",
     "Delete": "Borrar",
     "OpenNewTab": "Abrir en Nueva Pestaña",
-    "NoUploadedAssets": "No has subido archivos.",
+    "NoUploadedAssets": "No has subido recursos.",
     "HeaderName": "Nombre",
     "HeaderSize": "Tamaño",
     "HeaderSketch": "Bosquejo"
@@ -439,7 +439,7 @@
   "DashboardTabSwitcher": {
     "Sketches": "Bosquejos",
     "Collections": "Colecciones ",
-    "Assets": "Assets"
+    "Assets": "Recursos"
   },
   "CollectionList": {
     "Title": "p5.js Web Editor | Mis colecciones",