Merge pull request #3156 from topcoder-platform/develop

merge to master

Author: sushilshinde

__tests__/shared/components/TopcoderHeader/__snapshots__/index.jsx.snap

@@ -9,6 +9,7 @@ exports[`Default render 1`] = `
     className="src-shared-components-TopcoderHeader-___style__main-desktop-header___oqm_l"
   >
     <a
+      aria-label="Topcoder Homepage"
       className="src-shared-components-TopcoderHeader-___style__logo___2WLJ0"
       href="https://www.topcoder-dev.com"
     >
@@ -286,6 +287,7 @@ exports[`Render with open menu 1`] = `
     className="src-shared-components-TopcoderHeader-___style__main-desktop-header___oqm_l"
   >
     <a
+      aria-label="Topcoder Homepage"
       className="src-shared-components-TopcoderHeader-___style__logo___2WLJ0"
       href="https://www.topcoder-dev.com"
     >
@@ -574,6 +576,7 @@ exports[`Render with specified profile 1`] = `
     className="src-shared-components-TopcoderHeader-___style__main-desktop-header___oqm_l"
   >
     <a
+      aria-label="Topcoder Homepage"
       className="src-shared-components-TopcoderHeader-___style__logo___2WLJ0"
       href="https://www.topcoder-dev.com"
     >

__tests__/shared/components/challenge-listing/Filters/__snapshots__/DateRangePicker.jsx.snap

@@ -18,7 +18,7 @@ exports[`Matches shallow shapshot 1`] = `
   endDatePlaceholderText="End Date"
   firstDayOfWeek={null}
   focusedInput={null}
-  hideKeyboardShortcutsPanel={true}
+  hideKeyboardShortcutsPanel={false}
   horizontalMargin={0}
   initialVisibleMonth={null}
   inputIconPosition="before"
@@ -46,6 +46,7 @@ exports[`Matches shallow shapshot 1`] = `
       "calendarLabel": "Calendar",
       "chooseAvailableEndDate": [Function],
       "chooseAvailableStartDate": [Function],
+      "clearDate": "Clear Date",
       "clearDates": "Clear Dates",
       "closeDatePicker": "Close",
       "dateIsSelected": [Function],
@@ -57,8 +58,8 @@ exports[`Matches shallow shapshot 1`] = `
       "focusStartDate": "Interact with the calendar and add the check-in date for your trip.",
       "hideKeyboardShortcutsPanel": "Close the shortcuts panel.",
       "homeEnd": "Home and end keys",
-      "jumpToNextMonth": "Move forward to switch to the next month.",
-      "jumpToPrevMonth": "Move backward to switch to the previous month.",
+      "jumpToNextMonth": "Next Month",
+      "jumpToPrevMonth": "Previous Month",
       "keyboardNavigationInstructions": "Press the down arrow key to interact with the calendar and
   select a date. Press the question mark key to get the keyboard shortcuts for changing dates.",
       "keyboardShortcuts": "Keyboard Shortcuts",

__tests__/shared/components/challenge-listing/Filters/__snapshots__/FiltersPanel.jsx.snap

@@ -60,6 +60,7 @@ exports[`Matches shallow shapshot 1`] = `
               },
             ]
           }
+          placeholder="Select Keywords"
           selectRef={[Function]}
           simpleValue={true}
           value={null}
@@ -131,6 +132,7 @@ exports[`Matches shallow shapshot 1`] = `
               },
             ]
           }
+          placeholder="Select Subtrack"
           selectRef={[Function]}
           simpleValue={true}
           value={null}
@@ -276,6 +278,7 @@ exports[`Matches shallow shapshot 2`] = `
           multi={true}
           onChange={[Function]}
           options={Array []}
+          placeholder="Select Keywords"
           selectRef={[Function]}
           simpleValue={true}
           value={null}
@@ -336,6 +339,7 @@ exports[`Matches shallow shapshot 2`] = `
           multi={true}
           onChange={[Function]}
           options={Array []}
+          placeholder="Select Subtrack"
           selectRef={[Function]}
           simpleValue={true}
           value={null}

src/client/styles.scss

@@ -3,6 +3,6 @@
    * the page by Topcoder accounts-app. */
   #tc-accounts-iframe {
     border: none;
-    display: block;
+    display: none;
   }
 }

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

@@ -301,7 +301,7 @@ Uploading:
                 }).then(file => this.onSuccess(file, path));
                 return undefined;
               }}
-              role="button"
+              role="tab"
               styleName="drop-zone-mask"
               tabIndex={0}
               aria-label="Select file to upload"

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

@@ -316,14 +316,15 @@ Please follow the instructions on the Challenge Details page regarding
                 <input
                   type="checkbox"
                   id="agree"
+                  aria-label="I understand and agree"
                   onChange={e => setAgreed(e.target.checked)}
                 />
                 <label htmlFor="agree">
-                  <div styleName="tc-checkbox-label">
-I UNDERSTAND AND AGREE
-                  </div>
                   <input type="hidden" />
                 </label>
+                <div styleName="tc-checkbox-label">
+I UNDERSTAND AND AGREE
+                </div>
               </div>
               <PrimaryButton
                 type="submit"

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

@@ -45,7 +45,7 @@
   }
 
   a {
-    color: #1f7be7;
+    color: $tc-dark-blue-110;
     cursor: pointer;
   }
 
@@ -163,7 +163,7 @@
     }
 
     a {
-      color: #1a85ff;
+      color: $tc-dark-blue-110;
     }
 
     .tc-checkbox-label {
@@ -187,7 +187,12 @@
       margin-bottom: 30px;
 
       input[type=checkbox] {
-        display: none;
+        visibility: visible;
+        position: absolute;
+        opacity: 0;
+        cursor: pointer;
+        height: 0;
+        width: 0;
       }
 
       label {
@@ -230,6 +235,10 @@
         border-color: $tc-dark-blue;
       }
 
+      input[type=checkbox]:focus ~ label {
+        outline: 2px auto $tc-dark-blue;
+      }
+
       input[type=checkbox]:checked + label::after {
         opacity: 1;
         border-color: $tc-white;

src/shared/components/TopcoderFooter/style.scss

@@ -4,8 +4,6 @@
   text-align: center;
   font-family: "Roboto", Helvetica, Arial, sans-serif;
   font-size: 12px;
-  color: $tc-gray-60;
-  color: $tc-gray-40;
   color: $tc-gray-30;
 }
 

src/shared/components/TopcoderHeader/Auth/style.scss

@@ -26,11 +26,11 @@
     }
 
     .tc-btn-default {
-      border: 1px solid $tc-dark-blue;
-      color: $tc-dark-blue;
+      border: 1px solid $tc-dark-blue-110;
+      color: $tc-dark-blue-110;
 
       &:hover {
-        background: $tc-dark-blue;
+        background: $tc-dark-blue-110;
         color: $tc-white;
       }
     }

src/shared/components/TopcoderHeader/index.jsx

@@ -348,7 +348,7 @@ export default class TopcoderHeader extends React.Component {
         }}
       >
         <div styleName="main-desktop-header">
-          <a href={BASE_URL} styleName="logo">
+          <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; }}>

src/shared/components/TopcoderHeader/mobile/Header/index.jsx

@@ -25,7 +25,7 @@ export default function Header({
         styleName="header"
         tabIndex={0}
       >
-        {<LogoTopcoder styleName="logo" />}
+        {<span aria-label="Topcoder Homepage" role="banner"><LogoTopcoder styleName="logo" /></span>}
         <div styleName="menu">
 Menu
         </div>

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

@@ -16,7 +16,7 @@ export default function DeadlinesPanel({ deadlines }) {
   const started = moment(start).isBefore(moment());
 
   return (
-    <div styleName="panel">
+    <div styleName="panel" tabIndex="0" role="tabpanel">
       <p styleName="timezone">
 Timezone:
         {moment.tz.guess()}

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

@@ -73,6 +73,9 @@ export default function ChallengeViewSelector(props) {
       <div styleName="mask right" />
       <div styleName="challenge-view-selector">
         <a
+          tabIndex="0"
+          role="tab"
+          aria-selected={selectedView === DETAIL_TABS.DETAILS}
           onClick={(e) => { handleSelectorClicked(e, DETAIL_TABS.DETAILS); }}
           onKeyPress={(e) => { handleSelectorClicked(e, DETAIL_TABS.DETAILS); }}
           styleName={getSelectorStyle(selectedView, DETAIL_TABS.DETAILS)}
@@ -82,6 +85,9 @@ DETAILS
         {
           numRegistrants ? (
             <a
+              tabIndex="0"
+              role="tab"
+              aria-selected={selectedView === DETAIL_TABS.REGISTRANTS}
               onClick={(e) => {
                 handleSelectorClicked(e, DETAIL_TABS.REGISTRANTS);
               }}
@@ -100,6 +106,9 @@ REGISTRANTS (
           trackLower === 'design' && checkpointCount > 0
           && (
           <a
+            tabIndex="0"
+            role="tab"
+            aria-selected={selectedView === DETAIL_TABS.CHECKPOINTS}
             onClick={(e) => { handleSelectorClicked(e, DETAIL_TABS.CHECKPOINTS); }}
             onKeyPress={(e) => { handleSelectorClicked(e, DETAIL_TABS.CHECKPOINTS); }}
             styleName={getSelectorStyle(selectedView, DETAIL_TABS.CHECKPOINTS)}
@@ -113,6 +122,9 @@ CHECKPOINTS (
         {
           numSubmissions ? (
             <a
+              tabIndex="0"
+              role="tab"
+              aria-selected={selectedView === DETAIL_TABS.SUBMISSIONS}
               onClick={(e) => { handleSelectorClicked(e, DETAIL_TABS.SUBMISSIONS); }}
               onKeyPress={(e) => { handleSelectorClicked(e, DETAIL_TABS.SUBMISSIONS); }}
               styleName={getSelectorStyle(selectedView, DETAIL_TABS.SUBMISSIONS)}
@@ -126,6 +138,9 @@ SUBMISSIONS (
         {
           numWinners ? (
             <a
+              tabIndex="0"
+              role="tab"
+              aria-selected={selectedView === DETAIL_TABS.WINNERS}
               onClick={(e) => { handleSelectorClicked(e, DETAIL_TABS.WINNERS); }}
               onKeyPress={(e) => { handleSelectorClicked(e, DETAIL_TABS.WINNERS); }}
               styleName={getSelectorStyle(selectedView, DETAIL_TABS.WINNERS)}

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

@@ -261,9 +261,9 @@ export default function ChallengeHeader(props) {
         </div>
         <div styleName="prizes-ops-container">
           <div styleName="prizes-outer-container">
-            <h3 styleName="prizes-title">
+            <h2 styleName="prizes-title">
 PRIZES
-            </h3>
+            </h2>
             <Prizes prizes={prizes && prizes.length ? prizes : [0]} pointPrizes={pointPrizes} />
             {
               bonusType ? (

src/shared/components/challenge-detail/Specification/SideBar/ShareSocial.jsx

@@ -35,6 +35,7 @@ export default class ShareSocial extends React.Component {
           <a
             className="addthis_button_facebook"
             title="Facebook"
+            aria-label="Share via Facebook"
             href="#"
           >
             <div styleName="facebook-icon">
@@ -46,13 +47,15 @@ f
           <a
             className="addthis_button_twitter"
             title="Twitter"
+            aria-label="Share via Twitter"
             href="#"
           >
             <TwitterIcon />
           </a>
           <a
             className="addthis_button_print"
             title="Print"
+            aria-label="Print this challenge"
             href="#"
           >
             <PrintIcon />
@@ -61,13 +64,15 @@ f
             className="addthis_button_email"
             target="_blank"
             title="Email"
+            aria-label="Email this challenge"
             href="#"
           >
             <EmailIcon />
           </a>
           <a
             className="addthis_button_compact"
             href="#"
+            aria-label="More sharing options"
           >
             <MoreIcon />
           </a>