Accessible modals (#560)

Improve the accessibility of our modals (the color picker and the export dialog)

Implement a focus trap so that tapping through the controls inside them don't escape to outer elements, it also allows to close the modals with the "Escape" key.

src/actions/actionCanvas.tsx

@@ -10,11 +10,11 @@ export const actionChangeViewBackgroundColor: Action = {
   perform: (elements, appState, value) => {
     return { appState: { ...appState, viewBackgroundColor: value } };
   },
-  PanelComponent: ({ appState, updateData }) => {
+  PanelComponent: ({ appState, updateData, t }) => {
     return (
       <div style={{ position: "relative" }}>
         <ColorPicker
-          label="Canvas Background"
+          label={t("labels.canvasBackground")}
           type="canvasBackground"
           color={appState.viewBackgroundColor}
           onChange={color => updateData(color)}

src/actions/actionExport.tsx

@@ -10,8 +10,9 @@ export const actionChangeProjectName: Action = {
   perform: (elements, appState, value) => {
     return { appState: { ...appState, name: value } };
   },
-  PanelComponent: ({ appState, updateData }) => (
+  PanelComponent: ({ appState, updateData, t }) => (
     <EditableText
+      label={t("labels.fileTitle")}
       value={appState.name || "Unnamed"}
       onChange={(name: string) => updateData(name)}
     />