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

Qa accessibility

Author: PrakashDurlabhji

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

@@ -79,7 +79,7 @@ exports[`Default render 1`] = `
         />
       </span>
       <div
-        aria-label="Search"
+        aria-label="Find members by username or skill"
         className="src-shared-components-TopcoderHeader-___style__search-icon___3w5nA"
         data-menu="search"
         onBlur={[Function]}
@@ -372,7 +372,7 @@ exports[`Render with open menu 1`] = `
         />
       </span>
       <div
-        aria-label="Search"
+        aria-label="Find members by username or skill"
         className="src-shared-components-TopcoderHeader-___style__search-icon___3w5nA"
         data-menu="search"
         onBlur={[Function]}
@@ -704,7 +704,7 @@ exports[`Render with specified profile 1`] = `
         </span>
       </div>
       <div
-        aria-label="Search"
+        aria-label="Find members by username or skill"
         className="opened src-shared-components-TopcoderHeader-___style__search-icon___3w5nA"
         data-menu="search"
         onBlur={[Function]}

__tests__/shared/components/__snapshots__/SortingSelectBar.jsx.snap

@@ -4,11 +4,11 @@ exports[`Matches shallow shapshot 1`] = `
 <div
   className="src-shared-components-SortingSelectBar-___style__sortingBar___3esqf"
 >
-  <h1
+  <h2
     className="src-shared-components-SortingSelectBar-___style__title___36eG5"
   >
     title
-  </h1>
+  </h2>
   <div
     className="src-shared-components-SortingSelectBar-___style__view-options-toggle-container___1N4rY"
   >
@@ -80,10 +80,10 @@ exports[`Matches shallow shapshot 2`] = `
 <div
   className="src-shared-components-SortingSelectBar-___style__sortingBar___3esqf"
 >
-  <h1
+  <h2
     className="src-shared-components-SortingSelectBar-___style__title___36eG5"
   >
     title
-  </h1>
+  </h2>
 </div>
 `;

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

@@ -109,7 +109,7 @@ exports[`Matches shallow shapshot shapshot 2`] = `
     <span>
       <span
         aria-checked={false}
-        aria-label="Filter"
+        aria-label="Design toggle button pressed Off"
         className="src-shared-components-challenge-listing-Filters-___ChallengeFilters__filter-switch-with-label___21Ups"
         role="switch"
       >
@@ -126,7 +126,7 @@ exports[`Matches shallow shapshot shapshot 2`] = `
       </span>
       <span
         aria-checked={false}
-        aria-label="Filter"
+        aria-label="Development toggle button pressed Off"
         className="src-shared-components-challenge-listing-Filters-___ChallengeFilters__filter-switch-with-label___21Ups"
         role="switch"
       >
@@ -143,7 +143,7 @@ exports[`Matches shallow shapshot shapshot 2`] = `
       </span>
       <span
         aria-checked={false}
-        aria-label="Filter"
+        aria-label="Data Science toggle button pressed Off"
         className="src-shared-components-challenge-listing-Filters-___ChallengeFilters__filter-switch-with-label___21Ups"
         role="switch"
       >

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

@@ -16,6 +16,8 @@ exports[`Matches shallow shapshot 1`] = `
     className="src-shared-components-challenge-listing-Filters-ChallengeSearchBar-___style__SearchButton___3GzR0 src-shared-components-challenge-listing-Filters-ChallengeSearchBar-___style__active___8LjMb"
     onClick={[Function]}
     onKeyPress={[Function]}
+    role="button"
+    tabIndex="0"
   >
     <ZoomIcon
       className="src-shared-components-challenge-listing-Filters-ChallengeSearchBar-___style__zoomIcon___3d_cL"
@@ -44,6 +46,8 @@ exports[`Matches shallow shapshot 2`] = `
     className="src-shared-components-challenge-listing-Filters-ChallengeSearchBar-___style__SearchButton___3GzR0"
     onClick={[Function]}
     onKeyPress={[Function]}
+    role="button"
+    tabIndex="0"
   >
     <ZoomIcon
       className="src-shared-components-challenge-listing-Filters-ChallengeSearchBar-___style__zoomIcon___3d_cL"

src/shared/components/SortingSelectBar/index.jsx

@@ -9,9 +9,9 @@ export default function SortingSelectBar({
 }) {
   return (
     <div styleName="sortingBar">
-      <h1 styleName="title">
+      <h2 styleName="title">
         {title}
-      </h1>
+      </h2>
       {
         options ? (
           <div styleName="view-options-toggle-container">

src/shared/components/TopcoderHeader/index.jsx

@@ -366,7 +366,7 @@ export default class TopcoderHeader extends React.Component {
             {userMenuHandle}
             {authButtons}
             <div
-              aria-label="Search"
+              aria-label="Find members by username or skill"
               role="button"
               tabIndex={0}
               data-menu="search"

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

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

src/shared/components/challenge-listing/ChallengeCard/index.jsx

@@ -131,7 +131,7 @@ function ChallengeCard({
             to={challengeDetailLink}
             styleName="challenge-title"
             openNewTab={openChallengesInNewTabs}
-          ><h3>{challenge.name}</h3>
+          ><p>{challenge.name}</p>
           </Link>
           <div styleName="details-footer">
             <span styleName="date">

src/shared/components/challenge-listing/Filters/ChallengeFilters.jsx

@@ -76,21 +76,21 @@ export default function ChallengeFilters({
           isCardTypeSet === 'Challenges'
             ? (
               <span>
-                <span styleName="filter-switch-with-label" aria-label="Filter" role="switch" aria-checked={isTrackOn(TRACKS.DESIGN)}>
+                <span styleName="filter-switch-with-label" aria-label={`Design toggle button pressed ${isTrackOn(TRACKS.DESIGN) ? 'On' : 'Off'}`} role="switch" aria-checked={isTrackOn(TRACKS.DESIGN)}>
                   <SwitchWithLabel
                     enabled={isTrackOn(TRACKS.DESIGN)}
                     labelBefore="Design"
                     onSwitch={on => switchTrack(TRACKS.DESIGN, on)}
                   />
                 </span>
-                <span styleName="filter-switch-with-label" aria-label="Filter" role="switch" aria-checked={isTrackOn(TRACKS.DEVELOP)}>
+                <span styleName="filter-switch-with-label" aria-label={`Development toggle button pressed ${isTrackOn(TRACKS.DEVELOP) ? 'On' : 'Off'}`} role="switch" aria-checked={isTrackOn(TRACKS.DEVELOP)}>
                   <SwitchWithLabel
                     enabled={isTrackOn(TRACKS.DEVELOP)}
                     labelBefore="Development"
                     onSwitch={on => switchTrack(TRACKS.DEVELOP, on)}
                   />
                 </span>
-                <span styleName="filter-switch-with-label" aria-label="Filter" role="switch" aria-checked={isTrackOn(TRACKS.DATA_SCIENCE)}>
+                <span styleName="filter-switch-with-label" aria-label={`Data Science toggle button pressed ${isTrackOn(TRACKS.DATA_SCIENCE) ? 'On' : 'Off'}`} role="switch" aria-checked={isTrackOn(TRACKS.DATA_SCIENCE)}>
                   <SwitchWithLabel
                     enabled={isTrackOn(TRACKS.DATA_SCIENCE)}
                     labelBefore="Data Science"

src/shared/components/challenge-listing/Filters/ChallengeSearchBar/index.jsx

@@ -36,6 +36,8 @@ export default function ChallengeSearchBar({
         styleName={`SearchButton ${query ? 'active' : ''}`}
         onClick={() => onSearch(query.trim())}
         onKeyPress={() => onSearch(query.trim())}
+        tabIndex="0"
+        role="button"
       >
         <ZoomIcon styleName="zoomIcon" />
       </span>