Skip to content
This repository was archived by the owner on Jul 9, 2025. It is now read-only.

a11y: accessibility 2026 #2701

Merged
corinagum merged 3 commits into from
Apr 17, 2020
Merged

a11y: accessibility 2026 #2701

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
17019f3
can access the cell of detailsList
liweitian Apr 17, 2020
99154f5
remove unused import
liweitian Apr 17, 2020
2300b0a
Merge branch 'master' into detailListEnterCell
corinagum Apr 17, 2020
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
15 changes: 12 additions & 3 deletions Composer/packages/client/src/CreationFlow/CreateOptions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
} from 'office-ui-fabric-react/lib/DetailsList';
import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';

import { detailListContainer, listHeader, rowDetails, rowTitle, optionRoot, optionIcon } from './styles';
import { detailListContainer, listHeader, rowDetails, rowTitle, optionRoot, optionIcon, tableCell } from './styles';

const optionKeys = {
createFromScratch: 'createFromScratch',
Expand Down Expand Up @@ -79,7 +79,11 @@ export function CreateOptions(props) {
isResizable: !disabled,
data: 'string',
styles: rowTitle(disabled),
onRender: item => item.name,
onRender: item => (
<div css={tableCell} data-is-focusable={true}>
{item.name}
</div>
),
},
{
key: 'description',
Expand All @@ -90,7 +94,11 @@ export function CreateOptions(props) {
isResizable: !disabled,
data: 'string',
styles: rowTitle(disabled),
onRender: item => item.description,
onRender: item => (
<div css={tableCell} data-is-focusable={true}>
{item.description}
</div>
),
},
];

Expand All @@ -111,6 +119,7 @@ export function CreateOptions(props) {
}
return null;
};

return (
<Fragment>
<ChoiceGroup
Expand Down
7 changes: 7 additions & 0 deletions Composer/packages/client/src/CreationFlow/CreateOptions/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,3 +60,10 @@ export const rowTitle = disabled => {
},
};
};

export const tableCell = css`
border: 1px solid ${NeutralColors.white};
:focus {
border: 1px solid ${NeutralColors.black};
}
`;
1 change: 0 additions & 1 deletion Composer/packages/client/src/CreationFlow/LocationBrowser/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { css } from '@emotion/core';
import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
import { FontWeights } from '@uifabric/styling';
import { IDropdownStyles } from 'office-ui-fabric-react/lib/Dropdown';

export const textFieldlabel = {
root: [
{
Expand Down
14 changes: 11 additions & 3 deletions Composer/packages/client/src/pages/language-generation/table-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,11 @@ const TableView: React.FC<TableViewProps> = props => {
isResizable: true,
data: 'string',
onRender: item => {
return <div css={formCell}>#{item.name}</div>;
return (
<div data-is-focusable={true} css={formCell}>
#{item.name}
</div>
);
},
},
{
Expand All @@ -165,7 +169,11 @@ const TableView: React.FC<TableViewProps> = props => {
data: 'string',
isPadded: true,
onRender: item => {
return <div css={formCell}>{item.body}</div>;
return (
<div data-is-focusable={true} css={formCell}>
{item.body}
</div>
);
},
},
{
Expand Down Expand Up @@ -215,7 +223,7 @@ const TableView: React.FC<TableViewProps> = props => {
}}
/>
) : (
<div aria-label={formatMessage('Unused') + ';'} />
<div data-is-focusable={true} aria-label={formatMessage('Unused') + ';'} />
);
},
};
Expand Down
10 changes: 9 additions & 1 deletion Composer/packages/client/src/pages/language-understanding/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

import { css } from '@emotion/core';
import { FontWeights, FontSizes, mergeStyles } from 'office-ui-fabric-react/lib/Styling';

import { NeutralColors } from '@uifabric/fluent-theme';
export const actionButton = css`
font-size: 16px;
margin: 0;
Expand Down Expand Up @@ -67,12 +67,20 @@ export const codeEditorContainer = css`
`;

export const formCell = css`
border: 1px solid ${NeutralColors.white};
:focus {
border: 1px solid ${NeutralColors.black};
}
white-space: pre-wrap;
font-size: 14px;
line-height: 28px;
`;

export const luPhraseCell = css`
border: 1px solid ${NeutralColors.white};
:focus {
border: 1px solid ${NeutralColors.black};
}
white-space: pre-wrap;
font-size: 14px;
`;
Expand Down
14 changes: 11 additions & 3 deletions Composer/packages/client/src/pages/language-understanding/table-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,11 @@ const TableView: React.FC<TableViewProps> = props => {
const [, childName] = item.name.split('/');
displayName = `##${childName}`;
}
return <div css={formCell}>{displayName}</div>;
return (
<div data-is-focusable={true} css={formCell}>
{displayName}
</div>
);
},
},
{
Expand All @@ -127,7 +131,11 @@ const TableView: React.FC<TableViewProps> = props => {
isResizable: true,
data: 'string',
onRender: item => {
return <div css={luPhraseCell}>{item.phrases}</div>;
return (
<div data-is-focusable={true} css={luPhraseCell}>
{item.phrases}
</div>
);
},
},
{
Expand All @@ -142,7 +150,7 @@ const TableView: React.FC<TableViewProps> = props => {
onRender: item => {
const id = item.dialogId;
return (
<div key={id} onClick={() => navigateTo(`/bot/${projectId}/dialogs/${id}`)}>
<div data-is-focusable={true} key={id} onClick={() => navigateTo(`/bot/${projectId}/dialogs/${id}`)}>
<Link>{id}</Link>
</div>
);
Expand Down