a11y: add labeled aria regions to pages

Composer/packages/client/src/components/NavTree/index.tsx

@@ -21,10 +21,11 @@ export interface INavTreeItem {
 
 interface INavTreeProps {
   navLinks: INavTreeItem[];
+  regionName: string;
 }
 
 const NavTree: React.FC<INavTreeProps> = (props) => {
-  const { navLinks } = props;
+  const { navLinks, regionName } = props;
   const {
     actions: { updateUserSettings },
     state: {
@@ -46,7 +47,7 @@ const NavTree: React.FC<INavTreeProps> = (props) => {
       size={{ width: currentWidth, height: 'auto' }}
       onResizeStop={handleResize}
     >
-      <div className="ProjectTree" css={root} data-testid="ProjectTree">
+      <div aria-label={regionName} className="ProjectTree" css={root} data-testid="ProjectTree" role="region">
         {navLinks.map((item) => {
           const isSelected = location.pathname.includes(item.url);
 

Composer/packages/client/src/components/Page/index.tsx

@@ -15,12 +15,14 @@ interface IPageProps {
   toolbarItems: any;
   navLinks: INavTreeItem[];
   title: string;
+  navRegionName: string;
+  mainRegionName: string;
   onRenderHeaderContent?: () => string | JSX.Element | null;
   'data-testid'?: string;
 }
 
 const Page: React.FC<IPageProps> = (props) => {
-  const { title, navLinks, toolbarItems, onRenderHeaderContent, children } = props;
+  const { title, navLinks, toolbarItems, onRenderHeaderContent, children, navRegionName, mainRegionName } = props;
 
   return (
     <div css={styles.root} data-testid={props['data-testid']}>
@@ -31,8 +33,8 @@ const Page: React.FC<IPageProps> = (props) => {
           {onRenderHeaderContent && <div css={styles.headerContent}>{onRenderHeaderContent()}</div>}
         </div>
         <div css={styles.main} role="main">
-          <NavTree navLinks={navLinks} />
-          <div css={styles.content} data-testid="PageContent">
+          <NavTree navLinks={navLinks} regionName={navRegionName} />
+          <div aria-label={mainRegionName} css={styles.content} data-testid="PageContent" role="region">
             {children}
           </div>
         </div>

Composer/packages/client/src/components/Pagination/index.tsx

@@ -49,7 +49,7 @@ export const Pagination: React.FC<IPaginationProps> = (props) => {
   };
 
   return (
-    <div css={container}>
+    <div aria-label={formatMessage('navigation control')} css={container} role="region">
       <DefaultButton allowDisabledFocus disabled={index === 0} text="< Previous" onClick={hanglePreviousClick} />
       <span css={text}>Page</span>
       <Dropdown

Composer/packages/client/src/components/ProjectTree/index.tsx

@@ -163,7 +163,13 @@ export const ProjectTree: React.FC<IProjectTreeProps> = (props) => {
       size={{ width: currentWidth, height: 'auto' }}
       onResizeStop={handleResize}
     >
-      <div className="ProjectTree" css={root} data-testid="ProjectTree">
+      <div
+        aria-label={formatMessage('Navigation pane')}
+        className="ProjectTree"
+        css={root}
+        data-testid="ProjectTree"
+        role="region"
+      >
         <FocusZone isCircularNavigation direction={FocusZoneDirection.vertical}>
           <SearchBox
             underlined

Composer/packages/client/src/components/ToolBar/index.jsx

@@ -58,7 +58,7 @@ export function ToolBar(props) {
   }, []);
 
   return (
-    <div css={headerSub} {...rest}>
+    <div aria-label={formatMessage('toolbar')} css={headerSub} role="region" {...rest}>
       <div css={leftActions}>
         {window.location.href.indexOf('/dialogs/') !== -1 && (
           <div ref={addNewRef}>

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

@@ -128,7 +128,7 @@ const PropertyEditor: React.FC = () => {
       size={{ width: currentWidth, height: 'auto' }}
       onResizeStop={handleResize}
     >
-      <div aria-label={formatMessage('form editor')} css={formEditor} data-testid="PropertyEditor">
+      <div aria-label={formatMessage('form editor')} css={formEditor} data-testid="PropertyEditor" role="region">
         <Extension plugins={plugins} shell={shellApi} shellData={shellData}>
           <AdaptiveForm
             errors={errors}

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

@@ -74,7 +74,7 @@ const VisualEditor: React.FC<VisualEditorProps> = (props) => {
     <React.Fragment>
       <div
         ref={addRef}
-        aria-label={formatMessage('visual editor')}
+        aria-label={formatMessage('Visual editor')}
         css={visualEditor(triggerButtonVisible || !selected)}
         data-testid="VisualEditor"
       >

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

@@ -424,7 +424,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
           />
           <Conversation css={editorContainer}>
             <div css={editorWrapper}>
-              <div css={visualPanel}>
+              <div aria-label={formatMessage('Authoring canvas')} css={visualPanel} role="region">
                 {breadcrumbItems}
                 {dialogJsonVisible ? (
                   <JsonEditor

Composer/packages/client/src/pages/home/ItemContainer.tsx

@@ -31,6 +31,7 @@ interface ItemContainerProps extends Omit<IButtonProps, 'onChange' | 'styles' |
   disabled?: boolean;
   forwardedRef?: (project: any) => void | Promise<void>;
   openExternal?: boolean;
+  ariaLabel: string;
 }
 
 export const ItemContainer: React.FC<ItemContainerProps> = ({
@@ -42,11 +43,12 @@ export const ItemContainer: React.FC<ItemContainerProps> = ({
   disabled,
   forwardedRef,
   openExternal,
+  ariaLabel,
   ...rest
 }) => {
   const onRenderChildren = () => {
     return (
-      <div ref={forwardedRef} css={childrenContainer}>
+      <div ref={forwardedRef} aria-label={ariaLabel} css={childrenContainer}>
         <div css={[itemContainer, styles.title, disabled ? disabledItem.title : undefined]}>
           <div css={itemContainerTitle}>
             <Text block variant="large">

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

@@ -33,7 +33,7 @@ const linksButtom = [
   },
 ];
 
-const turtorials = [
+const tutorials = [
   {
     title: formatMessage('5 Minute Intro'),
     content: formatMessage('Chris Whitten'),
@@ -145,14 +145,15 @@ const Home: React.FC<RouteComponentProps> = () => {
       <div css={home.page}>
         <div css={home.leftPage} role="main">
           <h1 css={home.title}>{formatMessage(`Bot Framework Composer`)}</h1>
-          <div css={home.introduction}>
+          <div aria-label={formatMessage('Composer introduction')} css={home.introduction} role="region">
             {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'}>
               <ItemContainer
+                ariaLabel={formatMessage('Create new empty bot')}
                 content={formatMessage('New')}
                 styles={home.newBotItem}
                 title={addButton}
@@ -164,6 +165,7 @@ const Home: React.FC<RouteComponentProps> = () => {
             </div>
             {recentProjects.length > 0 ? (
               <ItemContainer
+                ariaLabel={recentProjects[0].name}
                 content={recentProjects[0].name}
                 forwardedRef={addRef}
                 styles={home.latestBotItem}
@@ -174,6 +176,7 @@ const Home: React.FC<RouteComponentProps> = () => {
               />
             ) : (
               <ItemContainer
+                ariaLabel={'ToDo bot with LUIS'}
                 content={'ToDoBotWithLuis'}
                 forwardedRef={addRef}
                 styles={home.latestBotItem}
@@ -198,9 +201,10 @@ const Home: React.FC<RouteComponentProps> = () => {
           <div css={home.leftContainer}>
             <h2 css={home.subtitle}>{formatMessage('Video tutorials:')}&nbsp;</h2>
             <div css={home.newBotContainer}>
-              {turtorials.map((item, index) => (
+              {tutorials.map((item, index) => (
                 <ItemContainer
                   key={index}
+                  ariaLabel={item.title}
                   content={item.content}
                   href={item.href}
                   openExternal={isElectron()}
@@ -235,7 +239,7 @@ const Home: React.FC<RouteComponentProps> = () => {
             </div>
           </div>
         </div>
-        <div css={home.rightPage}>
+        <div aria-label={formatMessage('Example bot list')} css={home.rightPage} role="region">
           <h3 css={home.bluetitle}>{formatMessage(`Examples`)}</h3>
           <p css={home.examplesDescription}>
             {formatMessage(

Composer/packages/client/src/pages/language-generation/index.tsx

@@ -96,7 +96,9 @@ const LGPage: React.FC<LGPageProps> = (props) => {
   return (
     <Page
       data-testid="LGPage"
+      mainRegionName={formatMessage('LG editor')}
       navLinks={navLinks}
+      navRegionName={formatMessage('LG Navigation Pane')}
       title={formatMessage('Bot Responses')}
       toolbarItems={toolbarItems}
       onRenderHeaderContent={onRenderHeaderContent}

Composer/packages/client/src/pages/language-understanding/index.tsx

@@ -100,7 +100,9 @@ const LUPage: React.FC<LUPageProps> = (props) => {
   return (
     <Page
       data-testid="LUPage"
+      mainRegionName={formatMessage('LU editor')}
       navLinks={navLinks}
+      navRegionName={formatMessage('LU Navigation Pane')}
       title={formatMessage('User Input')}
       toolbarItems={toolbarItems}
       onRenderHeaderContent={onRenderHeaderContent}

Composer/packages/client/src/pages/notifications/NotificationList.tsx

@@ -143,7 +143,7 @@ export const NotificationList: React.FC<INotificationListProps> = (props) => {
 
   return (
     <div css={listRoot} data-testid="notifications-table-view" role="main">
-      <div css={tableView}>
+      <div aria-label={formatMessage('Notification list')} css={tableView} role="region">
         <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
           <DetailsList
             isHeaderVisible

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

@@ -40,7 +40,7 @@ const Publish: React.FC<PublishPageProps> = (props) => {
   const [publishDialogHidden, setPublishDialogHidden] = useState(true);
 
   // items to show in the list
-  const [thisPublishHistory, setThisPublishHistory] = useState<any[]>([]);
+  const [thisPublishHistory, setThisPublishHistory] = useState<IStatus[]>([]);
   const [groups, setGroups] = useState<any[]>([]);
   const [selectedVersion, setSelectedVersion] = useState<IStatus | null>(null);
   const [dialogProps, setDialogProps] = useState({
@@ -403,7 +403,7 @@ const Publish: React.FC<PublishPageProps> = (props) => {
         <h1 css={HeaderText}>{selectedTarget ? selectedTargetName : formatMessage('Publish Profiles')}</h1>
       </div>
       <div css={ContentStyle} data-testid="Publish" role="main">
-        <div css={projectContainer}>
+        <div aria-label={formatMessage('Navigation panel')} css={projectContainer} role="region">
           <div
             key={'_all'}
             css={selectedTargetName === 'all' ? targetSelected : overflowSet}
@@ -431,7 +431,7 @@ const Publish: React.FC<PublishPageProps> = (props) => {
             />
           )}
         </div>
-        <div css={contentEditor}>
+        <div aria-label={formatMessage('List view')} css={contentEditor} role="region">
           <Fragment>
             <PublishStatusList
               groups={groups}

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

@@ -138,7 +138,13 @@ const SettingPage: React.FC<RouteComponentProps<{ '*': string }>> = () => {
   }, [location.pathname]);
 
   return (
-    <Page navLinks={links} title={title} toolbarItems={toolbarItems}>
+    <Page
+      mainRegionName={formatMessage('Settings editor')}
+      navLinks={links}
+      navRegionName={formatMessage('Settings menu')}
+      title={title}
+      toolbarItems={toolbarItems}
+    >
       <Routes />
     </Page>
   );

Composer/packages/client/src/pages/skills/skill-list.tsx

@@ -156,7 +156,7 @@ const SkillList: React.FC<ISkillListProps> = (props) => {
 
   return (
     <React.Fragment>
-      <div css={TableView}>
+      <div aria-label={formatMessage('List view')} css={TableView} role="region">
         <ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
           <DetailsList
             isHeaderVisible