a11y: Add aria-required attribute to Form Editor required fields

Composer/packages/adaptive-form/src/components/fields/BooleanField.tsx

@@ -72,6 +72,7 @@ const BooleanField: React.FC<FieldProps> = function CheckboxWidget(props) {
         required={required}
       />
       <Dropdown
+        aria-required={required}
         ariaLabel={label || formatMessage('boolean field')}
         id={id}
         options={options}

Composer/packages/adaptive-form/src/components/fields/OpenObjectField/ObjectItem.tsx

@@ -34,6 +34,7 @@ const ObjectItem: React.FC<ObjectItemProps> = ({
   onChange,
   onNameChange,
   onDelete,
+  required,
   ...rest
 }) => {
   const initialName = useMemo(() => originalName, []);
@@ -76,6 +77,7 @@ const ObjectItem: React.FC<ObjectItemProps> = ({
           label={formatMessage('Key')}
           name="key"
           placeholder={initialName || formatMessage('Add a new key')}
+          required={required}
           schema={{ type: 'string' }}
           uiOptions={{}}
           value={name}
@@ -89,6 +91,7 @@ const ObjectItem: React.FC<ObjectItemProps> = ({
           label={formatMessage('Value')}
           name="value"
           placeholder={placeholder}
+          required={required}
           schema={schema}
           value={value}
           onChange={onChange}

Composer/packages/adaptive-form/src/components/fields/OpenObjectField/OpenObjectField.tsx

@@ -43,6 +43,7 @@ const OpenObjectField: React.FC<FieldProps<{
             formData={value}
             id={`${id}.value`}
             name={propertyName}
+            required={required}
             schema={typeof additionalProperties === 'object' ? additionalProperties : {}}
             uiOptions={uiOptions.properties?.additionalProperties || {}}
             value={propertyValue}

Composer/packages/adaptive-form/src/components/fields/SelectField.tsx

@@ -62,6 +62,7 @@ export const SelectField: React.FC<FieldProps<string | number>> = function Selec
     <>
       <FieldLabel description={description} helpLink={uiOptions?.helpLink} id={id} label={label} required={required} />
       <Dropdown
+        aria-required={required}
         ariaLabel={label || formatMessage('selection field')}
         data-testid="SelectFieldDropdown"
         errorMessage={error as string}

Composer/packages/adaptive-form/src/components/fields/StringField.tsx

@@ -64,6 +64,7 @@ export const StringField: React.FC<FieldProps<string>> = function StringField(pr
     <>
       <FieldLabel description={description} helpLink={uiOptions?.helpLink} id={id} label={label} required={required} />
       <TextField
+        aria-required={required}
         ariaLabel={label || formatMessage('string field')}
         autoAdjustHeight={!!uiOptions?.multiline}
         autoComplete="off"