Merge pull request #7308 from bocoup/landmark-elements-7170-v2

CE-272: Implement semantic landmark elements to improve Screen Reader navigation

src/components/join-flow/join-flow.jsx

@@ -235,7 +235,7 @@ class JoinFlow extends React.Component {
 
     render () {
         return (
-            <React.Fragment>
+            <main>
                 {this.state.registrationError ? (
                     <RegistrationErrorStep
                         canTryAgain={this.canTryAgain()}
@@ -280,7 +280,7 @@ class JoinFlow extends React.Component {
                         />
                     </Progression>
                 )}
-            </React.Fragment>
+            </main>
         );
     }
 }

src/components/page/www/page.jsx

@@ -17,24 +17,24 @@ const Page = ({
 }) => (
     <ErrorBoundary componentName="Page">
         <div className={classNames('page', className)}>
-            <div
+            <nav
                 className={classNames({
                     staging: process.env.SCRATCH_ENV === 'staging'
                 })}
                 id="navigation"
             >
                 <Navigation />
-            </div>
-            <div id="view">
+            </nav>
+            <main id="view">
                 {children}
-            </div>
-            <div id="footer">
+            </main>
+            <footer id="footer">
                 <Footer />
-            </div>
+            </footer>
             {showDonorRecognition &&
-                <div id="donor">
+                <aside id="donor">
                     <DonorRecognition />
-                </div>
+                </aside>
             }
         </div>
         {semi && <div style={{color: '#fff'}}>{';'}</div>}

src/components/registration/scratch3-registration.jsx

@@ -14,16 +14,14 @@ const Registration = ({
     isOpen,
     showCloseButton
 }) => (
-    <div>
-        <JoinModal
-            createProjectOnComplete={createProjectOnComplete}
-            isOpen={isOpen}
-            key="join-modal"
-            showCloseButton={showCloseButton}
-            onCompleteRegistration={handleCompleteRegistration}
-            onRequestClose={handleCloseRegistration}
-        />
-    </div>
+    <JoinModal
+        createProjectOnComplete={createProjectOnComplete}
+        isOpen={isOpen}
+        key="join-modal"
+        showCloseButton={showCloseButton}
+        onCompleteRegistration={handleCompleteRegistration}
+        onRequestClose={handleCloseRegistration}
+    />
 );
 
 Registration.propTypes = {

src/views/join/join.jsx

@@ -9,7 +9,7 @@ initSentry();
 require('./join.scss');
 const Register = () => (
     <ErrorBoundary componentName="Join">
-        <div className="join">
+        <nav className="join">
             <a
                 aria-label="Scratch"
                 href="/"
@@ -20,7 +20,7 @@ const Register = () => (
                 />
             </a>
 
-        </div>
+        </nav>
         <Scratch3Registration
             createProjectOnComplete
             isOpen