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 (
+
+ );
};
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 (
+
+ );
},
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 (
+
+ );
},
},
];
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 (
+
+ );
},
isPadded: true,
},
@@ -67,7 +78,17 @@ const columns: IColumn[] = [
isResizable: true,
data: 'string',
onRender: (item: INotification) => {
- return {item.location};
+ return (
+
+ );
},
isPadded: true,
},
@@ -83,7 +104,17 @@ const columns: IColumn[] = [
isMultiline: true,
data: 'string',
onRender: (item: INotification) => {
- return {item.message};
+ return (
+
+ );
},
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;
+`;