diff --git a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/ObjectArray.tsx b/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/ObjectArray.tsx index ca795c536e..55eb32fbe2 100644 --- a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/ObjectArray.tsx +++ b/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/ObjectArray.tsx @@ -108,6 +108,7 @@ const ObjectArray: React.FunctionComponent = props => { } : {}), }} + ariaLabel={property} data-testid="object-array-text-input" /> diff --git a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/StringArray.tsx b/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/StringArray.tsx index 41d0c195bd..feaec00957 100644 --- a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/StringArray.tsx +++ b/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/StringArray.tsx @@ -54,6 +54,7 @@ const StringArray: React.FunctionComponent = props => { }} styles={{ root: { width: '100%' } }} data-testid="string-array-text-input" + ariaLabel={formatMessage('String value')} /> = props => { onChange={handleNewassignmentEdit('property')} placeholder={formatMessage('Property (named location to store information).')} autoComplete="off" + ariaLabel={formatMessage('Property')} />
@@ -229,6 +230,7 @@ export const AssignmentsField: React.FC = props => { iconName: 'ReturnKey', style: { color: SharedColors.cyanBlue10, opacity: 0.6 }, }} + ariaLabel={formatMessage('Value')} />
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/CustomObjectField.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/CustomObjectField.tsx index 6598e6bfbd..3278cfdd8c 100644 --- a/Composer/packages/extensions/obiformeditor/src/Form/fields/CustomObjectField.tsx +++ b/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')} />
@@ -71,6 +72,7 @@ const ObjectItem = ({ styles={{ root: { margin: '7px 0 7px 0' }, }} + ariaLabel={formatMessage('Value')} />
= props => { styles={{ root: { margin: '7px 0 7px 0' }, }} + ariaLabel={formatMessage('Key')} />
@@ -180,6 +183,7 @@ export const CustomObjectField: React.FC = props => { styles={{ root: { margin: '7px 0 7px 0' }, }} + ariaLabel={formatMessage('Value')} />
= 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(false); const [hasFocus, setHasFocus] = useState(false); @@ -77,6 +78,7 @@ export const EditableField: React.FC = props => { onFocus={() => setHasFocus(true)} onChange={handleChange} autoComplete="off" + ariaLabel={ariaLabel} {...rest} /> diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ChoiceInput/StaticChoices.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ChoiceInput/StaticChoices.tsx index 7382463316..3c4c9aa60d 100644 --- a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ChoiceInput/StaticChoices.tsx +++ b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/ChoiceInput/StaticChoices.tsx @@ -85,6 +85,7 @@ const ChoiceItem: React.FC = props => { root: { margin: '7px 0 7px 0' }, }} onBlur={handleBlur} + ariaLabel={formatMessage('Value')} />
@@ -97,6 +98,7 @@ const ChoiceItem: React.FC = props => { }} options={{ transparentBorder: true }} onBlur={handleBlur} + ariaLabel={formatMessage('Synonyms')} />
@@ -185,6 +187,7 @@ export const StaticChoices = props => { placeholder={formatMessage('Add new option here')} autoComplete="off" errorMessage={errorMsg} + ariaLabel={formatMessage('Value')} />
@@ -198,6 +201,7 @@ export const StaticChoices = props => { iconName: 'ReturnKey', style: { color: SharedColors.cyanBlue10, opacity: 0.6 }, }} + ariaLabel={formatMessage('Synonyms')} />
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/RootField.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/RootField.tsx index 00cc9aaeb4..a6a0a4876a 100644 --- a/Composer/packages/extensions/obiformeditor/src/Form/fields/RootField.tsx +++ b/Composer/packages/extensions/obiformeditor/src/Form/fields/RootField.tsx @@ -68,6 +68,7 @@ export const RootField: React.FC = props => { onChange={handleTitleChange} styles={{ field: { fontWeight: FontWeights.semibold }, root: { margin: '5px 0 7px -9px' } }} fontSize={FontSizes.size20} + ariaLabel={formatMessage('Title')} />

{getSubTitle()}

{sdkOverrides.description !== false && (description || schema.description) && ( diff --git a/Composer/packages/extensions/obiformeditor/src/Form/widgets/CheckboxWidget.tsx b/Composer/packages/extensions/obiformeditor/src/Form/widgets/CheckboxWidget.tsx index ac8e581389..dc699780b0 100644 --- a/Composer/packages/extensions/obiformeditor/src/Form/widgets/CheckboxWidget.tsx +++ b/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} />
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/widgets/TextWidget.tsx b/Composer/packages/extensions/obiformeditor/src/Form/widgets/TextWidget.tsx index 60275b2b4c..08315af9fd 100644 --- a/Composer/packages/extensions/obiformeditor/src/Form/widgets/TextWidget.tsx +++ b/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} />