Merge pull request #3152 from ProjectMirador/3114-workspace-main

Move workspace controls outside the workspace <main> element

__tests__/src/components/WorkspaceArea.test.js

@@ -30,12 +30,14 @@ describe('WorkspaceArea', () => {
   it('should render all needed elements in order', () => {
     const wrapper = createWrapper();
     expect(wrapper.containsMatchingElement(
-      <main>
+      <>
         <WorkspaceControlPanel />
+        <main>
           <Workspace />
           <ErrorDialog />
           <BackgroundPluginArea />
-      </main>,
+        </main>
+      </>,
     )).toBeTruthy();
   });
 

src/components/WorkspaceArea.js

@@ -24,15 +24,16 @@ export class WorkspaceArea extends Component {
     } = this.props;
 
     return (
+      <>
+        {
+          isWorkspaceControlPanelVisible
+            && <WorkspaceControlPanel variant={controlPanelVariant} />
+        }
         <main
           className={classNames(classes.viewer, ns('viewer'))}
           lang={lang}
           aria-label={t('workspace')}
         >
-        {
-          isWorkspaceControlPanelVisible
-            && <WorkspaceControlPanel variant={controlPanelVariant} />
-        }
           {
             isWorkspaceAddVisible
               ? <WorkspaceAdd />
@@ -41,6 +42,7 @@ export class WorkspaceArea extends Component {
           <ErrorDialog />
           <BackgroundPluginArea />
         </main>
+      </>
     );
   }
 }

src/components/WorkspaceControlPanel.js

@@ -25,7 +25,7 @@ export class WorkspaceControlPanel extends Component {
         color="default"
         position="absolute"
         component="nav"
-        aria-label={t('workspace')}
+        aria-label={t('workspaceNavigation')}
       >
         <Toolbar disableGutters className={classes.toolbar}>
           <WorkspaceAddButton />

src/locales/en/translation.json

@@ -139,6 +139,7 @@
     "windowPluginButtons": "Options",
     "windowPluginMenu": "Window options",
     "workspace": "Workspace",
+    "workspaceNavigation": "Workspace navigation",
     "workspaceFullScreen": "Full screen",
     "workspaceMenu": "Workspace settings",
     "workspaceOptions": "Workspace options",