diff --git a/Composer/packages/client/__tests__/components/home.test.js b/Composer/packages/client/__tests__/components/home.test.js index e23251907e..8507367b66 100644 --- a/Composer/packages/client/__tests__/components/home.test.js +++ b/Composer/packages/client/__tests__/components/home.test.js @@ -13,15 +13,15 @@ describe('', () => { { dataModified: 'Thu Nov 28 2019 17:22:19 GMT+0800 (GMT+08:00)', name: 'a', path: 'path1', storageId: 'default' }, { dataModified: 'Thu Nov 28 2019 17:22:19 GMT+0800 (GMT+08:00)', name: 'b', path: 'path2', storageId: 'default' }, ]; - const onSelectionChanged = jest.fn(item => item.path); + const onItemChosen = jest.fn(item => item.path); const { container, queryByLabelText } = render( - + ); expect(container).toHaveTextContent('a'); expect(container).toHaveTextContent('b'); const link = queryByLabelText('a'); - fireEvent.click(link); - expect(onSelectionChanged.mock.results[0].value).toBe('path1'); + fireEvent.dblClick(link); + expect(onItemChosen.mock.results[0].value).toBe('path1'); }); it('should dispatch onClick event when clicked on an ExampleList', () => { diff --git a/Composer/packages/client/src/pages/home/ExampleList.tsx b/Composer/packages/client/src/pages/home/ExampleList.tsx index a47af5e5c3..f8d18615ba 100644 --- a/Composer/packages/client/src/pages/home/ExampleList.tsx +++ b/Composer/packages/client/src/pages/home/ExampleList.tsx @@ -41,7 +41,19 @@ export const ExampleList: React.FC = props => { } return ( -
onClick(item.id)}> +
onClick(item.id)} + onKeyDown={ev => { + if (ev.key === 'Enter') { + onClick(item.id); + } + }} + tabIndex={0} + aria-label={item.name + '; ' + item.description} + >
{item.name}
diff --git a/Composer/packages/client/src/pages/home/ItemContainer.tsx b/Composer/packages/client/src/pages/home/ItemContainer.tsx index 4d4b6536ca..e5910b7244 100644 --- a/Composer/packages/client/src/pages/home/ItemContainer.tsx +++ b/Composer/packages/client/src/pages/home/ItemContainer.tsx @@ -39,6 +39,7 @@ export const ItemContainer: React.FC = ({ } }} ref={forwardedRef} + tabIndex={0} {...rest} >
diff --git a/Composer/packages/client/src/pages/home/RecentBotList.tsx b/Composer/packages/client/src/pages/home/RecentBotList.tsx index a9d391c232..07be0d74d8 100644 --- a/Composer/packages/client/src/pages/home/RecentBotList.tsx +++ b/Composer/packages/client/src/pages/home/RecentBotList.tsx @@ -4,7 +4,6 @@ /* eslint-disable react/display-name */ /** @jsx jsx */ import { jsx } from '@emotion/core'; -import { Selection } from 'office-ui-fabric-react/lib/DetailsList'; import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip'; import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky'; import { ScrollablePane, ScrollbarVisibility } from 'office-ui-fabric-react/lib/ScrollablePane'; @@ -22,11 +21,11 @@ import { calculateTimeDiff } from '../../utils'; import { detailListContainer } from './styles'; interface RecentBotListProps { - onSelectionChanged: (file: IObjectWithKey) => void; + onItemChosen: (file: IObjectWithKey) => void; recentProjects: any; } export function RecentBotList(props: RecentBotListProps): JSX.Element { - const { onSelectionChanged, recentProjects } = props; + const { onItemChosen, recentProjects } = props; // for detail file list in open panel const tableColums = [ { @@ -73,15 +72,6 @@ export function RecentBotList(props: RecentBotListProps): JSX.Element { ); } - const selection = new Selection({ - onSelectionChanged: () => { - const file = selection.getSelection()[0]; - // selected item will be cleaned when folder path changed file will be undefine - // when no item selected. - onSelectionChanged(file); - }, - }); - return (
@@ -93,7 +83,7 @@ export function RecentBotList(props: RecentBotListProps): JSX.Element { layoutMode={DetailsListLayoutMode.justified} onRenderDetailsHeader={onRenderDetailsHeader} isHeaderVisible={true} - selection={selection} + onItemInvoked={onItemChosen} selectionMode={SelectionMode.single} checkboxVisibility={CheckboxVisibility.hidden} /> diff --git a/Composer/packages/client/src/pages/home/index.tsx b/Composer/packages/client/src/pages/home/index.tsx index c2808f3c8a..a6fac66ea5 100644 --- a/Composer/packages/client/src/pages/home/index.tsx +++ b/Composer/packages/client/src/pages/home/index.tsx @@ -64,7 +64,7 @@ const Home: React.FC = () => { await openBotProject(path); }; - const onSelectionChanged = async item => { + const onItemChosen = async item => { if (item && item.path) { await onClickRecentBotProject(item.path); } @@ -174,8 +174,8 @@ const Home: React.FC = () => {

{formatMessage(`Recent Bots`)}

{ - await onSelectionChanged(item); + onItemChosen={async item => { + await onItemChosen(item); }} />
@@ -183,8 +183,10 @@ const Home: React.FC = () => {

{formatMessage('Video tutorials:')}  - - {comingSoonLink.text} + + + {comingSoonLink.text} +

diff --git a/Composer/packages/server/src/models/asset/assetManager.ts b/Composer/packages/server/src/models/asset/assetManager.ts index 527b56a6d7..9d96d47acc 100644 --- a/Composer/packages/server/src/models/asset/assetManager.ts +++ b/Composer/packages/server/src/models/asset/assetManager.ts @@ -35,12 +35,12 @@ const templates: TemplateData = { }, TodoSample: { name: 'Simple Todo', - description: 'A sample bot that allows you add, list, remove to do items.', + description: 'A sample bot that allows you to add, list, and remove to do items.', order: 3, }, ToDoBotWithLuisSample: { name: 'Todo with LUIS', - description: 'A sample bot that allows you add, list, remove to do items and uses language Understanding', + description: 'A sample bot that allows you to add, list, and remove to do items using Language Understanding', order: 4, }, RespondingWithCardsSample: { @@ -49,11 +49,12 @@ const templates: TemplateData = { }, AskingQuestionsSample: { name: 'Asking Questions', - description: 'A sample bot that shows how to ask question and capture user input.', + description: 'A sample bot that shows how to ask questions and capture user input.', }, InterruptionSample: { name: 'Interruptions', - description: 'An advance sample bot that shows how to handle context switching and interruption in a conversation.', + description: + 'An advanced sample bot that shows how to handle context switching and interruption in a conversation.', }, RespondingWithTextSample: { name: 'Responding with Text', @@ -65,7 +66,7 @@ const templates: TemplateData = { }, ActionsSample: { name: 'Dialog Actions', - description: 'A sample bot that shows how to use Dialog actions.', + description: 'A sample bot that shows how to use Dialog Actions.', }, QnAMakerLUISSample: { name: 'QnA Maker and LUIS',