a11y: accessibility issue 2019

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

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,

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

Composer/packages/client/src/pages/design/index.tsx

@@ -390,7 +390,7 @@ function DesignPage(props) {
           onDeleteDialog={handleDeleteDialog}
           onDeleteTrigger={handleDeleteTrigger}
         />
-        <div css={contentWrapper}>
+        <div role="main" css={contentWrapper}>
           {match && (
             <ToolBar
               toolbarItems={toolbarItems}

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(

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

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

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

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

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>
   );