From c4bb0327e39b52d87dcd433b1b35dd8169c89897 Mon Sep 17 00:00:00 2001
From: liweitian <liweitian93@outlook.com>
Date: Sun, 19 Apr 2020 23:36:29 +0800
Subject: [PATCH 1/2] add main landmark on each page

---
 .../client/src/components/Header/index.jsx    |  2 +-
 .../src/components/MainContent/index.jsx      |  6 +++-
 .../packages/client/src/pages/about/index.tsx |  2 +-
 .../client/src/pages/design/index.tsx         | 34 +++++++++----------
 .../packages/client/src/pages/home/index.tsx  |  2 +-
 .../src/pages/language-generation/index.tsx   |  2 +-
 .../pages/language-understanding/index.tsx    |  2 +-
 .../pages/notifications/NotificationList.tsx  |  2 +-
 .../client/src/pages/publish/index.tsx        |  2 +-
 .../client/src/pages/skills/index.tsx         | 18 +++++-----
 10 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/Composer/packages/client/src/components/Header/index.jsx b/Composer/packages/client/src/components/Header/index.jsx
index 80e8c99e67..08454b9318 100644
--- a/Composer/packages/client/src/components/Header/index.jsx
+++ b/Composer/packages/client/src/components/Header/index.jsx
@@ -27,7 +27,7 @@ export const Header = props => {
   const showUpdateAvailableIcon = status === AppUpdaterStatus.UPDATE_AVAILABLE && !showing;
 
   return (
-    <div css={headerContainer}>
+    <div role="banner" css={headerContainer}>
       <img
         style={{ marginLeft: '9px', marginTop: '6px' }}
         alt={formatMessage('Composer Logo')}
diff --git a/Composer/packages/client/src/components/MainContent/index.jsx b/Composer/packages/client/src/components/MainContent/index.jsx
index c5e9a82e52..07c59554c4 100644
--- a/Composer/packages/client/src/components/MainContent/index.jsx
+++ b/Composer/packages/client/src/components/MainContent/index.jsx
@@ -7,7 +7,11 @@ import { PropTypes } from 'prop-types';
 
 import { contentContainer } from './styles';
 
-export const MainContent = props => <div css={contentContainer}>{props.children}</div>;
+export const MainContent = props => (
+  <div role="main" css={contentContainer}>
+    {props.children}
+  </div>
+);
 
 MainContent.propTypes = {
   children: PropTypes.element,
diff --git a/Composer/packages/client/src/pages/about/index.tsx b/Composer/packages/client/src/pages/about/index.tsx
index 734b2aba13..db4698a1df 100644
--- a/Composer/packages/client/src/pages/about/index.tsx
+++ b/Composer/packages/client/src/pages/about/index.tsx
@@ -12,7 +12,7 @@ import * as about from './styles';
 
 export const About: React.FC<RouteComponentProps> = () => {
   return (
-    <div css={about.outline}>
+    <div role="main" css={about.outline}>
       <div css={about.content}>
         <h1 css={about.title}> {formatMessage(`About`)} </h1>
         <div css={about.body}>
diff --git a/Composer/packages/client/src/pages/design/index.tsx b/Composer/packages/client/src/pages/design/index.tsx
index b7f4ecf9e9..97e2aa6b42 100644
--- a/Composer/packages/client/src/pages/design/index.tsx
+++ b/Composer/packages/client/src/pages/design/index.tsx
@@ -275,20 +275,20 @@ function DesignPage(props) {
     const items =
       dialogs.length > 0
         ? breadcrumb.reduce((result, item, index) => {
-            const { dialogId, selected, focused } = item;
-            const text = getbreadcrumbLabel(dialogs, dialogId, selected, focused);
-            if (text) {
-              result.push({
-                // @ts-ignore
-                index,
-                isRoot: !selected && !focused,
-                text,
-                ...item,
-                onClick: handleBreadcrumbItemClick,
-              });
-            }
-            return result;
-          }, [] as IBreadcrumbItem[])
+          const { dialogId, selected, focused } = item;
+          const text = getbreadcrumbLabel(dialogs, dialogId, selected, focused);
+          if (text) {
+            result.push({
+              // @ts-ignore
+              index,
+              isRoot: !selected && !focused,
+              text,
+              ...item,
+              onClick: handleBreadcrumbItemClick,
+            });
+          }
+          return result;
+        }, [] as IBreadcrumbItem[])
         : [];
     return (
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
@@ -390,7 +390,7 @@ function DesignPage(props) {
           onDeleteDialog={handleDeleteDialog}
           onDeleteTrigger={handleDeleteTrigger}
         />
-        <div css={contentWrapper}>
+        <div role="main" css={contentWrapper}>
           {match && (
             <ToolBar
               toolbarItems={toolbarItems}
@@ -417,8 +417,8 @@ function DesignPage(props) {
                     schema={schemas.sdk.content}
                   />
                 ) : (
-                  <VisualEditor openNewTriggerModal={openNewTriggerModal} />
-                )}
+                    <VisualEditor openNewTriggerModal={openNewTriggerModal} />
+                  )}
               </div>
               <PropertyEditor />
             </div>
diff --git a/Composer/packages/client/src/pages/home/index.tsx b/Composer/packages/client/src/pages/home/index.tsx
index a6fac66ea5..5612522122 100644
--- a/Composer/packages/client/src/pages/home/index.tsx
+++ b/Composer/packages/client/src/pages/home/index.tsx
@@ -129,7 +129,7 @@ const Home: React.FC<RouteComponentProps> = () => {
     <div css={home.outline}>
       <ToolBar toolbarItems={toolbarItems} />
       <div css={home.page}>
-        <div css={home.leftPage}>
+        <div role="main" css={home.leftPage}>
           <h1 css={home.title}>{formatMessage(`Bot Framework Composer`)}</h1>
           <div css={home.introduction}>
             {formatMessage(
diff --git a/Composer/packages/client/src/pages/language-generation/index.tsx b/Composer/packages/client/src/pages/language-generation/index.tsx
index 370acebcdd..c3878f46df 100644
--- a/Composer/packages/client/src/pages/language-generation/index.tsx
+++ b/Composer/packages/client/src/pages/language-generation/index.tsx
@@ -119,7 +119,7 @@ const LGPage: React.FC<LGPageProps> = props => {
               />
             </div>
           </div>
-          <div css={ContentStyle} data-testid="LGEditor">
+          <div role="main" css={ContentStyle} data-testid="LGEditor">
             <div css={contentEditor}>
               <Suspense fallback={<LoadingSpinner />}>
                 <Router primary={false} component={Fragment}>
diff --git a/Composer/packages/client/src/pages/language-understanding/index.tsx b/Composer/packages/client/src/pages/language-understanding/index.tsx
index 0e756a2bf1..58772f381d 100644
--- a/Composer/packages/client/src/pages/language-understanding/index.tsx
+++ b/Composer/packages/client/src/pages/language-understanding/index.tsx
@@ -120,7 +120,7 @@ const LUPage: React.FC<LUPageProps> = props => {
             )}
           </div>
         </div>
-        <div css={ContentStyle} data-testid="LUEditor">
+        <div role="main" css={ContentStyle} data-testid="LUEditor">
           <div css={contentEditor}>
             <Suspense fallback={<LoadingSpinner />}>
               <Router primary={false} component={Fragment}>
diff --git a/Composer/packages/client/src/pages/notifications/NotificationList.tsx b/Composer/packages/client/src/pages/notifications/NotificationList.tsx
index 5dc42acd53..1b747cef0e 100644
--- a/Composer/packages/client/src/pages/notifications/NotificationList.tsx
+++ b/Composer/packages/client/src/pages/notifications/NotificationList.tsx
@@ -111,7 +111,7 @@ export const NotificationList: React.FC<INotificationListProps> = props => {
   const showItems = items.slice((pageIndex - 1) * itemCount, pageIndex * itemCount);
 
   return (
-    <div css={listRoot} data-testid="notifications-table-view">
+    <div role="main" css={listRoot} data-testid="notifications-table-view">
       <div css={tableView}>
         <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
           <DetailsList
diff --git a/Composer/packages/client/src/pages/publish/index.tsx b/Composer/packages/client/src/pages/publish/index.tsx
index 3dfd34d842..9a8682ab4f 100644
--- a/Composer/packages/client/src/pages/publish/index.tsx
+++ b/Composer/packages/client/src/pages/publish/index.tsx
@@ -402,7 +402,7 @@ const Publish: React.FC<PublishPageProps> = props => {
       <div css={ContentHeaderStyle}>
         <h1 css={HeaderText}>{selectedTarget ? selectedTargetName : formatMessage('Publish Profiles')}</h1>
       </div>
-      <div css={ContentStyle} data-testid="Publish">
+      <div role="main" css={ContentStyle} data-testid="Publish">
         <div css={projectContainer}>
           <div
             key={'_all'}
diff --git a/Composer/packages/client/src/pages/skills/index.tsx b/Composer/packages/client/src/pages/skills/index.tsx
index 57191684ff..a1cadc5593 100644
--- a/Composer/packages/client/src/pages/skills/index.tsx
+++ b/Composer/packages/client/src/pages/skills/index.tsx
@@ -35,14 +35,16 @@ const Skills: React.FC<RouteComponentProps> = () => {
         <h1 css={HeaderText}>{formatMessage('Skills')}</h1>
       </div>
       <div css={ContentStyle}></div>
-      <SkillSettings
-        projectId={state.projectId}
-        botName={state.botName}
-        settings={state.settings}
-        setSettings={actions.setSettings}
-        botId={state.settings.MicrosoftAppId}
-        skillHostEndpoint={state.settings.skillHostEndpoint as string | undefined}
-      />
+      <div role="main">
+        <SkillSettings
+          projectId={state.projectId}
+          botName={state.botName}
+          settings={state.settings}
+          setSettings={actions.setSettings}
+          botId={state.settings.MicrosoftAppId}
+          skillHostEndpoint={state.settings.skillHostEndpoint as string | undefined}
+        />
+      </div>
       <SkillList skills={skills} projectId={projectId} />
     </div>
   );

From bce51b278615011b5d911b157e7a461493561e1a Mon Sep 17 00:00:00 2001
From: liweitian <liweitian93@outlook.com>
Date: Thu, 23 Apr 2020 23:04:52 +0800
Subject: [PATCH 2/2] lint fix

---
 .../client/src/pages/design/index.tsx         | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/Composer/packages/client/src/pages/design/index.tsx b/Composer/packages/client/src/pages/design/index.tsx
index 97e2aa6b42..351548117c 100644
--- a/Composer/packages/client/src/pages/design/index.tsx
+++ b/Composer/packages/client/src/pages/design/index.tsx
@@ -275,20 +275,20 @@ function DesignPage(props) {
     const items =
       dialogs.length > 0
         ? breadcrumb.reduce((result, item, index) => {
-          const { dialogId, selected, focused } = item;
-          const text = getbreadcrumbLabel(dialogs, dialogId, selected, focused);
-          if (text) {
-            result.push({
-              // @ts-ignore
-              index,
-              isRoot: !selected && !focused,
-              text,
-              ...item,
-              onClick: handleBreadcrumbItemClick,
-            });
-          }
-          return result;
-        }, [] as IBreadcrumbItem[])
+            const { dialogId, selected, focused } = item;
+            const text = getbreadcrumbLabel(dialogs, dialogId, selected, focused);
+            if (text) {
+              result.push({
+                // @ts-ignore
+                index,
+                isRoot: !selected && !focused,
+                text,
+                ...item,
+                onClick: handleBreadcrumbItemClick,
+              });
+            }
+            return result;
+          }, [] as IBreadcrumbItem[])
         : [];
     return (
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
@@ -417,8 +417,8 @@ function DesignPage(props) {
                     schema={schemas.sdk.content}
                   />
                 ) : (
-                    <VisualEditor openNewTriggerModal={openNewTriggerModal} />
-                  )}
+                  <VisualEditor openNewTriggerModal={openNewTriggerModal} />
+                )}
               </div>
               <PropertyEditor />
             </div>