From 979d66846d16c1be1cf676993abe49d57729f662 Mon Sep 17 00:00:00 2001
From: Ben Yackley <61990921+beyackle@users.noreply.github.com>
Date: Thu, 26 Mar 2020 16:43:10 -0700
Subject: [PATCH] a11y: show editor errors on multi line (#2388)

---
 .../lib/code-editor/src/BaseEditor.tsx         | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/Composer/packages/lib/code-editor/src/BaseEditor.tsx b/Composer/packages/lib/code-editor/src/BaseEditor.tsx
index ffc0ba734c..c7e39500a6 100644
--- a/Composer/packages/lib/code-editor/src/BaseEditor.tsx
+++ b/Composer/packages/lib/code-editor/src/BaseEditor.tsx
@@ -7,6 +7,7 @@ import React, { useState, useEffect, useMemo } from 'react';
 import Editor, { EditorDidMount, EditorProps, Monaco, monaco } from '@monaco-editor/react';
 import { NeutralColors, SharedColors } from '@uifabric/fluent-theme';
 import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
+import { Link } from 'office-ui-fabric-react/lib/Link';
 import formatMessage from 'format-message';
 import { Diagnostic } from '@bfc/shared';
 import { findErrors, combineSimpleMessage, findWarnings } from '@bfc/indexers';
@@ -155,14 +156,13 @@ const BaseEditor: React.FC<BaseEditorProps> = props => {
   const hasError = !!errorMessage || !!errorMsgFromDiagnostics;
   const hasWarning = !!warningMessage || !!warningMsgFromDiagnostics;
 
-  const messageHelp = formatMessage.rich('{msg}. Refer to the syntax documentation<a>here</a>.', {
-    msg: errorMessage || errorMsgFromDiagnostics || warningMessage || warningMsgFromDiagnostics,
-    a: ({ children }) => (
-      <a key="a" href={helpURL} target="_blank" rel="noopener noreferrer">
-        {children}
-      </a>
-    ),
-  });
+  const messageHelp = errorMessage || errorMsgFromDiagnostics || warningMessage || warningMsgFromDiagnostics;
+
+  const syntaxLink = (
+    <Link key="a" href={helpURL} target="_blank" rel="noopener noreferrer">
+      {formatMessage('Refer to the syntax documentation here.')}
+    </Link>
+  );
 
   return (
     <React.Fragment>
@@ -178,10 +178,10 @@ const BaseEditor: React.FC<BaseEditorProps> = props => {
           messageBarType={hasError ? MessageBarType.error : hasWarning ? MessageBarType.warning : MessageBarType.info}
           isMultiline={false}
           dismissButtonAriaLabel={formatMessage('Close')}
-          truncated
           overflowButtonAriaLabel={formatMessage('See more')}
         >
           {messageHelp}
+          {syntaxLink}
         </MessageBar>
       )}
     </React.Fragment>