a11y: use formError state in "New Dialog" form

Composer/packages/client/src/pages/design/createDialogModal.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
-import React, { useState, useContext } from 'react';
+import React, { useState, useContext, FormEvent } from 'react';
 import formatMessage from 'format-message';
 import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
@@ -36,38 +36,36 @@ export const CreateDialogModal: React.FC<CreateDialogModalProps> = props => {
   const [formData, setFormData] = useState(initialFormData);
   const [formDataErrors, setFormDataErrors] = useState<{ name?: string }>({});
 
-  const updateForm = field => (e, newValue) => {
-    setFormData({
+  const updateForm = (field: string) => (e: FormEvent, newValue: string | undefined) => {
+    const newData: DialogFormData = {
       ...formData,
       [field]: newValue,
-    });
+    };
+    validateForm(newData);
+    setFormData(newData);
   };
 
   const nameRegex = /^[a-zA-Z0-9-_.]+$/;
-  const validateForm = (data: DialogFormData) => {
+  const validateForm = (newData: DialogFormData) => {
     const errors: { name?: string } = {};
-    const { name } = data;
+    const { name } = newData;
 
     if (name) {
       if (!nameRegex.test(name)) {
-        errors.name = formatMessage(
-          'Spaces and special characters are not allowed. Use letters, numbers, -, or _., numbers, -, and _'
-        );
+        errors.name = formatMessage('Spaces and special characters are not allowed. Use letters, numbers, -, or _.');
       }
       if (dialogs.some(dialog => dialog.id === name)) {
-        errors.name = formatMessage('Duplicaton of dialog name');
+        errors.name = formatMessage('Duplicate dialog name');
       }
     } else {
       errors.name = formatMessage('Please input a name');
     }
-    return errors;
+    setFormDataErrors(errors);
   };
 
   const handleSubmit = e => {
     e.preventDefault();
-    const errors = validateForm(formData);
-    if (Object.keys(errors).length) {
-      setFormDataErrors(errors);
+    if (Object.keys(formDataErrors).length > 0) {
       return;
     }
 
@@ -90,6 +88,7 @@ export const CreateDialogModal: React.FC<CreateDialogModalProps> = props => {
               errorMessage={formDataErrors.name}
               data-testid="NewDialogName"
               required
+              autoFocus
             />
           </StackItem>
           <StackItem grow={0} styles={wizardStyles.halfstack}>