a11y: ensure there is only one main landmark

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,10 +197,13 @@ const AddLanguageModal: React.FC<IAddLanguageModalProps> = (props) => {
                 )}
               />
             </div>
-            <Label id={searchBoxLabelId}>{MultiLanguagesDialog.ADD_DIALOG.selectionTitle}</Label>
+            <Label htmlFor={searchBoxId} id={searchBoxLabelId}>
+              {MultiLanguagesDialog.ADD_DIALOG.selectionTitle}
+            </Label>
             <SearchBox
               disableAnimation
               aria-labelledBy={searchBoxLabelId}
+              id={searchBoxId}
               placeholder={MultiLanguagesDialog.ADD_DIALOG.searchPlaceHolder}
               styles={{ root: { width: 300 } }}
               onChange={onSearch}

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}

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}>

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" projectId={projectId} role="main" />;
 };
 
 export { PluginPageContainer };