Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: revert aria regions change to fix layout issues #2957

Merged
merged 1 commit into from
May 8, 2020
Merged

fix: revert aria regions change to fix layout issues #2957

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 21 additions & 37 deletions Composer/packages/client/src/pages/design/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')}
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand Down
103 changes: 48 additions & 55 deletions Composer/packages/client/src/pages/home/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -38,7 +37,7 @@ const comingSoonLink = {
css: home.bluetitle,
};

const tutorials = [
const turtorials = [
{
title: formatMessage('Tutorial #1'),
content: formatMessage('Coming soon...'),
Expand Down Expand Up @@ -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')}
Expand All @@ -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}
Expand All @@ -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'}>
Expand All @@ -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(
Expand Down
10 changes: 3 additions & 7 deletions Composer/packages/client/src/pages/language-generation/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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} />
Expand Down
10 changes: 3 additions & 7 deletions Composer/packages/client/src/pages/language-understanding/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand All @@ -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} />
Expand Down
6 changes: 2 additions & 4 deletions Composer/packages/client/src/pages/notifications/NotificationList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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>
);
};
10 changes: 4 additions & 6 deletions Composer/packages/client/src/pages/publish/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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={() => {
Expand All @@ -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 => {
Expand All @@ -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}
Expand Down
14 changes: 5 additions & 9 deletions Composer/packages/client/src/pages/setting/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'}
Expand All @@ -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>
Expand Down
Loading