ARIA labels in Toolbar

client/i18n-test.js

@@ -0,0 +1,25 @@
+import i18n from 'i18next';
+import translationEnglish from '../translations/locales/en-US/translations.json';
+
+i18n
+  .init({
+    fallbackLng: 'en',
+    lng: 'en-US',
+    ns: ['translations'],
+    defaultNS: ['translations'],
+    debug: false,
+    saveMissing: false,
+    interpolation: {
+      escapeValue: false, // react already safes from xss
+    },
+    resources: {
+      en: {
+        translations: translationEnglish
+      }
+    },
+    react: {
+      wait: false,
+      nsMode: 'fallback'
+    }
+  });
+export default i18n;

client/modules/IDE/components/Toolbar.jsx

@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import classNames from 'classnames';
 import { withTranslation } from 'react-i18next';
+import i18n from 'i18next';
 import * as IDEActions from '../actions/ide';
 import * as preferenceActions from '../actions/preferences';
 import * as projectActions from '../actions/project';
@@ -86,23 +87,23 @@ class Toolbar extends React.Component {
             this.props.setTextOutput(true);
             this.props.setGridOutput(true);
           }}
-          aria-label="Play sketch"
+          aria-label={i18n.t('Toolbar.PlaySketchARIA')}
           disabled={this.props.infiniteLoop}
         >
           <PlayIcon focusable="false" aria-hidden="true" />
         </button>
         <button
           className={playButtonClass}
           onClick={this.props.startSketch}
-          aria-label="Play only visual sketch"
+          aria-label={i18n.t('Toolbar.PlayOnlyVisualSketchARIA')}
           disabled={this.props.infiniteLoop}
         >
           <PlayIcon focusable="false" aria-hidden="true" />
         </button>
         <button
           className={stopButtonClass}
           onClick={this.props.stopSketch}
-          aria-label="Stop sketch"
+          aria-label={i18n.t('Toolbar.StopSketchARIA')}
         >
           <StopIcon focusable="false" aria-hidden="true" />
         </button>
@@ -116,7 +117,7 @@ class Toolbar extends React.Component {
             }}
           />
           <label htmlFor="autorefresh" className="toolbar__autorefresh-label">
-            {this.props.t('Toolbar.Auto-refresh')}
+            {i18n.t('Toolbar.Auto-refresh')}
           </label>
         </div>
         <div className={nameContainerClass}>
@@ -129,7 +130,7 @@ class Toolbar extends React.Component {
               }
             }}
             disabled={!canEditProjectName}
-            aria-label="Edit sketch name"
+            aria-label={i18n.t('Toolbar.EditSketchARIA')}
           >
             <span>{this.props.project.name}</span>
             {
@@ -145,7 +146,7 @@ class Toolbar extends React.Component {
             type="text"
             maxLength="128"
             className="toolbar__project-name-input"
-            aria-label="New sketch name"
+            aria-label={i18n.t('Toolbar.NewSketchNameARIA')}
             value={this.state.projectNameInputValue}
             onChange={this.handleProjectNameChange}
             ref={(element) => { this.projectNameInput = element; }}
@@ -165,7 +166,7 @@ class Toolbar extends React.Component {
         <button
           className={preferencesButtonClass}
           onClick={this.props.openPreferences}
-          aria-label="Open Preferences"
+          aria-label={i18n.t('Toolbar.OpenPreferencesARIA')}
         >
           <PreferencesIcon focusable="false" aria-hidden="true" />
         </button>
@@ -198,8 +199,7 @@ Toolbar.propTypes = {
   startSketch: PropTypes.func.isRequired,
   startAccessibleSketch: PropTypes.func.isRequired,
   saveProject: PropTypes.func.isRequired,
-  currentUser: PropTypes.string,
-  t: PropTypes.func.isRequired
+  currentUser: PropTypes.string
 };
 
 Toolbar.defaultProps = {
@@ -226,5 +226,4 @@ const mapDispatchToProps = {
 };
 
 export const ToolbarComponent = Toolbar;
-// export default connect(mapStateToProps, mapDispatchToProps)(Toolbar);
 export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(Toolbar));

client/modules/IDE/components/Toolbar.test.jsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import lodash from 'lodash';
-
-
 import { ToolbarComponent } from './Toolbar';
+import { i18ntest } from '../../../i18n-test';
 
 const renderComponent = (extraProps = {}) => {
   const props = lodash.merge({