From 0db308c7206806690fee8918ae14991cf5970c2e Mon Sep 17 00:00:00 2001
From: liweitian <liweitian93@outlook.com>
Date: Thu, 23 Apr 2020 22:57:23 +0800
Subject: [PATCH 1/3] fix accessibility issue 2011

---
 .../client/src/components/NavItem/styles.ts        |  1 -
 .../client/src/pages/home/ItemContainer.tsx        | 14 ++++++++++++--
 Composer/packages/client/src/pages/home/styles.ts  |  9 +++++++--
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/Composer/packages/client/src/components/NavItem/styles.ts b/Composer/packages/client/src/components/NavItem/styles.ts
index ec7de0f0f5..89e1d919f2 100644
--- a/Composer/packages/client/src/components/NavItem/styles.ts
+++ b/Composer/packages/client/src/components/NavItem/styles.ts
@@ -29,7 +29,6 @@ export const link = (active: boolean, disabled: boolean) => css`
     : `&:hover {
       background-color: ${NeutralColors.gray50};
     }
-
     &:focus {
       outline: none;
       .ms-Fabric--isFocusVisible &::after {
diff --git a/Composer/packages/client/src/pages/home/ItemContainer.tsx b/Composer/packages/client/src/pages/home/ItemContainer.tsx
index e5910b7244..e41ccdf6f7 100644
--- a/Composer/packages/client/src/pages/home/ItemContainer.tsx
+++ b/Composer/packages/client/src/pages/home/ItemContainer.tsx
@@ -29,6 +29,15 @@ export const ItemContainer: React.FC<ItemContainerProps> = ({
   forwardedRef,
   ...rest
 }) => {
+  const handleKeyDown = async event => {
+    if (event.key.toLowerCase() === 'enter') {
+      event.preventDefault();
+      if (onClick) {
+        await onClick();
+      }
+    }
+  };
+
   return (
     <div
       css={[itemContainerWrapper(disabled), styles.container]}
@@ -41,11 +50,12 @@ export const ItemContainer: React.FC<ItemContainerProps> = ({
       ref={forwardedRef}
       tabIndex={0}
       {...rest}
+      onKeyDown={handleKeyDown}
     >
-      <div css={[itemContainer, styles.title, disabled ? disabledItem.title : undefined]}>
+      <div tabIndex={-1} css={[itemContainer, styles.title, disabled ? disabledItem.title : undefined]}>
         <div css={itemContainerTitle}>{title}</div>
       </div>
-      <div css={[itemContainer, styles.content, disabled ? disabledItem.content : undefined]}>
+      <div tabIndex={-1} css={[itemContainer, styles.content, disabled ? disabledItem.content : undefined]}>
         <div css={itemContainerContent}>{content}</div>
       </div>
     </div>
diff --git a/Composer/packages/client/src/pages/home/styles.ts b/Composer/packages/client/src/pages/home/styles.ts
index fea85a0213..a2ad567b4a 100644
--- a/Composer/packages/client/src/pages/home/styles.ts
+++ b/Composer/packages/client/src/pages/home/styles.ts
@@ -77,6 +77,7 @@ export const itemContainerWrapper = (disabled?: boolean) => css`
 `;
 
 export const itemContainer = css`
+  outline: none;
   height: 50%;
 `;
 
@@ -88,6 +89,7 @@ export const itemContainerTitle = css`
   font-weight: 600;
   padding: 0.5rem 1rem;
   box-sizing: border-box;
+  outline: none;
 `;
 
 export const itemContainerContent = css`
@@ -96,6 +98,7 @@ export const itemContainerContent = css`
   text-overflow: ellipsis;
   word-break: break-word;
   padding: 0.5rem 1rem;
+  outline: none;
 `;
 
 export const subtitle = css`
@@ -166,10 +169,10 @@ const baseBotItem = {
   container: css`
     box-shadow: ${Depths.depth4};
     transition: box-shadow ${MotionDurations.duration2} ${MotionTimings.standard};
-
     &:hover,
     &:focus {
       box-shadow: ${Depths.depth16};
+      outline: rgb(102, 102, 102) solid 1px;
     }
 
     &:active {
@@ -225,7 +228,9 @@ export const exampleListCell = css`
   padding: 16px;
   box-sizing: border-box;
   display: flex;
-
+  &:focus {
+    outline: rgb(102, 102, 102) solid 1px;
+  }
   &:hover {
     background: ${palette.neutralLight};
   }

From aa511841a744e3e761af89d31f85bcb50de44e3b Mon Sep 17 00:00:00 2001
From: liweitian <liweitian93@outlook.com>
Date: Tue, 28 Apr 2020 22:56:13 +0800
Subject: [PATCH 2/3] change div to button

---
 .../client/src/pages/home/ItemContainer.tsx   | 43 +++++++++++--------
 .../packages/client/src/pages/home/styles.ts  | 18 +++++++-
 2 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/Composer/packages/client/src/pages/home/ItemContainer.tsx b/Composer/packages/client/src/pages/home/ItemContainer.tsx
index e41ccdf6f7..4abf6f8dae 100644
--- a/Composer/packages/client/src/pages/home/ItemContainer.tsx
+++ b/Composer/packages/client/src/pages/home/ItemContainer.tsx
@@ -4,8 +4,16 @@
 /** @jsx jsx */
 import { jsx, SerializedStyles } from '@emotion/core';
 import React from 'react';
+import { Button } from 'office-ui-fabric-react/lib/Button';
 
-import { itemContainerWrapper, itemContainer, itemContainerContent, itemContainerTitle, disabledItem } from './styles';
+import {
+  itemContainerWrapper,
+  itemContainer,
+  itemContainerContent,
+  itemContainerTitle,
+  disabledItem,
+  childrenContainer,
+} from './styles';
 
 interface ItemContainerProps {
   onClick?: () => void | Promise<void>;
@@ -29,17 +37,21 @@ export const ItemContainer: React.FC<ItemContainerProps> = ({
   forwardedRef,
   ...rest
 }) => {
-  const handleKeyDown = async event => {
-    if (event.key.toLowerCase() === 'enter') {
-      event.preventDefault();
-      if (onClick) {
-        await onClick();
-      }
-    }
+  const onRenderChildren = () => {
+    return (
+      <div css={childrenContainer}>
+        <div css={[itemContainer, styles.title, disabled ? disabledItem.title : undefined]}>
+          <div css={itemContainerTitle}>{title}</div>
+        </div>
+        <div css={[itemContainer, styles.content, disabled ? disabledItem.content : undefined]}>
+          <div css={itemContainerContent}>{content}</div>
+        </div>
+      </div>
+    );
   };
 
   return (
-    <div
+    <Button
       css={[itemContainerWrapper(disabled), styles.container]}
       onClick={async e => {
         e.preventDefault();
@@ -48,16 +60,9 @@ export const ItemContainer: React.FC<ItemContainerProps> = ({
         }
       }}
       ref={forwardedRef}
-      tabIndex={0}
       {...rest}
-      onKeyDown={handleKeyDown}
-    >
-      <div tabIndex={-1} css={[itemContainer, styles.title, disabled ? disabledItem.title : undefined]}>
-        <div css={itemContainerTitle}>{title}</div>
-      </div>
-      <div tabIndex={-1} css={[itemContainer, styles.content, disabled ? disabledItem.content : undefined]}>
-        <div css={itemContainerContent}>{content}</div>
-      </div>
-    </div>
+      onRenderChildren={onRenderChildren}
+      disabled={disabled}
+    />
   );
 };
diff --git a/Composer/packages/client/src/pages/home/styles.ts b/Composer/packages/client/src/pages/home/styles.ts
index a2ad567b4a..d7994b95de 100644
--- a/Composer/packages/client/src/pages/home/styles.ts
+++ b/Composer/packages/client/src/pages/home/styles.ts
@@ -68,12 +68,14 @@ export const leftContainer = css`
 
 export const itemContainerWrapper = (disabled?: boolean) => css`
   border-radius: 2px;
+  border-width: 0;
   cursor: ${disabled ? 'auto' : 'pointer'};
   display: block;
   min-width: 180px;
   height: 130px;
   width: 11vw;
   margin-right: 30px;
+  padding: 0;
 `;
 
 export const itemContainer = css`
@@ -93,11 +95,14 @@ export const itemContainerTitle = css`
 `;
 
 export const itemContainerContent = css`
+  height: 100%;
+  font-size: 16px;
   font-weight: 600;
+  text-align: left;
+  padding: 10px 0 0 16px;
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
-  padding: 0.5rem 1rem;
   outline: none;
 `;
 
@@ -162,17 +167,19 @@ export const disabledItem = {
     font-size: smaller;
     word-wrap: break-word;
     color: #a19f9d;
+    background: white;
   `,
 };
 
 const baseBotItem = {
   container: css`
+    padding: 0;
+    border-width: 0;
     box-shadow: ${Depths.depth4};
     transition: box-shadow ${MotionDurations.duration2} ${MotionTimings.standard};
     &:hover,
     &:focus {
       box-shadow: ${Depths.depth16};
-      outline: rgb(102, 102, 102) solid 1px;
     }
 
     &:active {
@@ -198,6 +205,13 @@ export const lastestBotItem = {
   `,
 };
 
+export const childrenContainer = css`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+`;
+
 export const detailListContainer = css`
   position: relative;
   max-height: 40vh;

From 6badc92e9b9b9b3136c120a0600a30f3504198ca Mon Sep 17 00:00:00 2001
From: Chris Whitten <christopher.whitten@microsoft.com>
Date: Wed, 29 Apr 2020 09:01:18 -0700
Subject: [PATCH 3/3] Adds links to taborder

---
 Composer/packages/client/src/pages/home/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/Composer/packages/client/src/pages/home/index.tsx b/Composer/packages/client/src/pages/home/index.tsx
index 96a91bccdf..332184f427 100644
--- a/Composer/packages/client/src/pages/home/index.tsx
+++ b/Composer/packages/client/src/pages/home/index.tsx
@@ -211,8 +211,9 @@ const Home: React.FC<RouteComponentProps> = () => {
                 {linksButtom.map(link => {
                   return (
                     <Link
+                      style={{ width: '150px' }}
                       href={link.to}
-                      tabIndex={-1}
+                      tabIndex={0}
                       key={'homePageLeftLinks-' + link.text}
                       target="_blank"
                       rel="noopener noreferrer"