Merge pull request #10 from topcoder-platform/qa-accessibility

Qa accessibility

Author: rashmi73

src/assets/images/ico-arrow-big-left.svg

@@ -190,9 +190,9 @@ class Submit extends React.Component {
           >
             <div styleName="row">
               <div styleName="left">
-                <h4>
+                <h2>
                   { isChallengeBelongToTopgearGroup ? 'URL' : 'FILES'}
-                </h4>
+                </h2>
                 <p>
 Please follow the instructions on the Challenge Details page regarding
                   what your submission should contain and how it should be organized.

src/shared/components/SubmissionPage/Submit/index.jsx

@@ -93,7 +93,7 @@
       }
     }
 
-    h4 {
+    h2 {
       font-size: 15px;
       line-height: 25px;
       margin-bottom: 4px;

src/shared/components/SubmissionPage/Submit/styles.scss

@@ -24,7 +24,7 @@
 
 .title {
   font-size: 13px;
-  color: $tc-gray-40;
+  color: $tc-gray-10;
   letter-spacing: 0;
   line-height: 15px;
   margin-bottom: 5px;

src/shared/components/challenge-detail/Header/DeadlinesPanel/Card/style.scss

@@ -11,7 +11,7 @@
 .timezone {
   @include tc-label-sm;
 
-  color: $tc-gray-40;
+  color: $tc-gray-10;
   position: absolute;
   right: 12px;
   bottom: 6px;

src/shared/components/challenge-detail/Header/DeadlinesPanel/style.scss

@@ -23,8 +23,8 @@
 
   .challenge-selected-view {
     font-weight: 700;
-    color: $tc-dark-blue;
-    border-bottom: 3px solid $tc-dark-blue;
+    color: $tc-dark-blue-110;
+    border-bottom: 3px solid $tc-dark-blue-110;
   }
 
   .challenge-unselected-view {

src/shared/components/challenge-detail/Header/TabSelector/style.scss

@@ -241,7 +241,7 @@ export default function ChallengeHeader(props) {
     <div styleName="challenge-outer-container">
       <div styleName="important-detail">
         <div styleName="title-wrapper" aria-hidden={isMenuOpened}>
-          <Link to={challengesUrl}>
+          <Link to={challengesUrl} aria-label="Back to challenge list">
             <LeftArrow styleName="left-arrow" />
           </Link>
           <div>

src/shared/components/challenge-detail/Header/index.jsx

@@ -164,7 +164,7 @@
 
           margin-top: 20px;
           font-size: 10px;
-          color: $tc-gray-50;
+          color: $tc-gray-60;
           line-height: 10px;
           letter-spacing: 1.33px;
         }
@@ -188,13 +188,13 @@
                 @include roboto-regular;
 
                 font-size: 13px;
-                color: $tc-gray-50;
+                color: $tc-gray-60;
                 letter-spacing: 0;
                 line-height: 15px;
                 margin-bottom: 5px;
 
                 .rank-ordinal {
-                  color: $tc-gray-50;
+                  color: $tc-gray-60;
                 }
               }
 
@@ -265,7 +265,7 @@
 
           display: flex;
           justify-content: flex-start;
-          color: $tc-gray-30;
+          color: $tc-gray-10;
           line-height: 20px;
           padding: 15px 20px;
           font-size: 15px;
@@ -296,7 +296,7 @@
           @include roboto-medium;
 
           font-size: 13px;
-          color: $tc-gray-20;
+          color: $tc-gray-10;
           letter-spacing: 0;
           line-height: 20px;
           padding: 15px 20px;

src/shared/components/challenge-detail/Header/style.scss

@@ -59,24 +59,24 @@ export default function Registrants({ challenge, checkpointResults, results }) {
     - new Date(b.registrationDate).getTime());
 
   return (
-    <div styleName={`container ${twoRounds ? 'design' : ''}`}>
-      <div styleName="head">
+    <div styleName={`container ${twoRounds ? 'design' : ''}`} role="table" aria-label="Registrants">
+      <div styleName="head" role="row">
         <div styleName="col-1">
-Username
+          <span role="columnheader">Username</span>
         </div>
         <div styleName="col-2">
-Registration Date
+          <span role="columnheader">Registration Date</span>
         </div>
         {twoRounds && (
         <div styleName="col-3">
-Round 1 Submitted Date
+          <span role="columnheader">Round 1 Submitted Date</span>
         </div>
         )}
         <div styleName="col-4">
-          {twoRounds ? 'Round 2 Submitted Date' : 'Submitted Date'}
+          <span role="columnheader">{twoRounds ? 'Round 2 Submitted Date' : 'Submitted Date'}</span>
         </div>
       </div>
-      <div styleName="body">
+      <div styleName="body" role="rowgroup">
         {
           registrants.map((r) => {
             const placement = getPlace(results, r.handle, places);
@@ -98,17 +98,19 @@ Round 1 Submitted Date
             }
 
             return (
-              <div styleName="row" key={r.handle}>
+              <div styleName="row" key={r.handle} role="row">
                 <div styleName="col-1">
-                  <a href={`${config.URL.BASE}/members/${r.handle}`} style={colorStyle}>
-                    {r.handle}
-                  </a>
+                  <span role="cell">
+                    <a href={`${config.URL.BASE}/members/${r.handle}`} style={colorStyle}>
+                      {r.handle}
+                    </a>
+                  </span>
                 </div>
                 <div styleName="col-2">
                   <div styleName="sm-only title">
 Registration Date
                   </div>
-                  {formatDate(r.registrationDate)}
+                  <span role="cell">{formatDate(r.registrationDate)}</span>
                 </div>
                 {
                   twoRounds
@@ -118,7 +120,7 @@ Registration Date
 Round 1 Submitted Date
                     </div>
                     <div>
-                      <span>
+                      <span role="cell">
                         {checkpoint}
                       </span>
                       {
@@ -135,11 +137,11 @@ Round 1 Submitted Date
 Submitted Date
                   </div>
                   <div>
-                    <span>
+                    <span role="cell">
                       {final}
                     </span>
                     {placement > 0 && (
-                    <span styleName={`placement ${placement < 4 ? `placement-${placement}` : ''}`}>
+                    <span role="cell" styleName={`placement ${placement < 4 ? `placement-${placement}` : ''}`}>
                       {placement}
                     </span>
                     )}

src/shared/components/challenge-detail/Registrants/index.jsx

@@ -20,14 +20,14 @@ export default function Prize({
 }) {
   const component = (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-    <div tabIndex={0} role="figure" aria-label={`${label} ${prizeUnitSymbol} ${totalPrize.toLocaleString()}`}>
-      <div styleName="prize">
+    <div tabIndex={0} aria-label={`${label} ${prizeUnitSymbol} ${totalPrize.toLocaleString()}`}>
+      <div styleName="prize" aria-hidden="true">
         <span styleName="symbol">
           {prizeUnitSymbol}
         </span>
         {totalPrize.toLocaleString()}
       </div>
-      <div styleName="label">
+      <div styleName="label" aria-hidden="true">
         {label}
       </div>
     </div>