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

a11y: accessibility issue on create new bot dialog #2683

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

a11y: accessibility issue on create new bot dialog #2683

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
56a2634
fix accessibility issue on create new bot dialog
liweitian Apr 16, 2020
e4a6136
Merge branch 'master' into accessibilityCreateOptions
liweitian Apr 17, 2020
32404f1
Merge branch 'master' into accessibilityCreateOptions
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
24 changes: 14 additions & 10 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 @@ -22,8 +22,13 @@ import { Sticky, StickyPositionType } from 'office-ui-fabric-react/lib/Sticky';

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

const optionKeys = {
createFromScratch: 'createFromScratch',
createFromTemplate: 'createFromTemplate',
};

export function CreateOptions(props) {
const [option, setOption] = useState('CreateFromScratch');
const [option, setOption] = useState(optionKeys.createFromScratch);
const [disabled, setDisabled] = useState(true);
const { templates, onDismiss, onNext } = props;
const emptyBotKey = templates[1].id;
Expand All @@ -49,15 +54,15 @@ export function CreateOptions(props) {

const handleChange = (event, option) => {
setOption(option.key);
if (option.key === 'CreateFromTemplate') {
if (option.key === optionKeys.createFromTemplate) {
setDisabled(false);
} else {
setDisabled(true);
}
};

const handleJumpToNext = () => {
if (option === 'CreateFromTemplate') {
if (option === optionKeys.createFromTemplate) {
onNext(template);
} else {
onNext(emptyBotKey);
Expand Down Expand Up @@ -110,25 +115,24 @@ export function CreateOptions(props) {
<Fragment>
<ChoiceGroup
label={formatMessage('Choose how to create your bot')}
defaultSelectedKey="CreateFromScratch"
selectedKey={option}
options={[
{
ariaLabel: 'Create from scratch',
key: 'CreateFromScratch',
ariaLabel: 'Create from scratch' + (option === optionKeys.createFromScratch ? ' selected' : ''),
key: optionKeys.createFromScratch,
'data-testid': 'Create from scratch',
text: formatMessage('Create from scratch'),
onRenderField: SelectOption,
},
{
ariaLabel: 'Create from template',
key: 'CreateFromTemplate',
ariaLabel: 'Create from template' + (option === optionKeys.createFromTemplate ? ' selected' : ''),
key: optionKeys.createFromTemplate,
'data-testid': 'Create from template',
text: formatMessage('Create from template'),
onRenderField: SelectOption,
},
]}
onChange={handleChange}
required={true}
/>
<h3 css={listHeader}>{formatMessage('Examples')}</h3>
<div data-is-scrollable="true" css={detailListContainer}>
Expand All @@ -151,7 +155,7 @@ export function CreateOptions(props) {
<DialogFooter>
<DefaultButton onClick={onDismiss} text={formatMessage('Cancel')} />
<PrimaryButton
disabled={option === 'CreateFromTemplate' && (templates.length <= 0 || template === null)}
disabled={option === optionKeys.createFromTemplate && (templates.length <= 0 || template === null)}
onClick={handleJumpToNext}
text={formatMessage('Next')}
data-testid="NextStepButton"
Expand Down