a11y: microsoft#2133 add labels to Learn more links (microsoft#2205)

Co-authored-by: Corina <[email protected]> Co-authored-by: Chris Whitten <[email protected]>
sangwoohaan · Mar 15, 2020 · ad6903d · ad6903d
1 parent be87b34
commit ad6903d
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 39 deletions.
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/BaseField.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/BaseField.tsx
@@ -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) {
@@ -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
@@ -81,6 +83,7 @@ export function BaseField<T = any>(props: BaseFieldProps<T>): JSX.Element {
           description={getDescription()}
           helpLink={helpLink}
           helpLinkText={helpLinkText}
+          helpLinkLabel={helpLinkLabel}
           id={key}
         />
       )}

diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/RootField.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/RootField.tsx
@@ -19,6 +19,7 @@ const overrideDefaults = {
   description: undefined,
   helpLink: undefined,
   helpLinkText: undefined,
+  helpLinkLabel: undefined,
 };
 
 interface RootFieldProps {
@@ -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>
               </>

diff --git a/Composer/packages/extensions/obiformeditor/src/Form/widgets/WidgetLabel.tsx b/Composer/packages/extensions/obiformeditor/src/Form/widgets/WidgetLabel.tsx
@@ -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;
@@ -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>
                 </>
@@ -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;
@@ -100,6 +102,8 @@ export const WidgetLabel: React.FC<WidgetLabelProps> = props => {
         id={id}
         helpLink={helpLink}
         helpLinkText={helpLinkText}
+        helpLinkLabel={helpLinkLabel}
+        aria-label={helpLinkLabel}
       />
     </Label>
   );

diff --git a/Composer/packages/server/schemas/editor.schema b/Composer/packages/server/schemas/editor.schema
@@ -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",
@@ -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"
@@ -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",
@@ -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",
@@ -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"
@@ -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"
@@ -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"
@@ -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"
     }
   }
 }