Skip to content

Commit

Permalink
a11y: #2133 add labels to Learn more links (#2205)
Browse files Browse the repository at this point in the history 
Co-authored-by: Corina <corina.aj@gmail.com>
Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>
  • Loading branch information
@corinagum @cwhitten
3 people committed Mar 15, 2020
1 parent be87b34 commit ad6903d
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 39 deletions.
3 changes: 3 additions & 0 deletions Composer/packages/extensions/obiformeditor/src/Form/fields/BaseField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export function BaseField<T = any>(props: BaseFieldProps<T>): JSX.Element {
let descriptionOverride;
let helpLink;
let helpLinkText;
let helpLinkLabel;
let key = idSchema.__id;

if (schema.title) {
Expand All @@ -46,6 +47,7 @@ export function BaseField<T = any>(props: BaseFieldProps<T>): JSX.Element {
descriptionOverride = get(SDKOverrides, 'description');
helpLink = get(SDKOverrides, 'helpLink');
helpLinkText = get(SDKOverrides, 'helpLinkText');
helpLinkLabel = get(SDKOverrides, 'helpLinkLabel');
}

// use dialogId as the key because the focusPath may not be enough
Expand Down Expand Up @@ -81,6 +83,7 @@ export function BaseField<T = any>(props: BaseFieldProps<T>): JSX.Element {
description={getDescription()}
helpLink={helpLink}
helpLinkText={helpLinkText}
helpLinkLabel={helpLinkLabel}
id={key}
/>
)}
Expand Down
10 changes: 8 additions & 2 deletions Composer/packages/extensions/obiformeditor/src/Form/fields/RootField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const overrideDefaults = {
description: undefined,
helpLink: undefined,
helpLinkText: undefined,
helpLinkLabel: undefined,
};

interface RootFieldProps {
Expand Down Expand Up @@ -74,11 +75,16 @@ export const RootField: React.FC<RootFieldProps> = props => {
{sdkOverrides.description !== false && (description || schema.description) && (
<p className={classnames('RootFieldDescription', FontClassNames.smallPlus)}>
{getDescription()}
{sdkOverrides.helpLink && sdkOverrides.helpLinkText && (
{sdkOverrides.helpLink && sdkOverrides.helpLinkText && sdkOverrides.helpLinkLabel && (
<>
<br />
<br />
<a href={sdkOverrides.helpLink} target="_blank" rel="noopener noreferrer">
<a
aria-label={sdkOverrides.helpLinkLabel}
href={sdkOverrides.helpLink}
target="_blank"
rel="noopener noreferrer"
>
{sdkOverrides.helpLinkText}
</a>
</>
Expand Down
12 changes: 8 additions & 4 deletions Composer/packages/extensions/obiformeditor/src/Form/widgets/WidgetLabel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,11 @@ interface DescriptionCalloutProps {
id?: string;
helpLink?: string;
helpLinkText?: string;
helpLinkLabel?: string;
}

const DescriptionCallout: React.FC<DescriptionCalloutProps> = props => {
const { description, title, id, helpLink, helpLinkText } = props;
const { description, title, id, helpLink, helpLinkText, helpLinkLabel } = props;

if (!description) {
return null;
Expand All @@ -31,11 +32,11 @@ const DescriptionCallout: React.FC<DescriptionCalloutProps> = props => {
<h3 style={{ fontSize: '20px', margin: '0', marginBottom: '10px' }}>{title}</h3>
<p>
{description}
{helpLink && helpLinkText && (
{helpLink && helpLinkText && helpLinkLabel && (
<>
<br />
<br />
<a href={helpLink} target="_blank" rel="noopener noreferrer">
<a aria-label={helpLinkLabel} href={helpLink} target="_blank" rel="noopener noreferrer">
{helpLinkText}
</a>
</>
Expand Down Expand Up @@ -72,10 +73,11 @@ interface WidgetLabelProps {
inline?: boolean;
helpLink?: string;
helpLinkText?: string;
helpLinkLabel?: string;
}

export const WidgetLabel: React.FC<WidgetLabelProps> = props => {
const { label, description, id, inline, helpLink, helpLinkText } = props;
const { label, description, id, inline, helpLink, helpLinkText, helpLinkLabel } = props;

if (!label) {
return null;
Expand All @@ -100,6 +102,8 @@ export const WidgetLabel: React.FC<WidgetLabelProps> = props => {
id={id}
helpLink={helpLink}
helpLinkText={helpLinkText}
helpLinkLabel={helpLinkLabel}
aria-label={helpLinkLabel}
/>
</Label>
);
Expand Down
99 changes: 66 additions & 33 deletions Composer/packages/server/schemas/editor.schema
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,20 @@
"description": "This configures a data driven dialog via a collection of events and actions.",
"title": "Adaptive dialog",
"helpLink": "https://aka.ms/botframework",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about Adaptive dialog"
},
"Microsoft.AttachmentInput": {
"title": "Prompt for Attachment",
"helpLink": "https://aka.ms/bfc-ask-for-user-input",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about prompts"
},
"Microsoft.BeginDialog": {
"title": "Begin a Dialog",
"helpLink": "https://aka.ms/bfc-understanding-dialogs",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about dialogs"
},
"Microsoft.OnCancelDialog": {
"title": "Dialog cancelled",
Expand All @@ -36,98 +39,114 @@
"Microsoft.CancelAllDialogs": {
"title": "Cancel All Dialogs",
"helpLink": "https://aka.ms/bfc-understanding-dialogs",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about dialogs"
},
"Microsoft.ChoiceInput": {
"title": "Prompt with multi-choice",
"helpLink": "https://aka.ms/bfc-ask-for-user-input",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about prompts"
},
"Microsoft.ConditionalSelector": {
"title": "ConditionalSelector"
},
"Microsoft.ConfirmInput": {
"title": "Prompt for confirmation",
"helpLink": "https://aka.ms/bfc-ask-for-user-input",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about prompts"
},
"Microsoft.DateTimeInput": {
"title": "Prompt for a date",
"helpLink": "https://aka.ms/bfc-ask-for-user-input",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about prompts"
},
"Microsoft.DebugBreak": {
"title": "Debug Break"
},
"Microsoft.DeleteProperty": {
"title": "Delete a Property",
"helpLink": "https://aka.ms/bfc-using-memory",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about conversation flow and memory"
},
"Microsoft.DeleteProperties": {
"title": "Delete Properties",
"helpLink": "https://aka.ms/bfc-using-memory",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about conversation flow and memory"
},
"Microsoft.EditActions": {
"title": "Modify active dialog"
},
"Microsoft.EditArray": {
"title": "Edit an Array Property",
"helpLink": "https://aka.ms/bfc-using-memory",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about conversation flow and memory"
},
"Microsoft.EmitEvent": {
"title": "Emit a custom event",
"helpLink": "https://aka.ms/bfc-custom-events",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about custom events"
},
"Microsoft.EndDialog": {
"title": "End Dialog",
"helpLink": "https://aka.ms/bfc-understanding-dialogs",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about dialogs"
},
"Microsoft.EndTurn": {
"title": "End Turn",
"helpLink": "https://aka.ms/bfc-understanding-dialogs",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about dialogs"
},
"Microsoft.FirstSelector": {
"title": "FirstSelector"
},
"Microsoft.Foreach": {
"title": "Loop: For Each",
"helpLink": "https://aka.ms/bfc-controlling-conversation-flow",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about controlling conversation flow"
},
"Microsoft.ForeachPage": {
"title": "Loop: For Each Page",
"helpLink": "https://aka.ms/bfc-controlling-conversation-flow",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about controlling conversation flow"
},
"Microsoft.HttpRequest": {
"title": "HTTP Request",
"helpLink": "https://aka.ms/bfc-using-http",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about using HTTP"
},
"Microsoft.IfCondition": {
"title": "Branch: If/Else",
"helpLink": "https://aka.ms/bfc-controlling-conversation-flow",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about controlling conversation flow"
},
"Microsoft.LanguagePolicy": {
"title": "LanguagePolicy"
},
"Microsoft.LogAction": {
"title": "Log to console",
"helpLink": "https://aka.ms/bfc-debugging-bots",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about debugginb bots"
},
"Microsoft.LuisRecognizer": {
"description": "To understand what the user says, your dialog needs a 'Recognizer', that includes example words and sentences that users may use.",
"title": "Language Understanding",
"helpLink": "https://aka.ms/BFC-Using-LU",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about Language Understanding"
},
"Microsoft.MostSpecificSelector": {
"title": "MostSpecificSelector"
Expand All @@ -136,17 +155,20 @@
"description": "To understand what the user says, your dialog needs a 'Recognizer', that includes example words and sentences that users may use.",
"title": "Language Understanding",
"helpLink": "https://aka.ms/BFC-Using-LU",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about Language Understanding"
},
"Microsoft.NumberInput": {
"title": "Prompt for a number",
"helpLink": "https://aka.ms/bfc-ask-for-user-input",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about prompts"
},
"Microsoft.OAuthInput": {
"title": "OAuth Login",
"helpLink": "https://aka.ms/bfc-using-oauth",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about using OAuth"
},
"Microsoft.OnActivity": {
"title": "Activities",
Expand All @@ -161,7 +183,8 @@
"subtitle": "ConversationUpdate activity",
"description": "Handle the events fired when a user begins a new conversation with the bot.",
"helpLink": "https://docs.microsoft.com/en-us/azure/bot-service/bot-builder-conversations?view=azure-bot-service-4.0#conversation-lifetime",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about conversation update activities"
},
"Microsoft.OnDialogEvent": {
"title": "Dialog events",
Expand Down Expand Up @@ -230,7 +253,8 @@
"Microsoft.QnAMakerDialog": {
"title": "QnAMakerDialog",
"helpLink": "https://aka.ms/bfc-using-QnA",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about QnA Maker"
},
"Microsoft.RandomSelector": {
"title": "RandomSelector"
Expand All @@ -242,12 +266,14 @@
"Microsoft.RepeatDialog": {
"title": "Repeat this Dialog",
"helpLink": "https://aka.ms/bfc-understanding-dialogs",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about dialogs"
},
"Microsoft.ReplaceDialog": {
"title": "Replace this Dialog",
"helpLink": "https://aka.ms/bfc-understanding-dialogs",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about dialogs"
},
"Microsoft.Rule": {
"title": "Rule"
Expand All @@ -258,32 +284,38 @@
"Microsoft.SendActivity": {
"title": "Send an Activity",
"helpLink": "https://aka.ms/bfc-send-activity",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about sending messages"
},
"Microsoft.SetProperty": {
"title": "Set a Property",
"helpLink": "https://aka.ms/bfc-using-memory",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about conversation flow and memory"
},
"Microsoft.SetProperties": {
"title": "Set Properties",
"helpLink": "https://aka.ms/bfc-using-memory",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about conversation flow and memory"
},
"Microsoft.SwitchCondition": {
"title": "Branch: Switch",
"helpLink": "https://aka.ms/bfc-controlling-conversation-flow",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about controlling conversation flow"
},
"Microsoft.TextInput": {
"title": "Prompt for text",
"helpLink": "https://aka.ms/bfc-ask-for-user-input",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about prompts"
},
"Microsoft.TraceActivity": {
"title": "Emit a trace event",
"helpLink": "https://aka.ms/bfc-debugging-bots",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about debugging bots"
},
"Microsoft.TrueSelector": {
"title": "TrueSelector"
Expand All @@ -292,7 +324,8 @@
"description": "To understand what the user says, your dialog needs a 'Recognizer', that includes example words and sentences that users may use.",
"title": "Language Understanding",
"helpLink": "https://aka.ms/BFC-Using-LU",
"helpLinkText": "Learn more"
"helpLinkText": "Learn more",
"helpLinkLabel": "Learn more about Language Understanding"
}
}
}

0 comments on commit ad6903d

Please sign in to comment.