Skip to content

Commit 05e43c7

Browse files
oruburosandrewn
oruburos
and
andrewn
authored
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>
1 parent db18ff4 commit 05e43c7

File tree

13 files changed

+444
-323
lines changed

13 files changed

+444
-323
lines changed

‎client/components/Nav.jsx‎

Lines changed: 41 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -100,11 +100,11 @@ class Nav extends React.PureComponent {
100100
const { unsavedChanges, warnIfUnsavedChanges } = this.props;
101101
if (!unsavedChanges) {
102102
this.props.showToast(1500);
103-
this.props.setToastText('Opened new sketch.');
103+
this.props.setToastText('Toast.OpenedNewSketch');
104104
this.props.newProject();
105105
} else if (warnIfUnsavedChanges && warnIfUnsavedChanges()) {
106106
this.props.showToast(1500);
107-
this.props.setToastText('Opened new sketch.');
107+
this.props.setToastText('Toast.OpenedNewSketch');
108108
this.props.newProject();
109109
}
110110
this.setDropdown('none');
@@ -172,7 +172,7 @@ class Nav extends React.PureComponent {
172172
handleLangSelection(event) {
173173
i18next.changeLanguage(event.target.value);
174174
this.props.showToast(1500);
175-
this.props.setToastText('LangChange');
175+
this.props.setToastText('Toast.LangChange');
176176
this.setDropdown('none');
177177
}
178178

@@ -240,13 +240,13 @@ class Nav extends React.PureComponent {
240240
return (
241241
<ul className="nav__items-left">
242242
<li className="nav__item-logo">
243-
<LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
243+
<LogoIcon role="img" aria-label={this.props.t('Common.p5logoARIA')} focusable="false" className="svg__logo" />
244244
</li>
245245
<li className="nav__item nav__item--no-icon">
246246
<Link to="/" className="nav__back-link">
247247
<CaretLeftIcon className="nav__back-icon" focusable="false" aria-hidden="true" />
248248
<span className="nav__item-header">
249-
{this.props.t('BackEditor')}
249+
{this.props.t('Nav.BackEditor')}
250250
</span>
251251
</Link>
252252
</li>
@@ -258,7 +258,7 @@ class Nav extends React.PureComponent {
258258
return (
259259
<ul className="nav__items-left">
260260
<li className="nav__item-logo">
261-
<LogoIcon role="img" aria-label="p5.js Logo" focusable="false" className="svg__logo" />
261+
<LogoIcon role="img" aria-label={this.props.t('Common.p5logoARIA')} focusable="false" className="svg__logo" />
262262
</li>
263263
<li className={navDropdownState.file}>
264264
<button
@@ -271,7 +271,7 @@ class Nav extends React.PureComponent {
271271
}
272272
}}
273273
>
274-
<span className="nav__item-header">{this.props.t('File')}</span>
274+
<span className="nav__item-header">{this.props.t('Nav.File.Title')}</span>
275275
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
276276
</button>
277277
<ul className="nav__dropdown">
@@ -281,7 +281,7 @@ class Nav extends React.PureComponent {
281281
onFocus={this.handleFocusForFile}
282282
onBlur={this.handleBlur}
283283
>
284-
{this.props.t('New')}
284+
{this.props.t('Nav.File.New')}
285285
</button>
286286
</li>
287287
{ getConfig('LOGIN_ENABLED') && (!this.props.project.owner || this.isUserOwner()) &&
@@ -291,7 +291,7 @@ class Nav extends React.PureComponent {
291291
onFocus={this.handleFocusForFile}
292292
onBlur={this.handleBlur}
293293
>
294-
{this.props.t('Save')}
294+
{this.props.t('Common.Save')}
295295
<span className="nav__keyboard-shortcut">{metaKeyName}+S</span>
296296
</button>
297297
</li> }
@@ -302,7 +302,7 @@ class Nav extends React.PureComponent {
302302
onFocus={this.handleFocusForFile}
303303
onBlur={this.handleBlur}
304304
>
305-
{this.props.t('Duplicate')}
305+
{this.props.t('Nav.File.Duplicate')}
306306
</button>
307307
</li> }
308308
{ this.props.project.id &&
@@ -312,7 +312,7 @@ class Nav extends React.PureComponent {
312312
onFocus={this.handleFocusForFile}
313313
onBlur={this.handleBlur}
314314
>
315-
{this.props.t('Share')}
315+
{this.props.t('Nav.File.Share')}
316316
</button>
317317
</li> }
318318
{ this.props.project.id &&
@@ -322,7 +322,7 @@ class Nav extends React.PureComponent {
322322
onFocus={this.handleFocusForFile}
323323
onBlur={this.handleBlur}
324324
>
325-
{this.props.t('Download')}
325+
{this.props.t('Nav.File.Download')}
326326
</button>
327327
</li> }
328328
{ this.props.user.authenticated &&
@@ -333,7 +333,7 @@ class Nav extends React.PureComponent {
333333
onBlur={this.handleBlur}
334334
onClick={this.setDropdownForNone}
335335
>
336-
{this.props.t('Open')}
336+
{this.props.t('Nav.File.Open')}
337337
</Link>
338338
</li> }
339339
{getConfig('UI_COLLECTIONS_ENABLED') &&
@@ -346,7 +346,7 @@ class Nav extends React.PureComponent {
346346
onBlur={this.handleBlur}
347347
onClick={this.setDropdownForNone}
348348
>
349-
{this.props.t('AddToCollection')}
349+
{this.props.t('Nav.File.AddToCollection')}
350350
</Link>
351351
</li>}
352352
{ getConfig('EXAMPLES_ENABLED') &&
@@ -357,7 +357,7 @@ class Nav extends React.PureComponent {
357357
onBlur={this.handleBlur}
358358
onClick={this.setDropdownForNone}
359359
>
360-
{this.props.t('Examples')}
360+
{this.props.t('Nav.File.Examples')}
361361
</Link>
362362
</li> }
363363
</ul>
@@ -373,7 +373,7 @@ class Nav extends React.PureComponent {
373373
}
374374
}}
375375
>
376-
<span className="nav__item-header">{this.props.t('Edit')}</span>
376+
<span className="nav__item-header">{this.props.t('Nav.Edit.Title')}</span>
377377
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
378378
</button>
379379
<ul className="nav__dropdown" >
@@ -386,7 +386,7 @@ class Nav extends React.PureComponent {
386386
onFocus={this.handleFocusForEdit}
387387
onBlur={this.handleBlur}
388388
>
389-
{this.props.t('TidyCode')}
389+
{this.props.t('Nav.Edit.TidyCode')}
390390
<span className="nav__keyboard-shortcut">{'\u21E7'}+Tab</span>
391391
</button>
392392
</li>
@@ -396,7 +396,7 @@ class Nav extends React.PureComponent {
396396
onFocus={this.handleFocusForEdit}
397397
onBlur={this.handleBlur}
398398
>
399-
{this.props.t('Find')}
399+
{this.props.t('Nav.Edit.Find')}
400400
<span className="nav__keyboard-shortcut">{metaKeyName}+F</span>
401401
</button>
402402
</li>
@@ -406,7 +406,7 @@ class Nav extends React.PureComponent {
406406
onFocus={this.handleFocusForEdit}
407407
onBlur={this.handleBlur}
408408
>
409-
{this.props.t('FindNext')}
409+
{this.props.t('Nav.Edit.FindNext')}
410410
<span className="nav__keyboard-shortcut">{metaKeyName}+G</span>
411411
</button>
412412
</li>
@@ -416,7 +416,7 @@ class Nav extends React.PureComponent {
416416
onFocus={this.handleFocusForEdit}
417417
onBlur={this.handleBlur}
418418
>
419-
{this.props.t('FindPrevious')}
419+
{this.props.t('Nav.Edit.FindPrevious')}
420420
<span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+G</span>
421421
</button>
422422
</li>
@@ -433,7 +433,7 @@ class Nav extends React.PureComponent {
433433
}
434434
}}
435435
>
436-
<span className="nav__item-header">{this.props.t('Sketch')}</span>
436+
<span className="nav__item-header">{this.props.t('Nav.Sketch.Title')}</span>
437437
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
438438
</button>
439439
<ul className="nav__dropdown">
@@ -443,7 +443,7 @@ class Nav extends React.PureComponent {
443443
onFocus={this.handleFocusForSketch}
444444
onBlur={this.handleBlur}
445445
>
446-
{this.props.t('AddFile')}
446+
{this.props.t('Nav.Sketch.AddFile')}
447447
</button>
448448
</li>
449449
<li className="nav__dropdown-item">
@@ -452,7 +452,7 @@ class Nav extends React.PureComponent {
452452
onFocus={this.handleFocusForSketch}
453453
onBlur={this.handleBlur}
454454
>
455-
{this.props.t('AddFolder')}
455+
{this.props.t('Nav.Sketch.AddFolder')}
456456
</button>
457457
</li>
458458
<li className="nav__dropdown-item">
@@ -461,7 +461,7 @@ class Nav extends React.PureComponent {
461461
onFocus={this.handleFocusForSketch}
462462
onBlur={this.handleBlur}
463463
>
464-
{this.props.t('Run')}
464+
{this.props.t('Nav.Sketch.Run')}
465465
<span className="nav__keyboard-shortcut">{metaKeyName}+Enter</span>
466466
</button>
467467
</li>
@@ -471,7 +471,7 @@ class Nav extends React.PureComponent {
471471
onFocus={this.handleFocusForSketch}
472472
onBlur={this.handleBlur}
473473
>
474-
{this.props.t('Stop')}
474+
{this.props.t('Nav.Sketch.Stop')}
475475
<span className="nav__keyboard-shortcut">{'\u21E7'}+{metaKeyName}+Enter</span>
476476
</button>
477477
</li>
@@ -508,7 +508,7 @@ class Nav extends React.PureComponent {
508508
}
509509
}}
510510
>
511-
<span className="nav__item-header">{this.props.t('Help')}</span>
511+
<span className="nav__item-header">{this.props.t('Nav.Help.Title')}</span>
512512
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
513513
</button>
514514
<ul className="nav__dropdown">
@@ -518,7 +518,7 @@ class Nav extends React.PureComponent {
518518
onBlur={this.handleBlur}
519519
onClick={this.handleKeyboardShortcuts}
520520
>
521-
{this.props.t('KeyboardShortcuts')}
521+
{this.props.t('Nav.Help.KeyboardShortcuts')}
522522
</button>
523523
</li>
524524
<li className="nav__dropdown-item">
@@ -529,7 +529,7 @@ class Nav extends React.PureComponent {
529529
onFocus={this.handleFocusForHelp}
530530
onBlur={this.handleBlur}
531531
onClick={this.setDropdownForNone}
532-
>{this.props.t('Reference')}
532+
>{this.props.t('Nav.Help.Reference')}
533533
</a>
534534
</li>
535535
<li className="nav__dropdown-item">
@@ -539,7 +539,7 @@ class Nav extends React.PureComponent {
539539
onBlur={this.handleBlur}
540540
onClick={this.setDropdownForNone}
541541
>
542-
{this.props.t('About')}
542+
{this.props.t('Nav.Help.About')}
543543
</Link>
544544
</li>
545545
</ul>
@@ -562,7 +562,7 @@ class Nav extends React.PureComponent {
562562
}
563563
}}
564564
>
565-
<span className="nav__item-header"> {this.props.t('Lang')}</span>
565+
<span className="nav__item-header"> {this.props.t('Nav.Lang')}</span>
566566
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
567567
</button>
568568
<ul className="nav__dropdown">
@@ -608,13 +608,13 @@ class Nav extends React.PureComponent {
608608
<ul className="nav__items-right" title="user-menu">
609609
<li className="nav__item">
610610
<Link to="/login" className="nav__auth-button">
611-
<span className="nav__item-header">{this.props.t('Login')}</span>
611+
<span className="nav__item-header">{this.props.t('Nav.Login.Login')}</span>
612612
</Link>
613613
</li>
614-
<span className="nav__item-or">{this.props.t('LoginOr')}</span>
614+
<span className="nav__item-or">{this.props.t('Nav.Login.LoginOr')}</span>
615615
<li className="nav__item">
616616
<Link to="/signup" className="nav__auth-button">
617-
<span className="nav__item-header">{this.props.t('SignUp')}</span>
617+
<span className="nav__item-header">{this.props.t('Nav.Login.SignUp')}</span>
618618
</Link>
619619
</li>
620620
</ul>
@@ -625,7 +625,7 @@ class Nav extends React.PureComponent {
625625
return (
626626
<ul className="nav__items-right" title="user-menu">
627627
<li className="nav__item">
628-
<span>{this.props.t('Hello')}, {this.props.user.username}!</span>
628+
<span>{this.props.t('Nav.Auth.Hello')}, {this.props.user.username}!</span>
629629
</li>
630630
<span className="nav__item-spacer">|</span>
631631
<li className={navDropdownState.account}>
@@ -640,7 +640,7 @@ class Nav extends React.PureComponent {
640640
}
641641
}}
642642
>
643-
{this.props.t('MyAccount')}
643+
{this.props.t('Nav.Auth.MyAccount')}
644644
<TriangleIcon className="nav__item-header-triangle" focusable="false" aria-hidden="true" />
645645
</button>
646646
<ul className="nav__dropdown">
@@ -651,7 +651,7 @@ class Nav extends React.PureComponent {
651651
onBlur={this.handleBlur}
652652
onClick={this.setDropdownForNone}
653653
>
654-
{this.props.t('MySketches')}
654+
{this.props.t('Nav.Auth.MySketches')}
655655
</Link>
656656
</li>
657657
{getConfig('UI_COLLECTIONS_ENABLED') &&
@@ -662,7 +662,7 @@ class Nav extends React.PureComponent {
662662
onBlur={this.handleBlur}
663663
onClick={this.setDropdownForNone}
664664
>
665-
{this.props.t('MyCollections')}
665+
{this.props.t('Nav.Auth.MyCollections')}
666666
</Link>
667667
</li>
668668
}
@@ -673,7 +673,7 @@ class Nav extends React.PureComponent {
673673
onBlur={this.handleBlur}
674674
onClick={this.setDropdownForNone}
675675
>
676-
{this.props.t('MyAssets')}
676+
{this.props.t('Nav.Auth.MyAssets')}
677677
</Link>
678678
</li>
679679
<li className="nav__dropdown-item">
@@ -683,7 +683,7 @@ class Nav extends React.PureComponent {
683683
onBlur={this.handleBlur}
684684
onClick={this.setDropdownForNone}
685685
>
686-
{this.props.t('Settings')}
686+
{this.props.t('Preferences.Settings')}
687687
</Link>
688688
</li>
689689
<li className="nav__dropdown-item">
@@ -692,7 +692,7 @@ class Nav extends React.PureComponent {
692692
onFocus={this.handleFocusForAccount}
693693
onBlur={this.handleBlur}
694694
>
695-
{this.props.t('LogOut')}
695+
{this.props.t('Nav.Auth.LogOut')}
696696
</button>
697697
</li>
698698
</ul>
@@ -842,5 +842,5 @@ const mapDispatchToProps = {
842842
setAllAccessibleOutput
843843
};
844844

845-
export default withTranslation('WebEditor')(withRouter(connect(mapStateToProps, mapDispatchToProps)(Nav)));
845+
export default withTranslation()(withRouter(connect(mapStateToProps, mapDispatchToProps)(Nav)));
846846
export { Nav as NavComponent };

‎client/components/__test__/__snapshots__/Nav.test.jsx.snap‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ exports[`Nav renders correctly 1`] = `
1414
class="nav__item-logo"
1515
>
1616
<test-file-stub
17-
aria-label="p5.js Logo"
1817
classname="svg__logo"
1918
focusable="false"
2019
role="img"

‎client/i18n.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,10 @@ const options = {
1616

1717
i18n
1818
.use(initReactI18next) // pass the i18n instance to react-i18next.
19-
.use(LanguageDetector)// to detect the language from currentBrowser
19+
// .use(LanguageDetector)// to detect the language from currentBrowser
2020
.use(Backend) // to fetch the data from server
2121
.init({
2222
lng: 'en-US',
23-
defaultNS: 'WebEditor',
2423
fallbackLng, // if user computer language is not on the list of available languages, than we will be using the fallback language specified earlier
2524
debug: false,
2625
backend: options,

0 commit comments

Comments
 (0)