Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

a11y: #2133 Add labels to 'Learn more' links for AT #2205

Merged
merged 3 commits into from
Mar 15, 2020
+85 −39
Merged

a11y: #2133 Add labels to 'Learn more' links for AT #2205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8439914
a11y: #2133 add labels to Learn more links
Mar 9, 2020
66e516e
Merge branch 'master' into 2133-learnmore
corinagum Mar 9, 2020
4fd88dc
Merge branch 'master' into 2133-learnmore
cwhitten Mar 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions Composer/packages/extensions/obiformeditor/src/Form/fields/BaseField.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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"
}
}
}