a11y: add ariaLabel props to EditableField and TextFields

Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/ObjectArray.tsx

@@ -108,6 +108,7 @@ const ObjectArray: React.FunctionComponent<ArrayFieldTemplateProps> = props => {
                           }
                         : {}),
                     }}
+                    ariaLabel={formatMessage('Object')}
                     data-testid="object-array-text-input"
                   />
                 </div>

Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/StringArray.tsx

@@ -54,6 +54,7 @@ const StringArray: React.FunctionComponent<ArrayFieldTemplateProps> = props => {
             }}
             styles={{ root: { width: '100%' } }}
             data-testid="string-array-text-input"
+            ariaLabel={formatMessage('Value')}
           />
           <IconButton
             disabled={true}

Composer/packages/extensions/obiformeditor/src/Form/fields/AssignmentsField/index.tsx

@@ -215,6 +215,7 @@ export const AssignmentsField: React.FC<BFDFieldProps> = props => {
               onChange={handleNewassignmentEdit('property')}
               placeholder={formatMessage('Property (named location to store information).')}
               autoComplete="off"
+              ariaLabel={formatMessage('Property')}
             />
           </div>
           <div css={assignmentItemValue}>
@@ -229,6 +230,7 @@ export const AssignmentsField: React.FC<BFDFieldProps> = props => {
                 iconName: 'ReturnKey',
                 style: { color: SharedColors.cyanBlue10, opacity: 0.6 },
               }}
+              ariaLabel={formatMessage('Value')}
             />
           </div>
           <div>

Composer/packages/extensions/obiformeditor/src/Form/fields/CustomObjectField.tsx

@@ -59,6 +59,7 @@ const ObjectItem = ({
             root: { margin: '7px 0 7px 0' },
           }}
           errorMessage={errorMessage}
+          ariaLabel={formatMessage('Key')}
         />
       </div>
       <div css={customObjectFieldItem}>
@@ -71,6 +72,7 @@ const ObjectItem = ({
           styles={{
             root: { margin: '7px 0 7px 0' },
           }}
+          ariaLabel={formatMessage('Value')}
         />
       </div>
       <IconButton
@@ -164,6 +166,7 @@ export const CustomObjectField: React.FC<FieldProps> = props => {
               styles={{
                 root: { margin: '7px 0 7px 0' },
               }}
+              ariaLabel={formatMessage('Key')}
             />
           </div>
           <div css={customObjectFieldItem}>
@@ -180,6 +183,7 @@ export const CustomObjectField: React.FC<FieldProps> = props => {
               styles={{
                 root: { margin: '7px 0 7px 0' },
               }}
+              ariaLabel={formatMessage('Value')}
             />
           </div>
           <IconButton

Composer/packages/extensions/obiformeditor/src/Form/fields/EditableField.tsx

@@ -11,10 +11,11 @@ interface EditableFieldProps extends ITextFieldProps {
   placeholder?: string;
   fontSize?: string;
   options?: any;
+  ariaLabel?: string;
 }
 
 export const EditableField: React.FC<EditableFieldProps> = props => {
-  const { styles = {}, placeholder, fontSize, onChange, onBlur, value, options = {}, ...rest } = props;
+  const { styles = {}, placeholder, fontSize, onChange, onBlur, value, ariaLabel, options = {}, ...rest } = props;
   const { transparentBorder } = options;
   const [editing, setEditing] = useState<boolean>(false);
   const [hasFocus, setHasFocus] = useState<boolean>(false);
@@ -45,6 +46,8 @@ export const EditableField: React.FC<EditableFieldProps> = props => {
     borderColor = localValue || transparentBorder ? 'transparent' : NeutralColors.gray30;
   }
 
+  console.log(ariaLabel);
+
   return (
     <div onMouseEnter={() => setEditing(true)} onMouseLeave={() => !hasFocus && setEditing(false)}>
       <TextField
@@ -77,6 +80,7 @@ export const EditableField: React.FC<EditableFieldProps> = props => {
         onFocus={() => setHasFocus(true)}
         onChange={handleChange}
         autoComplete="off"
+        ariaLabel={ariaLabel}
         {...rest}
       />
     </div>

Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ChoiceInput/StaticChoices.tsx

@@ -85,6 +85,7 @@ const ChoiceItem: React.FC<ChoiceItemProps> = props => {
             root: { margin: '7px 0 7px 0' },
           }}
           onBlur={handleBlur}
+          ariaLabel={formatMessage('Value')}
         />
       </div>
       <div css={choiceItemValue}>
@@ -97,6 +98,7 @@ const ChoiceItem: React.FC<ChoiceItemProps> = props => {
           }}
           options={{ transparentBorder: true }}
           onBlur={handleBlur}
+          ariaLabel={formatMessage('Synonyms')}
         />
       </div>
       <div>
@@ -185,6 +187,7 @@ export const StaticChoices = props => {
               placeholder={formatMessage('Add new option here')}
               autoComplete="off"
               errorMessage={errorMsg}
+              ariaLabel={formatMessage('Value')}
             />
           </div>
           <div css={choiceItemValue}>
@@ -198,6 +201,7 @@ export const StaticChoices = props => {
                 iconName: 'ReturnKey',
                 style: { color: SharedColors.cyanBlue10, opacity: 0.6 },
               }}
+              ariaLabel={formatMessage('Synonyms')}
             />
           </div>
           <div>

Composer/packages/extensions/obiformeditor/src/Form/fields/RootField.tsx

@@ -68,6 +68,7 @@ export const RootField: React.FC<RootFieldProps> = props => {
           onChange={handleTitleChange}
           styles={{ field: { fontWeight: FontWeights.semibold }, root: { margin: '5px 0 7px -9px' } }}
           fontSize={FontSizes.size20}
+          ariaLabel={formatMessage('Title')}
         />
         <p className={classnames('RootFieldSubtitle', FontClassNames.smallPlus)}>{getSubTitle()}</p>
         {sdkOverrides.description !== false && (description || schema.description) && (

Composer/packages/extensions/obiformeditor/src/Form/widgets/CheckboxWidget.tsx

@@ -20,6 +20,7 @@ export function CheckboxWidget(props: BFDWidgetProps) {
         onChange={(_, checked?: boolean) => onChange(checked)}
         onBlur={() => onBlur && onBlur(id, Boolean(value))}
         onFocus={() => onFocus && onFocus(id, Boolean(value))}
+        ariaLabel={label}
       />
       <WidgetLabel label={label} description={description} id={id} inline />
     </div>

Composer/packages/extensions/obiformeditor/src/Form/widgets/TextWidget.tsx

@@ -130,6 +130,10 @@ export function TextWidget(props: ITextWidgetProps) {
             },
           },
         }}
+        ariaLabel={
+          // if we hide the widget label above, ARIA will need the label to exist here instead
+          hideLabel ? label : undefined
+        }
         {...sharedProps}
       />
     </>