diff --git a/Composer/packages/client/__tests__/components/home.test.jsx b/Composer/packages/client/__tests__/components/home.test.jsx index 3269b6b102..7666724f10 100644 --- a/Composer/packages/client/__tests__/components/home.test.jsx +++ b/Composer/packages/client/__tests__/components/home.test.jsx @@ -19,7 +19,7 @@ describe('', () => { ); expect(container).toHaveTextContent('a'); expect(container).toHaveTextContent('b'); - const link = queryByLabelText('a'); + const link = queryByLabelText('Bot name is a'); fireEvent.dblClick(link); expect(onItemChosen.mock.results[0].value).toBe('path1'); }); diff --git a/Composer/packages/client/src/CreationFlow/LocationBrowser/FileSelector.tsx b/Composer/packages/client/src/CreationFlow/LocationBrowser/FileSelector.tsx index 49d269fea8..f875863cbc 100644 --- a/Composer/packages/client/src/CreationFlow/LocationBrowser/FileSelector.tsx +++ b/Composer/packages/client/src/CreationFlow/LocationBrowser/FileSelector.tsx @@ -27,7 +27,7 @@ import { styles as wizardStyles } from '../StepWizard/styles'; import { StorageFolder, File } from '../../store/types'; import { getFileIconName, calculateTimeDiff } from '../../utils'; -import { dropdown, detailListContainer, detailListClass } from './styles'; +import { dropdown, detailListContainer, detailListClass, tableCell, content } from './styles'; interface FileSelectorProps { operationMode: { @@ -61,7 +61,13 @@ const _renderIcon = (file: File) => { const _renderNameColumn = (file: File) => { const iconName = getFileIconName(file); - return {file.name}; + return ( +
+
+ {file.name} +
+
+ ); }; export const FileSelector: React.FC = props => { @@ -107,9 +113,15 @@ export const FileSelector: React.FC = props => { data: 'number', onRender: (item: File) => { return ( - - {calculateTimeDiff(item.lastModified)} - +
+
+ {calculateTimeDiff(item.lastModified)} +
+
); }, isPadded: true, diff --git a/Composer/packages/client/src/CreationFlow/LocationBrowser/styles.ts b/Composer/packages/client/src/CreationFlow/LocationBrowser/styles.ts index c5697c0392..0ff5e350f4 100644 --- a/Composer/packages/client/src/CreationFlow/LocationBrowser/styles.ts +++ b/Composer/packages/client/src/CreationFlow/LocationBrowser/styles.ts @@ -84,3 +84,14 @@ export const detailListClass = mergeStyleSets({ maxWidth: '16px', }, }); + +export const tableCell = css` + outline: none; + :focus { + outline: rgb(102, 102, 102) solid 1px; + } +`; + +export const content = css` + outline: none; +`; diff --git a/Composer/packages/client/src/pages/home/RecentBotList.tsx b/Composer/packages/client/src/pages/home/RecentBotList.tsx index 07be0d74d8..2c630d506d 100644 --- a/Composer/packages/client/src/pages/home/RecentBotList.tsx +++ b/Composer/packages/client/src/pages/home/RecentBotList.tsx @@ -18,7 +18,7 @@ import formatMessage from 'format-message'; import { calculateTimeDiff } from '../../utils'; -import { detailListContainer } from './styles'; +import { detailListContainer, tableCell, content } from './styles'; interface RecentBotListProps { onItemChosen: (file: IObjectWithKey) => void; @@ -42,7 +42,17 @@ export function RecentBotList(props: RecentBotListProps): JSX.Element { sortDescendingAriaLabel: formatMessage('Sorted Z to A'), data: 'string', onRender: item => { - return {item.name}; + return ( +
+
+ {item.name} +
+
+ ); }, isPadded: true, }, @@ -55,7 +65,17 @@ export function RecentBotList(props: RecentBotListProps): JSX.Element { isResizable: true, data: 'number', onRender: item => { - return {calculateTimeDiff(item.dateModified)}; + return ( +
+
+ {calculateTimeDiff(item.dateModified)} +
+
+ ); }, isPadded: true, }, diff --git a/Composer/packages/client/src/pages/home/styles.ts b/Composer/packages/client/src/pages/home/styles.ts index 5ae31e5de1..fea85a0213 100644 --- a/Composer/packages/client/src/pages/home/styles.ts +++ b/Composer/packages/client/src/pages/home/styles.ts @@ -253,3 +253,15 @@ export const exampleListCellDescription = css` font-size: ${fonts.small.fontSize}; color: ${palette.neutralTertiary}; `; + +export const tableCell = css` + outline: none; + width: auto; + :focus { + outline: rgb(102, 102, 102) solid 1px; + } +`; + +export const content = css` + outline: none; +`; diff --git a/Composer/packages/client/src/pages/language-generation/table-view.tsx b/Composer/packages/client/src/pages/language-generation/table-view.tsx index 3b25736284..ea11bf3950 100644 --- a/Composer/packages/client/src/pages/language-generation/table-view.tsx +++ b/Composer/packages/client/src/pages/language-generation/table-view.tsx @@ -21,7 +21,7 @@ import { LgTemplate } from '@bfc/shared'; import { StoreContext } from '../../store'; import { increaseNameUtilNotExist } from '../../utils/lgUtil'; import { navigateTo } from '../../utils'; -import { actionButton, formCell } from '../language-understanding/styles'; +import { actionButton, formCell, content } from '../language-understanding/styles'; interface TableViewProps extends RouteComponentProps<{}> { dialogId: string; @@ -144,7 +144,9 @@ const TableView: React.FC = props => { onRender: item => { return (
- #{item.name} +
+ #{item.name} +
); }, @@ -160,7 +162,13 @@ const TableView: React.FC = props => { onRender: item => { return (
- {item.body} +
+ {item.body} +
); }, diff --git a/Composer/packages/client/src/pages/language-understanding/styles.ts b/Composer/packages/client/src/pages/language-understanding/styles.ts index 4b5ece9825..b95064c1f3 100644 --- a/Composer/packages/client/src/pages/language-understanding/styles.ts +++ b/Composer/packages/client/src/pages/language-understanding/styles.ts @@ -146,3 +146,14 @@ export const consoleStyle = css` padding: 15px; margin-bottom: 20px; `; + +export const tableCell = css` + outline: none; + :focus { + outline: rgb(102, 102, 102) solid 1px; + } +`; + +export const content = css` + outline: none; +`; diff --git a/Composer/packages/client/src/pages/language-understanding/table-view.tsx b/Composer/packages/client/src/pages/language-understanding/table-view.tsx index 97a75a436b..23b7381489 100644 --- a/Composer/packages/client/src/pages/language-understanding/table-view.tsx +++ b/Composer/packages/client/src/pages/language-understanding/table-view.tsx @@ -22,7 +22,7 @@ import { LuFile } from '@bfc/shared'; import { StoreContext } from '../../store'; import { navigateTo } from '../../utils'; -import { formCell, luPhraseCell } from './styles'; +import { formCell, luPhraseCell, tableCell, content } from './styles'; interface TableViewProps extends RouteComponentProps<{}> { dialogId: string; } @@ -117,7 +117,9 @@ const TableView: React.FC = props => { } return (
- {displayName} +
+ {displayName} +
); }, @@ -133,7 +135,13 @@ const TableView: React.FC = props => { onRender: item => { return (
- {item.phrases} +
+ {item.phrases} +
); }, @@ -150,7 +158,12 @@ const TableView: React.FC = props => { onRender: item => { const id = item.dialogId; return ( -
navigateTo(`/bot/${projectId}/dialogs/${id}`)}> +
navigateTo(`/bot/${projectId}/dialogs/${id}`)} + aria-label={formatMessage(`link to where this luis intent defined`)} + > {id}
); @@ -190,7 +203,7 @@ const TableView: React.FC = props => { items: getTemplatesMoreButtons(item, index), }} styles={{ menuIcon: { color: NeutralColors.black, fontSize: FontSizes.size16 } }} - ariaLabel={formatMessage('actions')} + ariaLabel={formatMessage('Open inline editor')} /> ); }, @@ -205,7 +218,13 @@ const TableView: React.FC = props => { isCollapsable: true, data: 'string', onRender: item => { - return item.state; + return ( +
+
+ {item.state} +
+
+ ); }, }, ]; diff --git a/Composer/packages/client/src/pages/notifications/NotificationList.tsx b/Composer/packages/client/src/pages/notifications/NotificationList.tsx index 1b747cef0e..6179b15bd5 100644 --- a/Composer/packages/client/src/pages/notifications/NotificationList.tsx +++ b/Composer/packages/client/src/pages/notifications/NotificationList.tsx @@ -15,11 +15,12 @@ import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip'; import { ScrollablePane, ScrollbarVisibility } from 'office-ui-fabric-react/lib/ScrollablePane'; import { FontIcon } from 'office-ui-fabric-react/lib/Icon'; import { useMemo, useState } from 'react'; +import formatMessage from 'format-message'; import { Pagination } from '../../components/Pagination'; import { INotification } from './types'; -import { notification, typeIcon, listRoot, icons, tableView, detailList } from './styles'; +import { notification, typeIcon, listRoot, icons, tableView, detailList, tableCell, content } from './styles'; export interface INotificationListProps { items: INotification[]; @@ -53,7 +54,17 @@ const columns: IColumn[] = [ isResizable: true, data: 'string', onRender: (item: INotification) => { - return {item.severity}; + return ( +
+
+ {item.severity} +
+
+ ); }, isPadded: true, }, @@ -67,7 +78,17 @@ const columns: IColumn[] = [ isResizable: true, data: 'string', onRender: (item: INotification) => { - return {item.location}; + return ( +
+
+ {item.location} +
+
+ ); }, isPadded: true, }, @@ -83,7 +104,17 @@ const columns: IColumn[] = [ isMultiline: true, data: 'string', onRender: (item: INotification) => { - return {item.message}; + return ( +
+
+ {item.message} +
+
+ ); }, isPadded: true, }, diff --git a/Composer/packages/client/src/pages/notifications/styles.ts b/Composer/packages/client/src/pages/notifications/styles.ts index 0f6c6dde40..b2756d08ab 100644 --- a/Composer/packages/client/src/pages/notifications/styles.ts +++ b/Composer/packages/client/src/pages/notifications/styles.ts @@ -76,3 +76,14 @@ export const tableView = css` export const detailList = css` overflow-x: hidden; `; + +export const tableCell = css` + outline: none; + :focus { + outline: rgb(102, 102, 102) solid 1px; + } +`; + +export const content = css` + outline: none; +`;