From d9a6b43ea32acbcba30fa3fc88e43db9788df914 Mon Sep 17 00:00:00 2001 From: beyackle Date: Thu, 12 Mar 2020 09:29:15 -0700 Subject: [PATCH 1/4] add ariaLabel prop to EditableField This adds a new prop to EditableField so we can wire through the accessibility information wherever it's needed. --- .../obiformeditor/src/Form/fields/CustomObjectField.tsx | 2 ++ .../obiformeditor/src/Form/fields/EditableField.tsx | 6 +++++- .../Form/fields/PromptField/ChoiceInput/StaticChoices.tsx | 2 ++ .../extensions/obiformeditor/src/Form/fields/RootField.tsx | 1 + 4 files changed, 10 insertions(+), 1 deletion(-) diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/CustomObjectField.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/CustomObjectField.tsx index 6598e6bfbd..05bcbf1d22 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 => { - 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); @@ -45,6 +46,8 @@ export const EditableField: React.FC = props => { borderColor = localValue || transparentBorder ? 'transparent' : NeutralColors.gray30; } + console.log(ariaLabel); + return (
setEditing(true)} onMouseLeave={() => !hasFocus && setEditing(false)}> = 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..ca56e5688f 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')} />
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) && ( From c8844b2d1d6b91e406205a940ad59850dd92721c Mon Sep 17 00:00:00 2001 From: beyackle Date: Thu, 12 Mar 2020 10:58:20 -0700 Subject: [PATCH 2/4] add aria labels to TextFields too --- .../obiformeditor/src/Form/ArrayFieldTemplate/ObjectArray.tsx | 1 + .../obiformeditor/src/Form/ArrayFieldTemplate/StringArray.tsx | 1 + .../obiformeditor/src/Form/fields/AssignmentsField/index.tsx | 2 ++ .../obiformeditor/src/Form/fields/CustomObjectField.tsx | 2 ++ .../src/Form/fields/PromptField/ChoiceInput/StaticChoices.tsx | 2 ++ .../extensions/obiformeditor/src/Form/widgets/TextWidget.tsx | 4 ++++ 6 files changed, 12 insertions(+) diff --git a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/ObjectArray.tsx b/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/ObjectArray.tsx index ca795c536e..1882678101 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={formatMessage('Object')} 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..13db7c7383 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('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 05bcbf1d22..3278cfdd8c 100644 --- a/Composer/packages/extensions/obiformeditor/src/Form/fields/CustomObjectField.tsx +++ b/Composer/packages/extensions/obiformeditor/src/Form/fields/CustomObjectField.tsx @@ -166,6 +166,7 @@ export const CustomObjectField: React.FC = props => { styles={{ root: { margin: '7px 0 7px 0' }, }} + ariaLabel={formatMessage('Key')} />
@@ -182,6 +183,7 @@ export const CustomObjectField: React.FC = props => { styles={{ root: { margin: '7px 0 7px 0' }, }} + ariaLabel={formatMessage('Value')} />
{ placeholder={formatMessage('Add new option here')} autoComplete="off" errorMessage={errorMsg} + ariaLabel={formatMessage('Value')} />
@@ -200,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/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} /> From b7019c84773ff12820aa3e91dcc8f73ab4b0b5b8 Mon Sep 17 00:00:00 2001 From: beyackle Date: Thu, 12 Mar 2020 12:12:19 -0700 Subject: [PATCH 3/4] Update CheckboxWidget.tsx fix checkboxes too --- .../extensions/obiformeditor/src/Form/widgets/CheckboxWidget.tsx | 1 + 1 file changed, 1 insertion(+) 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} />
From c3bca0378b566f080c7d67a3958dcaf3b8426215 Mon Sep 17 00:00:00 2001 From: beyackle Date: Thu, 12 Mar 2020 14:55:37 -0700 Subject: [PATCH 4/4] fixes from review Better labels on array fields, and remove a spurious console log --- .../obiformeditor/src/Form/ArrayFieldTemplate/ObjectArray.tsx | 2 +- .../obiformeditor/src/Form/ArrayFieldTemplate/StringArray.tsx | 2 +- .../extensions/obiformeditor/src/Form/fields/EditableField.tsx | 2 -- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/ObjectArray.tsx b/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/ObjectArray.tsx index 1882678101..55eb32fbe2 100644 --- a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/ObjectArray.tsx +++ b/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/ObjectArray.tsx @@ -108,7 +108,7 @@ const ObjectArray: React.FunctionComponent = props => { } : {}), }} - ariaLabel={formatMessage('Object')} + 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 13db7c7383..feaec00957 100644 --- a/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/StringArray.tsx +++ b/Composer/packages/extensions/obiformeditor/src/Form/ArrayFieldTemplate/StringArray.tsx @@ -54,7 +54,7 @@ const StringArray: React.FunctionComponent = props => { }} styles={{ root: { width: '100%' } }} data-testid="string-array-text-input" - ariaLabel={formatMessage('Value')} + ariaLabel={formatMessage('String value')} /> = props => { borderColor = localValue || transparentBorder ? 'transparent' : NeutralColors.gray30; } - console.log(ariaLabel); - return (
setEditing(true)} onMouseLeave={() => !hasFocus && setEditing(false)}>