a11y: add announcements to adaptive-form

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

@@ -3,25 +3,39 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React from 'react';
+import React, { useContext, useRef } from 'react';
 import AdaptiveForm from '@bfc/adaptive-form';
 import Extension from '@bfc/extension';
 import formatMessage from 'format-message';
 import { Resizable, ResizeCallback } from 're-resizable';
+import debounce from 'lodash/debounce';
+import { Async } from 'office-ui-fabric-react/lib/Utilities';
 
 import { useShell } from '../../shell';
 import plugins from '../../plugins';
+import { StoreContext } from '../../store';
 
 import { formEditor } from './styles';
 
 const PropertyEditor: React.FC = () => {
   const { api: shellApi, data: shellData } = useShell('PropertyEditor');
+  const { actions } = useContext(StoreContext);
   const currentWidth = shellData?.userSettings?.propertyEditorWidth || 400;
+  const _async = new Async();
 
   const handleResize: ResizeCallback = (_e, _dir, _ref, d) => {
     shellApi.updateUserSettings({ propertyEditorWidth: currentWidth + d.width });
   };
 
+  const setMessage = useRef(debounce(actions.setMessage, 500)).current;
+
+  const announce = (message: string) => {
+    setMessage(message);
+    _async.setTimeout(() => {
+      setMessage(undefined);
+    }, 2000);
+  };
+
   return (
     <Resizable
       size={{ width: currentWidth, height: 'auto' }}
@@ -39,7 +53,7 @@ const PropertyEditor: React.FC = () => {
         key={shellData.focusPath}
       >
         <Extension shell={shellApi} shellData={shellData} plugins={plugins}>
-          <AdaptiveForm formData={shellData.data} schema={shellData.schemas?.sdk?.content} />
+          <AdaptiveForm formData={shellData.data} schema={shellData.schemas?.sdk?.content} announce={announce} />
         </Extension>
       </div>
     </Resizable>

Composer/packages/extensions/adaptive-form/src/components/AdaptiveForm/index.tsx

@@ -17,11 +17,12 @@ export interface AdaptiveFormProps {
   schema?: JSONSchema7;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   formData?: any;
+  announce?: (message: string) => void;
 }
 
 export const AdaptiveForm: React.FC<AdaptiveFormProps> = function AdaptiveForm(props) {
   const { shellApi, focusedSteps, currentDialog, focusPath, plugins } = useShellApi();
-  const { formData, schema } = props;
+  const { formData, schema, announce } = props;
   const [localData, setLocalData] = useState(formData);
 
   const syncData = useRef(
@@ -123,6 +124,7 @@ export const AdaptiveForm: React.FC<AdaptiveFormProps> = function AdaptiveForm(p
           uiOptions={$uiSchema}
           value={localData}
           onChange={handleDataChange}
+          announce={announce}
         />
       </PluginContext.Provider>
     </ErrorBoundary>

Composer/packages/extensions/adaptive-form/src/components/FormRow.tsx

@@ -55,6 +55,7 @@ const FormRow: React.FC<FormRowProps> = props => {
     onBlur,
     onFocus,
     onChange,
+    announce,
   } = props;
 
   const { required = [] } = schema;
@@ -81,6 +82,7 @@ const FormRow: React.FC<FormRowProps> = props => {
             onBlur={onBlur}
             onChange={onChange(property)}
             onFocus={onFocus}
+            announce={announce}
           />
         ))}
       </div>
@@ -108,6 +110,7 @@ const FormRow: React.FC<FormRowProps> = props => {
         onBlur={onBlur}
         onChange={onChange(row)}
         onFocus={onFocus}
+        announce={announce}
       />
     );
   }

Composer/packages/extensions/adaptive-form/src/components/SchemaField.tsx

@@ -31,6 +31,7 @@ const SchemaField: React.FC<FieldProps> = props => {
     rawErrors,
     hideError,
     onChange,
+    announce,
     ...rest
   } = props;
   const pluginConfig = usePluginConfig();
@@ -78,6 +79,7 @@ const SchemaField: React.FC<FieldProps> = props => {
     error: error || undefined,
     rawErrors: typeof rawErrors?.[name] === 'object' ? rawErrors?.[name] : rawErrors,
     onChange: handleChange,
+    announce,
   };
 
   return (

Composer/packages/extensions/adaptive-form/src/components/fields/ArrayFieldItem.tsx

@@ -38,6 +38,7 @@ const ArrayFieldItem: React.FC<ArrayFieldItemProps> = props => {
     uiOptions,
     value,
     className,
+    announce,
     ...rest
   } = props;
 
@@ -93,6 +94,7 @@ const ArrayFieldItem: React.FC<ArrayFieldItemProps> = props => {
           uiOptions={uiOptions}
           value={value}
           onBlur={handleBlur}
+          announce={announce}
         />
       </div>
       <IconButton

Composer/packages/extensions/adaptive-form/src/components/fields/ObjectArrayField.tsx

@@ -31,8 +31,13 @@ const getNewPlaceholder = (props: FieldProps<any[]>, propertyName: string): stri
   return formatMessage('Add new {propertyName}', { propertyName });
 };
 
+const ADD_ITEM_MESSAGE = formatMessage('press Enter to add this item or Tab to move to the next interactive element');
+const ADD_NAME_MESSAGE = formatMessage(
+  'press Enter to add this name and advance to the next row, or press Tab to advance to the value field'
+);
+
 const ObjectArrayField: React.FC<FieldProps<any[]>> = props => {
-  const { value = [], schema, id, onChange, className, uiOptions, label, description, required } = props;
+  const { value = [], schema, id, onChange, className, uiOptions, label, description, required, announce } = props;
   const { items } = schema;
   const itemSchema = Array.isArray(items) ? items[0] : items;
   const properties = (itemSchema && itemSchema !== true && itemSchema.properties) || {};
@@ -54,6 +59,8 @@ const ObjectArrayField: React.FC<FieldProps<any[]>> = props => {
           return { ...obj, [key]: typeof serializeValue === 'function' ? serializeValue(value) : value };
         }, {});
 
+        announce?.(ADD_NAME_MESSAGE);
+
         addItem(formattedData);
         setNewObject({});
         firstNewFieldRef.current?.focus();
@@ -153,15 +160,7 @@ const ObjectArrayField: React.FC<FieldProps<any[]>> = props => {
                           value={newObject[property] || ''}
                           onChange={handleNewObjectChange(property)}
                           onKeyDown={handleKeyDown}
-                          ariaLabel={
-                            lastField
-                              ? formatMessage(
-                                  'press Enter to add this item or Tab to move to the next interactive element'
-                                )
-                              : formatMessage(
-                                  'press Enter to add this name and advance to the next row, or press Tab to advance to the value field'
-                                )
-                          }
+                          ariaLabel={lastField ? ADD_ITEM_MESSAGE : ADD_NAME_MESSAGE}
                           componentRef={index === 0 ? firstNewFieldRef : undefined}
                         />
                       </div>

Composer/packages/extensions/extension/src/types/form.ts

@@ -52,6 +52,8 @@ export interface FieldProps<T = any> {
   onChange: ChangeHandler<T>;
   onFocus?: (id: string, value?: T) => void;
   onBlur?: (id: string, value?: T) => void;
+
+  announce?: (message: string) => void;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any