From 1afe7657b54da39c7ede6935fda617a3fc700697 Mon Sep 17 00:00:00 2001
From: Afrisal Yodi Purnama <afrisalyp@gmail.com>
Date: Wed, 24 Jul 2019 08:52:07 +0700
Subject: [PATCH 1/2] Switch role.

---
 .../challenge-listing/Filters/ChallengeFilters.jsx  | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/shared/components/challenge-listing/Filters/ChallengeFilters.jsx b/src/shared/components/challenge-listing/Filters/ChallengeFilters.jsx
index d9a3ce9a3d..c6fd5feb0c 100644
--- a/src/shared/components/challenge-listing/Filters/ChallengeFilters.jsx
+++ b/src/shared/components/challenge-listing/Filters/ChallengeFilters.jsx
@@ -76,21 +76,28 @@ export default function ChallengeFilters({
           isCardTypeSet === 'Challenges'
             ? (
               <span>
-                <span styleName="filter-switch-with-label">
+                <span 
+                  styleName="filter-switch-with-label"
+                  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">
+                <span styleName="filter-switch-with-label"
+                  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">
+                <span styleName="filter-switch-with-label"
+                  role="switch"
+                  aria-checked={isTrackOn(TRACKS.DATA_SCIENCE)}>
                   <SwitchWithLabel
                     enabled={isTrackOn(TRACKS.DATA_SCIENCE)}
                     labelBefore="Data Science"

From 096ae9fe7c1468a9d7a32a382323f01de029d469 Mon Sep 17 00:00:00 2001
From: Afrisal Yodi Purnama <afrisalyp@gmail.com>
Date: Wed, 24 Jul 2019 11:30:43 +0700
Subject: [PATCH 2/2] Issue 2802.

---
 src/shared/components/SwitchWithLabel/index.jsx     |  3 +++
 .../challenge-listing/Filters/ChallengeFilters.jsx  | 13 +++----------
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/shared/components/SwitchWithLabel/index.jsx b/src/shared/components/SwitchWithLabel/index.jsx
index 1d80831a3b..43c3b0fba0 100644
--- a/src/shared/components/SwitchWithLabel/index.jsx
+++ b/src/shared/components/SwitchWithLabel/index.jsx
@@ -23,6 +23,9 @@ function SwitchWithLabel({
       className={theme.wrapper}
       onClick={() => onSwitch(!enabled)}
       onKeyPress={() => onSwitch(!enabled)}
+      role="switch"
+      aria-checked={enabled}
+      tabIndex={0}
     >
       {labelBefore}
       <Switch
diff --git a/src/shared/components/challenge-listing/Filters/ChallengeFilters.jsx b/src/shared/components/challenge-listing/Filters/ChallengeFilters.jsx
index c6fd5feb0c..d9a3ce9a3d 100644
--- a/src/shared/components/challenge-listing/Filters/ChallengeFilters.jsx
+++ b/src/shared/components/challenge-listing/Filters/ChallengeFilters.jsx
@@ -76,28 +76,21 @@ export default function ChallengeFilters({
           isCardTypeSet === 'Challenges'
             ? (
               <span>
-                <span 
-                  styleName="filter-switch-with-label"
-                  role="switch"
-                  aria-checked={isTrackOn(TRACKS.DESIGN)}>
+                <span styleName="filter-switch-with-label">
                   <SwitchWithLabel
                     enabled={isTrackOn(TRACKS.DESIGN)}
                     labelBefore="Design"
                     onSwitch={on => switchTrack(TRACKS.DESIGN, on)}
                   />
                 </span>
-                <span styleName="filter-switch-with-label"
-                  role="switch"
-                  aria-checked={isTrackOn(TRACKS.DEVELOP)}>
+                <span styleName="filter-switch-with-label">
                   <SwitchWithLabel
                     enabled={isTrackOn(TRACKS.DEVELOP)}
                     labelBefore="Development"
                     onSwitch={on => switchTrack(TRACKS.DEVELOP, on)}
                   />
                 </span>
-                <span styleName="filter-switch-with-label"
-                  role="switch"
-                  aria-checked={isTrackOn(TRACKS.DATA_SCIENCE)}>
+                <span styleName="filter-switch-with-label">
                   <SwitchWithLabel
                     enabled={isTrackOn(TRACKS.DATA_SCIENCE)}
                     labelBefore="Data Science"