Render WorkspaceControlArea first for tab navigation fixes #2023

__tests__/src/components/WorkspaceArea.test.js

@@ -23,10 +23,14 @@ describe('WorkspaceArea', () => {
     expect(wrapper.find('main.mirador-viewer').length).toBe(1);
   });
 
-  it('should render all needed elements ', () => {
+  it('should render all needed elements in order', () => {
     const wrapper = createWrapper();
-    expect(wrapper.find(Workspace).length).toBe(1);
-    expect(wrapper.find(WorkspaceControlPanel).length).toBe(1);
+    expect(wrapper.containsMatchingElement(
+      <main>
+        <WorkspaceControlPanel />
+        <Workspace />
+      </main>,
+    )).toBeTruthy();
   });
 
   it('should not render WorkspaceControlPanel when isWorkspaceControlPanelVisible is false', () => {

src/components/WorkspaceArea.js

@@ -22,15 +22,15 @@ export class WorkspaceArea extends Component {
 
     return (
       <main className={classNames(classes.background, ns('viewer'))} aria-label={t('workspace')}>
+        {
+          isWorkspaceControlPanelVisible
+            && <WorkspaceControlPanel />
+        }
         {
           isWorkspaceAddVisible
             ? <WorkspaceAdd />
             : <Workspace />
          }
-        {
-          isWorkspaceControlPanelVisible
-            && <WorkspaceControlPanel />
-        }
       </main>
     );
   }