From 3085e3a5ca9edc8b54a404d8bbbf3a5d08bf534b Mon Sep 17 00:00:00 2001
From: Eugene Olonov <EOlonov@gmail.com>
Date: Sat, 26 Mar 2022 13:52:37 -0700
Subject: [PATCH 1/2] a11y: ensure there is only one main landmark

Remove redundant main landmarks and add the landmark for pages where it is not defined

Contains the following changes:
- Removed MainContent component as it's not beeing used anywhere
- Remove main role duplication from Disigner pages
- Add main role to plugin pages
- (Unrelated improvement) Link Language modal search field label with the search field
---
 .../client/src/components/MainContent.tsx     | 22 -------------------
 .../MultiLanguage/AddLanguageModal.tsx        |  6 ++++-
 .../src/components/PluginHost/PluginHost.tsx  |  3 ++-
 .../client/src/pages/design/DesignPage.tsx    |  2 +-
 .../src/pages/plugin/PluginPageContainer.tsx  |  2 +-
 5 files changed, 9 insertions(+), 26 deletions(-)
 delete mode 100644 Composer/packages/client/src/components/MainContent.tsx

diff --git a/Composer/packages/client/src/components/MainContent.tsx b/Composer/packages/client/src/components/MainContent.tsx
deleted file mode 100644
index b0e5370a60..0000000000
--- a/Composer/packages/client/src/components/MainContent.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT License.
-
-/** @jsx jsx */
-import { jsx, css } from '@emotion/core';
-
-const contentTopMargin = 10;
-const contentBottomMargin = 0;
-
-export const contentContainer = css`
-  display: flex;
-  height: calc(100vh - ${105 + contentTopMargin + contentBottomMargin}px);
-  margin-top: ${contentTopMargin}px;
-  margin-bottom: ${contentBottomMargin}px;
-  margin-left: 20px;
-`;
-
-export const MainContent = (props: { children: Element }) => (
-  <div css={contentContainer} role="main">
-    {props.children}
-  </div>
-);
diff --git a/Composer/packages/client/src/components/MultiLanguage/AddLanguageModal.tsx b/Composer/packages/client/src/components/MultiLanguage/AddLanguageModal.tsx
index d2a4e63030..67d7c3b86c 100644
--- a/Composer/packages/client/src/components/MultiLanguage/AddLanguageModal.tsx
+++ b/Composer/packages/client/src/components/MultiLanguage/AddLanguageModal.tsx
@@ -140,6 +140,7 @@ const AddLanguageModal: React.FC<IAddLanguageModalProps> = (props) => {
   }, [currentLanguages]);
 
   const searchBoxLabelId = useId('search-box-label');
+  const searchBoxId = useId('search-box');
   const translationsLabelId = useId('translations-label');
 
   const onSearch = (_e, newValue) => {
@@ -196,8 +197,11 @@ const AddLanguageModal: React.FC<IAddLanguageModalProps> = (props) => {
                 )}
               />
             </div>
-            <Label id={searchBoxLabelId}>{MultiLanguagesDialog.ADD_DIALOG.selectionTitle}</Label>
+            <Label id={searchBoxLabelId} htmlFor={searchBoxId}>
+              {MultiLanguagesDialog.ADD_DIALOG.selectionTitle}
+            </Label>
             <SearchBox
+              id={searchBoxId}
               disableAnimation
               aria-labelledBy={searchBoxLabelId}
               placeholder={MultiLanguagesDialog.ADD_DIALOG.searchPlaceHolder}
diff --git a/Composer/packages/client/src/components/PluginHost/PluginHost.tsx b/Composer/packages/client/src/components/PluginHost/PluginHost.tsx
index c8bfca2e61..8f626d9cf7 100644
--- a/Composer/packages/client/src/components/PluginHost/PluginHost.tsx
+++ b/Composer/packages/client/src/components/PluginHost/PluginHost.tsx
@@ -40,6 +40,7 @@ interface PluginHostProps {
   pluginType: PluginType;
   bundleId: string;
   projectId: string;
+  role?: string;
 }
 
 /** Binds closures around Composer client code to plugin iframe's window object */
@@ -136,7 +137,7 @@ export const PluginHost: React.FC<PluginHostProps> = (props) => {
   }, [shell]);
 
   return (
-    <div css={containerStyles}>
+    <div css={containerStyles} role={props.role}>
       <iframe
         key={`${pluginName}.${bundleId}.${pluginType}`}
         ref={targetRef}
diff --git a/Composer/packages/client/src/pages/design/DesignPage.tsx b/Composer/packages/client/src/pages/design/DesignPage.tsx
index e41a599709..2966c06dda 100644
--- a/Composer/packages/client/src/pages/design/DesignPage.tsx
+++ b/Composer/packages/client/src/pages/design/DesignPage.tsx
@@ -55,7 +55,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
           </div>
         </div>
 
-        <div css={contentWrapper} role="main">
+        <div css={contentWrapper}>
           <CommandBar projectId={activeBot} />
           <Conversation css={splitPaneContainer}>
             <div css={splitPaneWrapper}>
diff --git a/Composer/packages/client/src/pages/plugin/PluginPageContainer.tsx b/Composer/packages/client/src/pages/plugin/PluginPageContainer.tsx
index bf47fea1d7..a5c629b7fd 100644
--- a/Composer/packages/client/src/pages/plugin/PluginPageContainer.tsx
+++ b/Composer/packages/client/src/pages/plugin/PluginPageContainer.tsx
@@ -15,7 +15,7 @@ const PluginPageContainer: React.FC<RouteComponentProps<{ pluginId: string; bund
     return null;
   }
 
-  return <PluginHost bundleId={bundleId} pluginName={pluginId} pluginType="page" projectId={projectId} />;
+  return <PluginHost bundleId={bundleId} pluginName={pluginId} pluginType="page" role="main" projectId={projectId} />;
 };
 
 export { PluginPageContainer };

From 374e5b25a05f41a91ae65f0664b5c4e2e930a4b1 Mon Sep 17 00:00:00 2001
From: Eugene Olonov <EOlonov@gmail.com>
Date: Mon, 28 Mar 2022 11:44:18 -0700
Subject: [PATCH 2/2] Fix lint issues

---
 .../client/src/components/MultiLanguage/AddLanguageModal.tsx  | 4 ++--
 .../packages/client/src/pages/plugin/PluginPageContainer.tsx  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/Composer/packages/client/src/components/MultiLanguage/AddLanguageModal.tsx b/Composer/packages/client/src/components/MultiLanguage/AddLanguageModal.tsx
index 67d7c3b86c..dc04832689 100644
--- a/Composer/packages/client/src/components/MultiLanguage/AddLanguageModal.tsx
+++ b/Composer/packages/client/src/components/MultiLanguage/AddLanguageModal.tsx
@@ -197,13 +197,13 @@ const AddLanguageModal: React.FC<IAddLanguageModalProps> = (props) => {
                 )}
               />
             </div>
-            <Label id={searchBoxLabelId} htmlFor={searchBoxId}>
+            <Label htmlFor={searchBoxId} id={searchBoxLabelId}>
               {MultiLanguagesDialog.ADD_DIALOG.selectionTitle}
             </Label>
             <SearchBox
-              id={searchBoxId}
               disableAnimation
               aria-labelledBy={searchBoxLabelId}
+              id={searchBoxId}
               placeholder={MultiLanguagesDialog.ADD_DIALOG.searchPlaceHolder}
               styles={{ root: { width: 300 } }}
               onChange={onSearch}
diff --git a/Composer/packages/client/src/pages/plugin/PluginPageContainer.tsx b/Composer/packages/client/src/pages/plugin/PluginPageContainer.tsx
index a5c629b7fd..1159393e5e 100644
--- a/Composer/packages/client/src/pages/plugin/PluginPageContainer.tsx
+++ b/Composer/packages/client/src/pages/plugin/PluginPageContainer.tsx
@@ -15,7 +15,7 @@ const PluginPageContainer: React.FC<RouteComponentProps<{ pluginId: string; bund
     return null;
   }
 
-  return <PluginHost bundleId={bundleId} pluginName={pluginId} pluginType="page" role="main" projectId={projectId} />;
+  return <PluginHost bundleId={bundleId} pluginName={pluginId} pluginType="page" projectId={projectId} role="main" />;
 };
 
 export { PluginPageContainer };