From 5d1a29d59729d55e79e0ea25251282096896c321 Mon Sep 17 00:00:00 2001
From: vaidankarswapnil <swapnil.v@zen3tech.com>
Date: Wed, 19 Jan 2022 19:54:36 +0530
Subject: [PATCH] fix a11y issue for the list

---
 src/Explorer/SplashScreen/SplashScreen.less | 38 +++++++++++++--------
 src/Explorer/SplashScreen/SplashScreen.tsx  | 16 ++++-----
 2 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/src/Explorer/SplashScreen/SplashScreen.less b/src/Explorer/SplashScreen/SplashScreen.less
index d30a52be3..713dfaccf 100644
--- a/src/Explorer/SplashScreen/SplashScreen.less
+++ b/src/Explorer/SplashScreen/SplashScreen.less
@@ -12,13 +12,13 @@
     margin: auto;
     padding-left: 21px;
     padding-right: 16px;
-    max-width: 1168px;;
+    max-width: 1168px;
 
-    >* {
+    > * {
       justify-content: space-between;
     }
 
-    >.title {
+    > .title {
       position: relative; // To attach FeaturePanelLauncher as absolute
       color: @BaseHigh;
       font-size: 48px;
@@ -27,7 +27,7 @@
       text-align: center;
     }
 
-    >.subtitle {
+    > .subtitle {
       color: @BaseHigh;
       font-size: 18px;
       padding-left: 0px;
@@ -41,7 +41,7 @@
       cursor: pointer;
       margin: 40px auto;
 
-      >.mainButton {
+      > .mainButton {
         min-width: 124px;
         max-width: 296px;
         padding: 32px 16px;
@@ -52,7 +52,7 @@
         box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
         border-radius: 4px;
 
-        >.legendContainer {
+        > .legendContainer {
           margin-left: 16px;
           text-align: left;
 
@@ -68,7 +68,7 @@
         }
       }
 
-      >:nth-child(n+2) {
+      > :nth-child(n + 2) {
         margin-left: 32px;
       }
     }
@@ -83,7 +83,7 @@
         min-width: 124px;
         max-width: 296px;
 
-        >.title {
+        > .title {
           font-size: 18px;
           font-family: @SemiboldFont;
           color: @BaseDark;
@@ -91,7 +91,7 @@
           margin-bottom: 16px;
         }
 
-        >ul {
+        > ul {
           list-style: none;
           padding-left: 0px;
           margin-bottom: 0px;
@@ -101,7 +101,7 @@
             .flex-display();
             align-items: flex-start;
 
-            >img {
+            > img {
               margin-right: @DefaultSpace;
               width: 24px;
               height: 24px;
@@ -133,12 +133,12 @@
           .flex-display();
           .flex-direction();
 
-          >.title {
+          > .title {
             color: @BaseDark;
             padding: 0px;
             font-size: 12px;
           }
-          >.description {
+          > .description {
             color: @BaseDark;
           }
 
@@ -150,6 +150,14 @@
         &.commonTasks {
           li {
             cursor: pointer;
+            .commonTaskList {
+              width: 100%;
+              > img {
+                margin-right: @DefaultSpace;
+                width: 24px;
+                height: 24px;
+              }
+            }
           }
         }
 
@@ -167,12 +175,12 @@
       }
 
       &:focus {
-          .focus();
+        .focus();
       }
 
       &:active {
-          .active();
+        .active();
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/Explorer/SplashScreen/SplashScreen.tsx b/src/Explorer/SplashScreen/SplashScreen.tsx
index fcaf49b0b..319d0cf99 100644
--- a/src/Explorer/SplashScreen/SplashScreen.tsx
+++ b/src/Explorer/SplashScreen/SplashScreen.tsx
@@ -57,13 +57,13 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
     this.subscriptions = [];
   }
 
-  public componentWillUnmount() {
+  public componentWillUnmount(): void {
     while (this.subscriptions.length) {
       this.subscriptions.pop().dispose();
     }
   }
 
-  public componentDidMount() {
+  public componentDidMount(): void {
     this.subscriptions.push(
       {
         dispose: useNotebook.subscribe(
@@ -131,13 +131,13 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
                     key={`${item.title}${item.description}`}
                     onClick={item.onClick}
                     onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
-                    tabIndex={0}
-                    role="button"
                   >
-                    <img src={item.iconSrc} alt="" />
-                    <span className="oneLineContent" title={item.info}>
-                      {item.title}
-                    </span>
+                    <div className="commonTaskList" role="button" tabIndex={0}>
+                      <img src={item.iconSrc} alt="" />
+                      <span className="oneLineContent" title={item.info}>
+                        {item.title}
+                      </span>
+                    </div>
                   </li>
                 ))}
               </ul>