From 73ef26be2a5f823855435f9daa343b64936b9e60 Mon Sep 17 00:00:00 2001
From: Andy Brown <asbrown002@gmail.com>
Date: Fri, 8 May 2020 10:48:24 -0700
Subject: [PATCH] Revert "a11y: add ARIA landmarks for navigation regions
 (#2929)"

This reverts commit e646d6f66dd11d261b3bfdd1bdb00965e2aec157.
---
 .../client/src/pages/design/index.tsx         |  58 ++++------
 .../packages/client/src/pages/home/index.tsx  | 103 ++++++++----------
 .../src/pages/language-generation/index.tsx   |  10 +-
 .../pages/language-understanding/index.tsx    |  10 +-
 .../pages/notifications/NotificationList.tsx  |   6 +-
 .../client/src/pages/publish/index.tsx        |  10 +-
 .../client/src/pages/setting/index.tsx        |  14 +--
 .../client/src/pages/skills/index.tsx         |  10 +-
 8 files changed, 89 insertions(+), 132 deletions(-)

diff --git a/Composer/packages/client/src/pages/design/index.tsx b/Composer/packages/client/src/pages/design/index.tsx
index b342bc9346..c505edc6d1 100644
--- a/Composer/packages/client/src/pages/design/index.tsx
+++ b/Composer/packages/client/src/pages/design/index.tsx
@@ -300,11 +300,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
           }, [] as IBreadcrumbItem[])
         : [];
     return (
-      <div
-        role="region"
-        aria-label={formatMessage('Breadcrumb')}
-        style={{ display: 'flex', justifyContent: 'space-between', height: '65px' }}
-      >
+      <div style={{ display: 'flex', justifyContent: 'space-between', height: '65px' }}>
         <Breadcrumb
           items={items}
           ariaLabel={formatMessage('Navigation Path')}
@@ -399,38 +395,28 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
   return (
     <React.Fragment>
       <div css={pageRoot}>
-        <div role="region" aria-label={formatMessage('Navigation pane')}>
-          <ProjectTree
-            dialogs={dialogs}
-            dialogId={dialogId}
-            selected={selected}
-            onSelect={handleSelect}
-            onDeleteDialog={handleDeleteDialog}
-            onDeleteTrigger={handleDeleteTrigger}
-          />
-        </div>
+        <ProjectTree
+          dialogs={dialogs}
+          dialogId={dialogId}
+          selected={selected}
+          onSelect={handleSelect}
+          onDeleteDialog={handleDeleteDialog}
+          onDeleteTrigger={handleDeleteTrigger}
+        />
         <div role="main" css={contentWrapper}>
-          <div role="region" aria-label={formatMessage('toolbar')}>
-            <ToolBar
-              toolbarItems={toolbarItems}
-              actions={actions}
-              projectId={projectId}
-              currentDialog={currentDialog}
-              openNewTriggerModal={openNewTriggerModal}
-              onCreateDialogComplete={onCreateDialogComplete}
-              onboardingAddCoachMarkRef={onboardingAddCoachMarkRef}
-              showSkillManifestModal={() => setExportSkillModalVisible(true)}
-            />
-          </div>
+          <ToolBar
+            toolbarItems={toolbarItems}
+            actions={actions}
+            projectId={projectId}
+            currentDialog={currentDialog}
+            openNewTriggerModal={openNewTriggerModal}
+            onCreateDialogComplete={onCreateDialogComplete}
+            onboardingAddCoachMarkRef={onboardingAddCoachMarkRef}
+            showSkillManifestModal={() => setExportSkillModalVisible(true)}
+          />
           <Conversation css={editorContainer}>
             <div css={editorWrapper}>
-              <div
-                css={visualPanel}
-                ref={visualPanelRef}
-                tabIndex={0}
-                role="region"
-                aria-label={formatMessage('Authoring canvas')}
-              >
+              <div css={visualPanel} ref={visualPanelRef} tabIndex={0}>
                 {breadcrumbItems}
                 {dialogJsonVisible ? (
                   <JsonEditor
@@ -446,9 +432,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
                   <VisualEditor openNewTriggerModal={openNewTriggerModal} />
                 )}
               </div>
-              <div role="region" aria-label={formatMessage('Properties panel')}>
-                <PropertyEditor key={focusPath} />
-              </div>
+              <PropertyEditor key={focusPath} />
             </div>
           </Conversation>
         </div>
diff --git a/Composer/packages/client/src/pages/home/index.tsx b/Composer/packages/client/src/pages/home/index.tsx
index 224a5b81dd..763c6d8cfd 100644
--- a/Composer/packages/client/src/pages/home/index.tsx
+++ b/Composer/packages/client/src/pages/home/index.tsx
@@ -18,7 +18,6 @@ import * as home from './styles';
 import { ItemContainer } from './ItemContainer';
 import { RecentBotList } from './RecentBotList';
 import { ExampleList } from './ExampleList';
-
 const linksButtom = [
   {
     to: 'https://aka.ms/BF-Composer-Getting-Started',
@@ -38,7 +37,7 @@ const comingSoonLink = {
   css: home.bluetitle,
 };
 
-const tutorials = [
+const turtorials = [
   {
     title: formatMessage('Tutorial #1'),
     content: formatMessage('Coming soon...'),
@@ -136,19 +135,17 @@ const Home: React.FC<RouteComponentProps> = () => {
 
   return (
     <div css={home.outline}>
-      <div role="region" aria-label={formatMessage('toolbar')}>
-        <ToolBar toolbarItems={toolbarItems} onboardingAddCoachMarkRef={onboardingAddCoachMarkRef} />
-      </div>
-      <div css={home.page} role="region" aria-label={formatMessage('Composer home page')}>
+      <ToolBar toolbarItems={toolbarItems} onboardingAddCoachMarkRef={onboardingAddCoachMarkRef} />
+      <div css={home.page}>
         <div role="main" css={home.leftPage}>
           <h1 css={home.title}>{formatMessage(`Bot Framework Composer`)}</h1>
-          <div css={home.introduction} role="region" aria-label={formatMessage('Composer introduction')}>
+          <div css={home.introduction}>
             {formatMessage(
               'Bot Framework Composer is an integrated development environment (IDE) for building bots and other types of conversational software with the Microsoft Bot Framework technology stack'
             )}
           </div>
           <div css={home.newBotContainer}>
-            <div data-testid={'homePage-body-New'} role="button" aria-label={formatMessage('Create new empty bot')}>
+            <div data-testid={'homePage-body-New'}>
               <ItemContainer
                 title={addButton}
                 content={formatMessage('New')}
@@ -160,33 +157,29 @@ const Home: React.FC<RouteComponentProps> = () => {
               />
             </div>
             {recentProjects.length > 0 ? (
-              <div role="button" aria-label={formatMessage('Open last bot project')}>
-                <ItemContainer
-                  title={''}
-                  content={recentProjects[0].name}
-                  styles={home.lastestBotItem}
-                  onClick={async () => {
-                    await onClickRecentBotProject(recentProjects[0].path);
-                  }}
-                  forwardedRef={addRef}
-                />
-              </div>
+              <ItemContainer
+                title={''}
+                content={recentProjects[0].name}
+                styles={home.lastestBotItem}
+                onClick={async () => {
+                  await onClickRecentBotProject(recentProjects[0].path);
+                }}
+                forwardedRef={addRef}
+              />
             ) : (
-              <div role="button" aria-label={formatMessage('Open the ToDo Bot with LUIS sample')}>
-                <ItemContainer
-                  title={''}
-                  content={'ToDoBotWithLuis'}
-                  styles={home.lastestBotItem}
-                  onClick={() => {
-                    onClickTemplate('ToDoBotWithLuisSample');
-                  }}
-                  forwardedRef={addRef}
-                />
-              </div>
+              <ItemContainer
+                title={''}
+                content={'ToDoBotWithLuis'}
+                styles={home.lastestBotItem}
+                onClick={() => {
+                  onClickTemplate('ToDoBotWithLuisSample');
+                }}
+                forwardedRef={addRef}
+              />
             )}
           </div>
           {recentProjects.length > 0 && (
-            <div css={home.leftContainer} role="region" aria-label={formatMessage('List of Recent Projects')}>
+            <div css={home.leftContainer}>
               <h2 css={home.subtitle}>{formatMessage(`Recent Bots`)}</h2>
               <RecentBotList
                 recentProjects={recentProjects}
@@ -196,7 +189,7 @@ const Home: React.FC<RouteComponentProps> = () => {
               />
             </div>
           )}
-          <div css={home.leftContainer} role="region" aria-label={formatMessage('Link to Tutorials')}>
+          <div css={home.leftContainer}>
             <h2 css={home.subtitle}>
               {formatMessage('Video tutorials:')}&nbsp;
               <Link href={comingSoonLink.to} key={comingSoonLink.text} target={'_blank'}>
@@ -206,34 +199,34 @@ const Home: React.FC<RouteComponentProps> = () => {
               </Link>
             </h2>
             <div css={home.newBotContainer}>
-              {tutorials.map((item, index) => (
+              {turtorials.map((item, index) => (
                 <ItemContainer key={index} title={item.title} content={item.content} disabled />
               ))}
-            </div>
-          </div>
-          <div css={home.leftContainer} role="region" aria-label={formatMessage('Link to Documentation')}>
-            <div css={home.linkContainer}>
-              {formatMessage(
-                'Bot Framework provides the most comprehensive experience for building conversation applications.'
-              )}
-              {linksButtom.map(link => {
-                return (
-                  <Link
-                    style={{ width: '150px' }}
-                    href={link.to}
-                    tabIndex={0}
-                    key={'homePageLeftLinks-' + link.text}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <div css={link.css}>{link.text}</div>
-                  </Link>
-                );
-              })}
+              <div css={home.linkContainer}>
+                <div>
+                  {formatMessage(
+                    'Bot Framework provides the most comprehensive experience for building conversation applications.'
+                  )}
+                </div>
+                {linksButtom.map(link => {
+                  return (
+                    <Link
+                      style={{ width: '150px' }}
+                      href={link.to}
+                      tabIndex={0}
+                      key={'homePageLeftLinks-' + link.text}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <div css={link.css}>{link.text}</div>
+                    </Link>
+                  );
+                })}
+              </div>
             </div>
           </div>
         </div>
-        <div css={home.rightPage} role="region" aria-label={formatMessage('Example bot list')}>
+        <div css={home.rightPage}>
           <h3 css={home.bluetitle}>{formatMessage(`Examples`)}</h3>
           <p css={home.examplesDescription}>
             {formatMessage(
diff --git a/Composer/packages/client/src/pages/language-generation/index.tsx b/Composer/packages/client/src/pages/language-generation/index.tsx
index 92d40c2d24..34fda0a282 100644
--- a/Composer/packages/client/src/pages/language-generation/index.tsx
+++ b/Composer/packages/client/src/pages/language-generation/index.tsx
@@ -101,9 +101,7 @@ const LGPage: React.FC<LGPageProps> = props => {
     <Fragment>
       <div css={pageRoot} data-testid="LGPage">
         <div css={contentWrapper}>
-          <div role="region" aria-label={formatMessage('toolbar')}>
-            <ToolBar toolbarItems={toolbarItems} />
-          </div>
+          <ToolBar toolbarItems={toolbarItems} />
 
           <div css={ContentHeaderStyle}>
             <h1 css={HeaderText}>{formatMessage('Bot Responses')}</h1>
@@ -120,10 +118,8 @@ const LGPage: React.FC<LGPageProps> = props => {
             </div>
           </div>
           <div role="main" css={ContentStyle}>
-            <div role="region" aria-label={formatMessage('LG navigation pane')}>
-              <DialogTree navLinks={navLinks} onSelect={onSelect} dialogId={dialogId} />
-            </div>
-            <div css={contentEditor} data-testid="LGEditor" role="region" aria-label={formatMessage('LG editor')}>
+            <DialogTree navLinks={navLinks} onSelect={onSelect} dialogId={dialogId} />
+            <div css={contentEditor} data-testid="LGEditor">
               <Suspense fallback={<LoadingSpinner />}>
                 <Router primary={false} component={Fragment}>
                   <CodeEditor path="/edit/*" dialogId={dialogId} />
diff --git a/Composer/packages/client/src/pages/language-understanding/index.tsx b/Composer/packages/client/src/pages/language-understanding/index.tsx
index f595795eee..652899e5be 100644
--- a/Composer/packages/client/src/pages/language-understanding/index.tsx
+++ b/Composer/packages/client/src/pages/language-understanding/index.tsx
@@ -101,9 +101,7 @@ const LUPage: React.FC<LUPageProps> = props => {
   return (
     <div css={pageRoot} data-testid="LUPage">
       <div css={contentWrapper}>
-        <div role="region" aria-label={formatMessage('toolbar')}>
-          <ToolBar toolbarItems={toolbarItems} />
-        </div>
+        <ToolBar toolbarItems={toolbarItems} />
         <div css={ContentHeaderStyle}>
           <h1 css={HeaderText}>{formatMessage('User Input')}</h1>
           <div css={flexContent}>
@@ -121,10 +119,8 @@ const LUPage: React.FC<LUPageProps> = props => {
           </div>
         </div>
         <div role="main" css={ContentStyle}>
-          <div role="region" aria-label={formatMessage('LU Navigation pane')}>
-            <DialogTree navLinks={navLinks} onSelect={onSelect} dialogId={dialogId} />
-          </div>
-          <div css={contentEditor} data-testid="LUEditor" role="region" aria-label={formatMessage('LU editor')}>
+          <DialogTree navLinks={navLinks} onSelect={onSelect} dialogId={dialogId} />
+          <div css={contentEditor} data-testid="LUEditor">
             <Suspense fallback={<LoadingSpinner />}>
               <Router primary={false} component={Fragment}>
                 <CodeEditor path="/edit" dialogId={dialogId} />
diff --git a/Composer/packages/client/src/pages/notifications/NotificationList.tsx b/Composer/packages/client/src/pages/notifications/NotificationList.tsx
index 8941643c35..6179b15bd5 100644
--- a/Composer/packages/client/src/pages/notifications/NotificationList.tsx
+++ b/Composer/packages/client/src/pages/notifications/NotificationList.tsx
@@ -143,7 +143,7 @@ export const NotificationList: React.FC<INotificationListProps> = props => {
 
   return (
     <div role="main" css={listRoot} data-testid="notifications-table-view">
-      <div css={tableView} role="region" aria-label={formatMessage('Notification list')}>
+      <div css={tableView}>
         <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
           <DetailsList
             css={detailList}
@@ -159,9 +159,7 @@ export const NotificationList: React.FC<INotificationListProps> = props => {
           />
         </ScrollablePane>
       </div>
-      <div role="region" aria-label={formatMessage('Navigation control')}>
-        <Pagination pageCount={pageCount} onChange={setPageIndex} />
-      </div>
+      <Pagination pageCount={pageCount} onChange={setPageIndex} />
     </div>
   );
 };
diff --git a/Composer/packages/client/src/pages/publish/index.tsx b/Composer/packages/client/src/pages/publish/index.tsx
index a47f2317ee..9ab9bfdced 100644
--- a/Composer/packages/client/src/pages/publish/index.tsx
+++ b/Composer/packages/client/src/pages/publish/index.tsx
@@ -398,14 +398,12 @@ const Publish: React.FC<PublishPageProps> = props => {
         <PublishDialog onDismiss={() => setPublishDialogHidden(true)} onSubmit={publish} target={selectedTarget} />
       )}
       {showLog && <LogDialog version={selectedVersion} onDismiss={() => setShowLog(false)} />}
-      <div role="region" aria-label={formatMessage('toolbar')}>
-        <ToolBar toolbarItems={toolbarItems} />
-      </div>
+      <ToolBar toolbarItems={toolbarItems} />
       <div css={ContentHeaderStyle}>
         <h1 css={HeaderText}>{selectedTarget ? selectedTargetName : formatMessage('Publish Profiles')}</h1>
       </div>
       <div role="main" css={ContentStyle} data-testid="Publish">
-        <div css={projectContainer} role="region" aria-label={formatMessage('Profile list')}>
+        <div css={projectContainer}>
           <div
             key={'_all'}
             onClick={() => {
@@ -420,7 +418,7 @@ const Publish: React.FC<PublishPageProps> = props => {
           >
             {formatMessage('All profiles')}
           </div>
-          {settings?.publishTargets && (
+          {settings && settings.publishTargets && (
             <TargetList
               list={settings.publishTargets}
               onSelect={item => {
@@ -433,7 +431,7 @@ const Publish: React.FC<PublishPageProps> = props => {
             />
           )}
         </div>
-        <div css={contentEditor} role="region" aria-label={formatMessage('Publish History')}>
+        <div css={contentEditor}>
           <Fragment>
             <PublishStatusList
               items={thisPublishHistory}
diff --git a/Composer/packages/client/src/pages/setting/index.tsx b/Composer/packages/client/src/pages/setting/index.tsx
index 971cd15b27..36fd791ee2 100644
--- a/Composer/packages/client/src/pages/setting/index.tsx
+++ b/Composer/packages/client/src/pages/setting/index.tsx
@@ -58,12 +58,10 @@ const SettingPage: React.FC<RouteComponentProps<{ '*': string }>> = props => {
 
   return (
     <Fragment>
-      <div role="region" aria-label={formatMessage('toolbar')}>
-        <ToolBar toolbarItems={toolbarItems} />
-      </div>
+      <ToolBar toolbarItems={toolbarItems} />
       <MainContent>
         <Fragment>
-          <div css={fileList} role="region" aria-label={formatMessage('Settings menu')}>
+          <div css={fileList}>
             <Tree variant="large">
               <Nav
                 initialSelectedKey={props['*'] || 'dialog-settings'}
@@ -80,11 +78,9 @@ const SettingPage: React.FC<RouteComponentProps<{ '*': string }>> = props => {
               />
             </Tree>
           </div>
-          <div role="region" aria-label={formatMessage('Settings panel')}>
-            <Conversation css={contentEditor}>
-              <Routes />
-            </Conversation>
-          </div>
+          <Conversation css={contentEditor}>
+            <Routes />
+          </Conversation>
         </Fragment>
       </MainContent>
     </Fragment>
diff --git a/Composer/packages/client/src/pages/skills/index.tsx b/Composer/packages/client/src/pages/skills/index.tsx
index c65f9dd557..913934d40a 100644
--- a/Composer/packages/client/src/pages/skills/index.tsx
+++ b/Composer/packages/client/src/pages/skills/index.tsx
@@ -62,13 +62,11 @@ const Skills: React.FC<RouteComponentProps> = () => {
 
   return (
     <div data-testid="skills-page" css={ContainerStyle}>
-      <div role="region" aria-label={formatMessage('toolbar')}>
-        <ToolBar toolbarItems={toolbarItems} />
-      </div>
+      <ToolBar toolbarItems={toolbarItems} />
       <div css={ContentHeaderStyle}>
         <h1 css={HeaderText}>{formatMessage('Skills')}</h1>
       </div>
-      <div role="main" aria-label={formatMessage('Skill settings')}>
+      <div role="main">
         <SkillSettings
           projectId={projectId}
           botName={botName}
@@ -78,9 +76,7 @@ const Skills: React.FC<RouteComponentProps> = () => {
           skillHostEndpoint={settings.skillHostEndpoint as string | undefined}
         />
       </div>
-      <div role="region" aria-label={formatMessage('Skill list')}>
-        <SkillList skills={skills} projectId={projectId} onEdit={idx => setEditIndex(idx)} />
-      </div>
+      <SkillList skills={skills} projectId={projectId} onEdit={idx => setEditIndex(idx)} />
       <SkillForm
         isOpen={typeof editIndex === 'number'}
         skills={skills}