Put Banner, Nav, Main, Contentinfo Landmark

Author: afrisalyp

src/shared/components/Dashboard/index.jsx

@@ -44,7 +44,7 @@ export default function Dashboard({
 }) {
   return (
     <div styleName="container">
-      <div styleName="page">
+      <div styleName="page" role="main">
         <Header
           achievements={achievements}
           achievementsLoading={achievementsLoading}

src/shared/components/ProfilePage/Stats/index.jsx

@@ -80,7 +80,7 @@ class ProfileStats extends React.Component {
     }
 
     return (
-      <div styleName="profile-subtrack-container">
+      <div styleName="profile-subtrack-container" role="main">
         <div styleName="content">
           <div styleName="page-state-header">
             <header>

src/shared/components/ProfilePage/index.jsx

@@ -167,7 +167,7 @@ class ProfilePage extends React.Component {
           />
           )
         }
-        <div styleName="profile-container">
+        <div styleName="profile-container" role="main">
           <div styleName="about-container">
             <div styleName="profile-header-container">
               <Sticky

src/shared/components/ReviewOpportunityDetailsPage/index.jsx

@@ -38,7 +38,7 @@ const ReviewOpportunityDetailsPage = ({
   toggleRole,
 }) => (
   <div styleName="outer-container">
-    <div styleName="page">
+    <div styleName="page" role="main">
 
       <div styleName="header">
         <h1 styleName="challenge-title">

src/shared/components/SubmissionPage/index.jsx

@@ -40,7 +40,7 @@ function SubmissionsPage(props) {
 
   return (
     <div styleName="container">
-      <div styleName="content">
+      <div styleName="content" role="main">
         <Header
           challengeId={challengeId}
           challengesUrl={challengesUrl}

src/shared/components/TopcoderFooter/index.jsx

@@ -33,26 +33,24 @@ export default function TopcoderFooter() {
   const base = config.URL.BASE;
   const currentYear = moment().year();
   return (
-    <div styleName="footer">
-      <nav>
-        <ul>
-          <Link to={`${base}/community/about`}>
+    <div styleName="footer" role="contentinfo">
+      <ul>
+        <Link to={`${base}/community/about`}>
 ABOUT US
-          </Link>
-          <Link to={`${base}/community/contact`}>
+        </Link>
+        <Link to={`${base}/community/contact`}>
 CONTACT US
-          </Link>
-          <Link to={config.URL.HELP}>
+        </Link>
+        <Link to={config.URL.HELP}>
 HELP CENTER
-          </Link>
-          <Link to={`${base}/community/how-it-works/privacy-policy/`}>
+        </Link>
+        <Link to={`${base}/community/how-it-works/privacy-policy/`}>
 PRIVACY POLICY
-          </Link>
-          <Link to={`${base}/community/how-it-works/terms/`}>
+        </Link>
+        <Link to={`${base}/community/how-it-works/terms/`}>
 TERMS
-          </Link>
-        </ul>
-      </nav>
+        </Link>
+      </ul>
       <div styleName="social-links">
         <hr />
         <a href="https://www.facebook.com/topcoder" target="fbwindow">

src/shared/components/TopcoderHeader/index.jsx

@@ -337,6 +337,7 @@ export default class TopcoderHeader extends React.Component {
     return (
       <div
         styleName="header"
+        role="banner"
         ref={(div) => { this.headerRoot = div; }}
         onMouseLeave={() => {
           if (openedMenu) {
@@ -351,7 +352,7 @@ export default class TopcoderHeader extends React.Component {
           <a href={BASE_URL} styleName="logo" aria-label="Topcoder Homepage">
             <LogoTopcoderWithName height={53} width={135} />
           </a>
-          <ul styleName="main-menu" ref={(ul) => { this.mainMenu = ul; }}>
+          <ul styleName="main-menu" role="navigation" ref={(ul) => { this.mainMenu = ul; }}>
             {mainMenu}
           </ul>
           <div styleName="right-menu">
@@ -401,6 +402,7 @@ export default class TopcoderHeader extends React.Component {
           styleName="search-field"
         >
           <input
+            role="search"
             ref={(input) => { this.searchInput = input; }}
             onKeyPress={(event) => {
               if (event.key === 'Enter') {

src/shared/containers/SubmissionManagement/index.jsx

@@ -81,7 +81,7 @@ class SubmissionManagementPageContainer extends React.Component {
 
     return (
       <div styleName="outer-container">
-        <div styleName="submission-management-container">
+        <div styleName="submission-management-container" role="main">
           {!isEmpty
             && (
             <SubmissionManagement

src/shared/containers/challenge-detail/index.jsx

@@ -284,7 +284,7 @@ class ChallengeDetailPageContainer extends React.Component {
 
     return (
       <div styleName="outer-container">
-        <div styleName="challenge-detail-container">
+        <div styleName="challenge-detail-container" role="main">
           { Boolean(isEmpty) && (
             <div styleName="page">
               Challenge #

src/shared/containers/challenge-listing/Listing/index.jsx

@@ -237,7 +237,7 @@ export class ListingContainer extends React.Component {
     }
 
     return (
-      <div styleName="container">
+      <div styleName="container" role="main">
         <MetaTags
           description={description}
           image={ogImage}