fix accessibility issue on create new bot dialog (#2683)

Co-authored-by: Corina <14900841+corinagum@users.noreply.github.com>
microsoft · Apr 17, 2020 · 60aa477 · 60aa477
1 parent 7af6272
commit 60aa477
Showing 1 changed file with 14 additions and 10 deletions.
diff --git a/Composer/packages/client/src/CreationFlow/CreateOptions/index.js b/Composer/packages/client/src/CreationFlow/CreateOptions/index.js
@@ -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;
@@ -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);
@@ -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}>
@@ -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"