Fix various formatting & accessibility issues

[gordlin]

Related Item(s)

Issues:
#451
#434
#435
#463

Changes

• [Save toast might be telling lies #451] Change save warning toast text (Please wait. Saving may take a few moments.), and add i18n for save success toast.
• [Previous version container has too large of a shadow #434, White spacing on version history table #435] Fix shadow/spacing issue on version history table.
• [Unable to open preview dropdown using keyboard #463] Set preview dropdown to show items on keyboard focus.

Testing

Steps:

#434, #435:

1. Open a product with history (e.g. 00000000-0000-0000-0000-000000000000).
2. Open the product history table by clicking Show previous versions of product. The table should be properly formatting, without extra shadow to the right.

#451:

1. For any product, add some changes and press save. See the new save warning text.
2. Change to French and repeat step 1. Notice that the save success message now has french text too.

#463:

1. On the editor, tab to the Preview dropdown button.
2. Once you reach it, it should automatically show the dropdown upon focus, allowing you to tab to the language options.

---

This change is 

[github-actions]

Your demo site is ready! 🚀 Visit it here: https://ramp4-pcar4.github.io/storylines-editor/formatting-issues

[RyanCoulsonCA]

Reviewed 3 of 3 files at r1, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @gordlin)

---

src/lang/lang.csv line 60 at r1 (raw file):

editor.editMetadata.message.successfulSave,Successfully saved changes!,1,Modifications enregistrées avec succès!,0
editor.editMetadata.message.wait,Please wait. Saving may take a few moments.,1,"Veuillez patienter. L'enregistrement peut prendre quelques instants.",0
editor.editMetadata.message.saveSuccess,Successfully saved changes!,1,Modifications enregistrées avec succès !,0

There's an extra space here in the French translation: succès !, other than that

[gordlin]

Reviewable status: 1 of 3 files reviewed, 1 unresolved discussion (waiting on @RyanCoulsonCA)

---

src/lang/lang.csv line 60 at r1 (raw file):

Previously, RyanCoulsonCA (Ryan Coulson) wrote…

There's an extra space here in the French translation: succès !, other than that

Donethanks!

[RyanCoulsonCA]

Reviewed 2 of 2 files at r3, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @gordlin)

[IshavSohal]

Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @gordlin)

---

src/lang/lang.csv line 60 at r3 (raw file):

editor.editMetadata.message.successfulSave,Successfully saved changes!,1,Modifications enregistrées avec succès!,0
editor.editMetadata.message.wait,Please wait. Saving may take a few moments.,1,"Veuillez patienter. L'enregistrement peut prendre quelques instants.",0
editor.editMetadata.message.saveSuccess,Successfully saved changes!,1,Modifications enregistrées avec succès!,0

Seems like you duplicated theeditor.editMetadata.message.successfulSave key. You can probably just stick with the old one.

[gordlin]

Reviewable status: 1 of 3 files reviewed, 1 unresolved discussion (waiting on @IshavSohal and @RyanCoulsonCA)

---

src/lang/lang.csv line 60 at r3 (raw file):

Previously, IshavSohal (Ishav Sohal) wrote…

Seems like you duplicated theeditor.editMetadata.message.successfulSave key. You can probably just stick with the old one.

Donethanks!

[IshavSohal]

Reviewed 1 of 3 files at r1, 2 of 2 files at r5, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @gordlin)

[szczz]

Reviewed 1 of 3 files at r1, 1 of 2 files at r5, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @gordlin)

[yileifeng]

Reviewed 1 of 3 files at r1, 2 of 2 files at r5, all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @gordlin)