botframework-webchat-component 4.13.0 → 4.15.0

package/src/Middleware/AttachmentForScreenReader/createCoreMiddleware.tsx

@@ -0,0 +1,40 @@
+import { AttachmentForScreenReaderMiddleware } from 'botframework-webchat-api';
+import React from 'react';
+
+import AudioAttachment from './AudioAttachment';
+import FileAttachment from './FileAttachment';
+import ImageAttachment from './ImageAttachment';
+import TextAttachment from './TextAttachment';
+import VideoAttachment from './VideoAttachment';
+
+export default function createCoreMiddleware(): AttachmentForScreenReaderMiddleware[] {
+  return [
+    () =>
+      next =>
+      (...args) => {
+        const [
+          {
+            activity: { from: { role = undefined } = {} } = {},
+            attachment,
+            attachment: { contentType = undefined, contentUrl = undefined, thumbnailUrl = undefined } = {}
+          }
+        ] = args;
+
+        const isText = /^text\//u.test(contentType);
+
+        return (isText ? !attachment.content : role === 'user' && !thumbnailUrl)
+          ? () => <FileAttachment attachment={attachment} />
+          : /^audio\//u.test(contentType)
+          ? () => <AudioAttachment />
+          : /^image\//u.test(contentType)
+          ? () => <ImageAttachment />
+          : /^video\//u.test(contentType)
+          ? () => <VideoAttachment />
+          : contentUrl || contentType === 'application/octet-stream'
+          ? () => <FileAttachment attachment={attachment} />
+          : isText
+          ? () => <TextAttachment attachment={attachment} />
+          : next(...args);
+      }
+  ];
+}

package/src/Middleware/Avatar/{createCoreMiddleware.js → createCoreMiddleware.tsx}

@@ -1,6 +1,7 @@
+import { AvatarMiddleware } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { FC } from 'react';
 
 import ImageAvatar from '../../Avatar/ImageAvatar';
 import InitialsAvatar from '../../Avatar/InitialsAvatar';
@@ -18,7 +19,13 @@ const ROOT_STYLE = {
   }
 };
 
-const DefaultAvatar = ({ 'aria-hidden': ariaHidden, className, fromUser }) => {
+type DefaultAvatarProps = {
+  'aria-hidden'?: boolean;
+  className?: string;
+  fromUser: boolean;
+};
+
+const DefaultAvatar: FC<DefaultAvatarProps> = ({ 'aria-hidden': ariaHidden, className, fromUser }) => {
   const [{ avatar: avatarStyleSet }] = useStyleSet();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
 
@@ -50,18 +57,19 @@ DefaultAvatar.propTypes = {
   fromUser: PropTypes.bool.isRequired
 };
 
-export default function createCoreAvatarMiddleware() {
+export default function createCoreAvatarMiddleware(): AvatarMiddleware[] {
   return [
-    () => () => ({ fromUser, styleOptions }) => {
-      const { botAvatarImage, botAvatarInitials, userAvatarImage, userAvatarInitials } = styleOptions;
+    () =>
+      () =>
+      ({ fromUser, styleOptions }) => {
+        const { botAvatarImage, botAvatarInitials, userAvatarImage, userAvatarInitials } = styleOptions;
 
-      if (fromUser ? userAvatarImage || userAvatarInitials : botAvatarImage || botAvatarInitials) {
-        // eslint-disable-next-line react/display-name
-        return () => <DefaultAvatar fromUser={fromUser} />;
-      }
+        if (fromUser ? userAvatarImage || userAvatarInitials : botAvatarImage || botAvatarInitials) {
+          return () => <DefaultAvatar fromUser={fromUser} />;
+        }
 
-      return false;
-    }
+        return false;
+      }
   ];
 }
 

package/src/Middleware/CardAction/createCoreMiddleware.js

@@ -2,7 +2,7 @@ import { ie11 } from '../../Utils/detectBrowser';
 
 // This code is adopted from sanitize-html/naughtyScheme.
 // sanitize-html is a dependency of Web Chat but the naughtScheme function is neither exposed nor reusable.
-// https://github.com/apostrophecms/sanitize-html/blob/master/src/index.js#L526
+// https://github.com/apostrophecms/sanitize-html/
 function getScheme(href) {
   // Browsers ignore character codes of 32 (space) and below in a surprising
   // number of situations. Start reading here:
@@ -31,55 +31,64 @@ const ALLOWED_SCHEMES = ['data', 'http', 'https', 'ftp', 'mailto', 'sip', 'tel']
 
 export default function createDefaultCardActionMiddleware() {
   return [
-    () => next => (...args) => {
-      const [
-        {
-          cardAction: { type, value },
-          getSignInUrl
-        }
-      ] = args;
-
-      switch (type) {
-        case 'call':
-        case 'downloadFile':
-        case 'openUrl':
-        case 'playAudio':
-        case 'playVideo':
-        case 'showImage':
-          if (ALLOWED_SCHEMES.includes(getScheme(value))) {
-            if (ie11) {
-              const newWindow = window.open();
-              newWindow.opener = null;
-              newWindow.location = value;
+    () =>
+      next =>
+      (...args) => {
+        const [
+          {
+            cardAction: { type, value },
+            getSignInUrl
+          }
+        ] = args;
+
+        switch (type) {
+          case 'call':
+          case 'downloadFile':
+          case 'openUrl':
+          case 'playAudio':
+          case 'playVideo':
+          case 'showImage':
+            if (ALLOWED_SCHEMES.includes(getScheme(value))) {
+              if (ie11) {
+                const newWindow = window.open();
+                newWindow.opener = null;
+                newWindow.location = value;
+              } else {
+                // False alarm: this is "window.open", and not "fs.open".
+                // eslint-disable-next-line security/detect-non-literal-fs-filename
+                window.open(value, '_blank', 'noopener noreferrer');
+              }
             } else {
-              window.open(value, '_blank', 'noopener noreferrer');
+              console.warn('botframework-webchat: Cannot open URL with disallowed schemes.', value);
             }
-          } else {
-            console.warn('botframework-webchat: Cannot open URL with disallowed schemes.', value);
-          }
 
-          break;
+            break;
 
-        case 'signin': {
-          /**
-           * @todo TODO: [P3] We should prime the URL into the OAuthCard directly, instead of calling getSessionId on-demand
-           *       This is to eliminate the delay between window.open() and location.href call
-           */
+          case 'signin': {
+            /**
+             * @todo TODO: [P3] We should prime the URL into the OAuthCard directly, instead of calling getSessionId on-demand
+             *       This is to eliminate the delay between window.open() and location.href call
+             */
 
-          // eslint-disable-next-line wrap-iife
-          (async function () {
-            const popup = window.open();
-            const url = await getSignInUrl();
+            (async function () {
+              const popup = window.open();
+              const url = await getSignInUrl();
 
-            popup.location.href = url;
-          })();
+              if (['http', 'https'].includes(getScheme(url))) {
+                popup.location.href = url;
+              } else {
+                console.warn('botframework-webchat: Cannot open URL with disallowed schemes.', url);
 
-          break;
-        }
+                popup.close();
+              }
+            })();
+
+            break;
+          }
 
-        default:
-          return next(...args);
+          default:
+            return next(...args);
+        }
       }
-    }
   ];
 }

package/src/Middleware/GroupActivities/createCoreMiddleware.js

@@ -48,8 +48,10 @@ function shouldGroupTimestamp(activityX, activityY, groupTimestamp) {
 }
 
 export default function createDefaultGroupActivityMiddleware({ groupTimestamp }) {
-  return () => () => ({ activities }) => ({
-    sender: bin(activities, (x, y) => x.from.role === y.from.role),
-    status: bin(activities, (x, y) => shouldGroupTimestamp(x, y, groupTimestamp))
-  });
+  return () =>
+    () =>
+    ({ activities }) => ({
+      sender: bin(activities, (x, y) => x.from.role === y.from.role),
+      status: bin(activities, (x, y) => shouldGroupTimestamp(x, y, groupTimestamp))
+    });
 }

package/src/Middleware/ScrollToEndButton/ScrollToEndButton.js

@@ -0,0 +1,45 @@
+import { hooks } from 'botframework-webchat-api';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import useStyleSet from '../../hooks/useStyleSet';
+
+const { useDirection, useLocalizer, useStyleOptions } = hooks;
+
+const ScrollToEndButton = ({ onClick }) => {
+  const [{ scrollToEndButton: scrollToEndButtonStyleSet }] = useStyleSet();
+  const [{ scrollToEndButtonBehavior }] = useStyleOptions();
+  const [direction] = useDirection();
+  const localize = useLocalizer();
+
+  const text = localize(scrollToEndButtonBehavior === 'any' ? 'TRANSCRIPT_MORE_MESSAGES' : 'TRANSCRIPT_NEW_MESSAGES');
+
+  return (
+    <button
+      aria-label={text}
+      className={classNames(
+        'webchat__scroll-to-end-button',
+        scrollToEndButtonStyleSet + '',
+        direction === 'rtl' ? 'webchat__scroll-to-end-button--rtl' : ''
+      )}
+      onClick={onClick}
+      tabIndex={0}
+      type="button"
+    >
+      {text}
+    </button>
+  );
+};
+
+ScrollToEndButton.defaultProps = {
+  onClick: undefined
+};
+
+ScrollToEndButton.displayName = 'ScrollToEndButton';
+
+ScrollToEndButton.propTypes = {
+  onClick: PropTypes.func
+};
+
+export default ScrollToEndButton;

package/src/Middleware/ScrollToEndButton/createScrollToEndButtonMiddleware.ts

@@ -0,0 +1,19 @@
+import { ScrollToEndButtonMiddleware } from 'botframework-webchat-api';
+
+import ScrollToEndButton from './ScrollToEndButton';
+
+export default function createScrollToEndButtonMiddleware(): ScrollToEndButtonMiddleware[] {
+  return [
+    () =>
+      () =>
+      ({ atEnd, styleOptions: { scrollToEndButtonBehavior }, unread }) =>
+        !scrollToEndButtonBehavior
+          ? // Don't show the button when it is set to false.
+            false
+          : scrollToEndButtonBehavior === 'any'
+          ? // Show when the scroll view is not at the end, regardless of number of unread activities.
+            !atEnd && ScrollToEndButton
+          : // Show when the scroll view is not at the end of the transcript, and there are new/unread activities.
+            !atEnd && unread && ScrollToEndButton
+  ];
+}

package/src/Middleware/Toast/createCoreMiddleware.tsx

@@ -0,0 +1,24 @@
+import { ToastMiddleware } from 'botframework-webchat-api';
+
+import createToastMiddleware from '../../Toast/createToastMiddleware';
+
+function createCoreMiddleware(): ToastMiddleware[] {
+  return [
+    () =>
+      next =>
+      (...args) => {
+        const [
+          {
+            notification: { id }
+          }
+        ] = args;
+
+        // We are ignoring "connectivitystatus" notifications, we will render it using <BasicConnectivityStatus> instead.
+        // If devs want to render it, they can add a middleware.
+        return id !== 'connectivitystatus' && next(...args);
+      },
+    createToastMiddleware()
+  ];
+}
+
+export default createCoreMiddleware;

package/src/Middleware/TypingIndicator/{createCoreMiddleware.js → createCoreMiddleware.tsx}

@@ -1,6 +1,4 @@
-/* eslint react/prop-types: "off"*/
-
-import { hooks } from 'botframework-webchat-api';
+import { hooks, TypingIndicatorMiddleware } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import React from 'react';
 
@@ -22,6 +20,13 @@ const DotIndicator = () => {
 };
 
 // TODO: [P4] Rename this file or the whole middleware, it looks either too simple or too comprehensive now
-export default function createCoreMiddleware() {
-  return [() => () => ({ visible }) => visible && <DotIndicator />];
+export default function createCoreMiddleware(): TypingIndicatorMiddleware[] {
+  return [
+    () =>
+      () =>
+      // This is not a React component.
+      // eslint-disable-next-line react/prop-types
+      ({ visible }) =>
+        visible && <DotIndicator />
+  ];
 }

package/src/{ReactWebChat.js → ReactWebChat.tsx}

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { VFC } from 'react';
 
 import BasicWebChat from './BasicWebChat';
-import Composer from './Composer';
+import Composer, { ComposerProps } from './Composer';
 
 // Please keep this file as simple as possible. This is for setting up the surface (a.k.a. <Composer>) and <BasicWebChat> only.
 
@@ -12,22 +12,40 @@ import Composer from './Composer';
 // - They can run hooks outside of activity/attachment middleware
 //   - They will put <Composer> as very top of their page, and allow buttons on their existing page to send message to bot
 
-const ReactWebChat = ({ className, role, ...composerProps }) => (
+// Subset of landmark roles: https://w3.org/TR/wai-aria/#landmark_roles
+const ARIA_LANDMARK_ROLES = ['complementary', 'contentinfo', 'form', 'main', 'region'];
+
+type ReactWebChatProps = Omit<ComposerProps, 'children'> & {
+  className?: string;
+  role?: 'complementary' | 'contentinfo' | 'form' | 'main' | 'region';
+};
+
+const ReactWebChat: VFC<ReactWebChatProps> = ({ className, role, ...composerProps }) => (
   <Composer {...composerProps}>
     <BasicWebChat className={className} role={role} />
   </Composer>
 );
 
-export default ReactWebChat;
-
 ReactWebChat.defaultProps = {
   className: undefined,
   role: undefined,
   ...Composer.defaultProps
 };
 
+const {
+  // Excluding "children" from ComposerProps.
+  children: _,
+  ...composerPropTypesWithoutChildren
+} = Composer.propTypes;
+
 ReactWebChat.propTypes = {
   className: PropTypes.string,
-  role: PropTypes.string,
-  ...Composer.propTypes
+  // Ignoring deficiencies with TypeScript/PropTypes inference.
+  // @ts-ignore
+  role: PropTypes.oneOf(ARIA_LANDMARK_ROLES),
+  ...composerPropTypesWithoutChildren
 };
+
+export default ReactWebChat;
+
+export type { ReactWebChatProps };

package/src/ScreenReaderActivity.js

@@ -3,13 +3,19 @@
 import { hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { Fragment, useMemo } from 'react';
 
-import textFormatToContentType from './Utils/textFormatToContentType';
-import useStripMarkdown from './hooks/internal/useStripMarkdown';
+import activityAltText from './Utils/activityAltText';
 import useStyleToEmotionObject from './hooks/internal/useStyleToEmotionObject';
+import useRenderMarkdownAsHTML from './hooks/useRenderMarkdownAsHTML';
 
-const { useAvatarForBot, useCreateAttachmentForScreenReaderRenderer, useDateFormatter, useLocalizer } = hooks;
+const {
+  useAvatarForBot,
+  useCreateAttachmentForScreenReaderRenderer,
+  useDateFormatter,
+  useGetKeyByActivity,
+  useLocalizer
+} = hooks;
 
 const ROOT_STYLE = {
   '&.webchat__screen-reader-activity': {
@@ -32,70 +38,89 @@ const ACTIVITY_NUM_ATTACHMENTS_ALT_IDS = {
   two: 'ACTIVITY_NUM_ATTACHMENTS_TWO_ALT'
 };
 
+const ScreenReaderAttachments = ({ activity, renderAttachments }) => {
+  const { attachments = [] } = activity;
+  const createAttachmentForScreenReaderRenderer = useCreateAttachmentForScreenReaderRenderer();
+  const localizeWithPlural = useLocalizer({ plural: true });
+
+  const attachmentForScreenReaderRenderers = renderAttachments
+    ? attachments
+        .map(attachment => createAttachmentForScreenReaderRenderer({ activity, attachment }))
+        .filter(render => render)
+    : [];
+
+  const numGenericAttachments = attachments.length - attachmentForScreenReaderRenderers.length;
+
+  const numAttachmentsAlt =
+    !!numGenericAttachments && localizeWithPlural(ACTIVITY_NUM_ATTACHMENTS_ALT_IDS, numGenericAttachments);
+
+  return (
+    <Fragment>
+      {!!attachmentForScreenReaderRenderers.length && (
+        <ul>
+          {attachmentForScreenReaderRenderers.map((render, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <li key={index}>{render()}</li>
+          ))}
+        </ul>
+      )}
+      {numAttachmentsAlt && <p>{numAttachmentsAlt}</p>}
+    </Fragment>
+  );
+};
+
+ScreenReaderAttachments.propTypes = {
+  activity: PropTypes.shape({
+    attachments: PropTypes.array
+  }).isRequired,
+  renderAttachments: PropTypes.bool.isRequired
+};
+
 // When "renderAttachments" is false, we will not render the content of attachments.
 // That means, it will only render "2 attachments", instead of "image attachment".
 // This is used in the visual transcript, where we render "Press ENTER to interact."
 const ScreenReaderActivity = ({ activity, children, id, renderAttachments }) => {
   const [{ initials: botInitials }] = useAvatarForBot();
-  const createAttachmentForScreenReaderRenderer = useCreateAttachmentForScreenReaderRenderer();
   const formatDate = useDateFormatter();
+  const getKeyByActivity = useGetKeyByActivity();
   const localize = useLocalizer();
-  const localizeWithPlural = useLocalizer({ plural: true });
+  const renderMarkdownAsHTML = useRenderMarkdownAsHTML();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+  const textAlt = useMemo(() => activityAltText(activity, renderMarkdownAsHTML), [activity, renderMarkdownAsHTML]);
 
-  const {
-    attachments = [],
-    channelData: { messageBack: { displayText: messageBackDisplayText } = {} } = {},
-    from: { role } = {},
-    text,
-    textFormat,
-    timestamp
-  } = activity;
+  const { channelData: { 'webchat:fallback-text': fallbackText } = {}, from: { role } = {}, timestamp } = activity;
 
   const fromUser = role === 'user';
-  const contentTypeMarkdown = textFormatToContentType(textFormat) === 'text/markdown';
-  const displayText = messageBackDisplayText || text;
 
-  const attachmentForScreenReaderRenderers = renderAttachments
-    ? attachments
-        .map(attachment => createAttachmentForScreenReaderRenderer({ activity, attachment }))
-        .filter(render => render)
-    : [];
-
-  const greetingAlt = (fromUser
-    ? localize('ACTIVITY_YOU_SAID_ALT')
-    : localize('ACTIVITY_BOT_SAID_ALT', botInitials || '')
+  const greetingAlt = (
+    fromUser ? localize('ACTIVITY_YOU_SAID_ALT') : localize('ACTIVITY_BOT_SAID_ALT', botInitials || '')
   ).replace(/\s{2,}/gu, ' ');
-  const numGenericAttachments = attachments.length - attachmentForScreenReaderRenderers.length;
 
-  const numAttachmentsAlt =
-    !!numGenericAttachments && localizeWithPlural(ACTIVITY_NUM_ATTACHMENTS_ALT_IDS, numGenericAttachments);
-  const textAlt = useStripMarkdown(contentTypeMarkdown && displayText) || displayText;
   const timestampAlt = localize('ACTIVITY_STATUS_SEND_STATUS_ALT_SENT_AT', formatDate(timestamp));
+  const labelId = useMemo(
+    () => `webchat__screen-reader-activity__label-${getKeyByActivity(activity)}`,
+    [activity, getKeyByActivity]
+  );
 
   return (
     <article
       aria-atomic={true}
+      // Narrator requires the "aria-labelledby" attribute, otherwise, it will only read "aria-roledescription".
+      // However, iOS VoiceOver and NVDA both ignore the "aria-labelledby" and read out the whole content, including timestamp.
+      aria-labelledby={labelId}
       aria-roledescription="message"
       className={classNames('webchat__screen-reader-activity', rootClassName)}
       // "id" attribute is used by `aria-labelledby`.
       // eslint-disable-next-line react/forbid-dom-props
       id={id}
-      role="region"
     >
-      <p>
+      {/* "id" attribute is used by `aria-labelledby`. */}
+      {/* eslint-disable-next-line react/forbid-dom-props */}
+      <p id={labelId}>
         <span>{greetingAlt}</span>
         <span>{textAlt}</span>
       </p>
-      {!!attachmentForScreenReaderRenderers.length && (
-        <ul>
-          {attachmentForScreenReaderRenderers.map((render, index) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <li key={index}>{render()}</li>
-          ))}
-        </ul>
-      )}
-      {numAttachmentsAlt && <p>{numAttachmentsAlt}</p>}
+      {!fallbackText && <ScreenReaderAttachments activity={activity} renderAttachments={renderAttachments} />}
       <p className="webchat__screen-reader-activity__timestamp">{timestampAlt}</p>
       {children}
     </article>

package/src/{ScreenReaderText.js → ScreenReaderText.tsx}

@@ -1,7 +1,9 @@
 /* eslint react/forbid-dom-props: ["off"] */
 
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { forwardRef } from 'react';
+
+import type { VFC } from 'react';
 
 import useStyleToEmotionObject from './hooks/internal/useStyleToEmotionObject';
 
@@ -21,21 +23,37 @@ const ROOT_STYLE = {
   width: 1
 };
 
-const ScreenReaderText = ({ id, text }) => {
-  const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
-
-  return (
-    <div className={rootClassName} id={id}>
-      {text}
-    </div>
-  );
+type ScreenReaderTextProps = {
+  'aria-hidden'?: boolean;
+  id?: string;
+  text: string;
 };
 
+const ScreenReaderText: VFC<ScreenReaderTextProps> = forwardRef<HTMLDivElement, ScreenReaderTextProps>(
+  ({ 'aria-hidden': ariaHidden, id, text }, ref) => {
+    const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
+
+    if (ariaHidden && !id) {
+      console.warn(
+        'botframework-webchat assertion: when "aria-hidden" is set, the screen reader text should be read by "aria-labelledby". Thus, "id" must be set.'
+      );
+    }
+
+    return (
+      <div aria-hidden={ariaHidden} className={rootClassName} id={id} ref={ref}>
+        {text}
+      </div>
+    );
+  }
+);
+
 ScreenReaderText.defaultProps = {
+  'aria-hidden': undefined,
   id: undefined
 };
 
 ScreenReaderText.propTypes = {
+  'aria-hidden': PropTypes.bool,
   id: PropTypes.string,
   text: PropTypes.string.isRequired
 };

package/src/SendBox/Assets/AttachmentIcon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const AttachmentIcon = () => (
-  <svg height={28} viewBox="0 0 25.75 46" width={28}>
+  <svg focusable={false} height={28} role="presentation" viewBox="0 0 25.75 46" width={28}>
     <path
       clipRule="evenodd"
       d="M20.75 11.75v21.37a7.69 7.69 0 0 1-.62 3.07 7.95 7.95 0 0 1-4.19 4.19 7.89 7.89 0 0 1-6.13 0 7.95 7.95 0 0 1-4.19-4.19 7.69 7.69 0 0 1-.62-3.07v-22.5a5.27 5.27 0 0 1 .45-2.17 5.69 5.69 0 0 1 3-3 5.48 5.48 0 0 1 4.35 0 5.69 5.69 0 0 1 3 3 5.27 5.27 0 0 1 .45 2.17v22.5a3.41 3.41 0 0 1-.26 1.32 3.31 3.31 0 0 1-1.8 1.8 3.46 3.46 0 0 1-2.63 0 3.31 3.31 0 0 1-1.8-1.8 3.41 3.41 0 0 1-.26-1.32V14h2.25v19.12a1.13 1.13 0 1 0 2.25 0v-22.5a3.4 3.4 0 0 0-.26-1.31 3.31 3.31 0 0 0-1.8-1.8 3.46 3.46 0 0 0-2.63 0 3.31 3.31 0 0 0-1.8 1.8 3.4 3.4 0 0 0-.26 1.31v22.5a5.32 5.32 0 0 0 .45 2.18 5.69 5.69 0 0 0 3 3 5.48 5.48 0 0 0 4.35 0 5.69 5.69 0 0 0 3-3 5.32 5.32 0 0 0 .45-2.18v-21.37z"

package/src/SendBox/Assets/MicrophoneIcon.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 // eslint-disable-next-line react/prop-types
 const MicrophoneIcon = ({ className }) => (
-  <svg className={className} height={28} viewBox="0 0 34.75 46" width={28}>
+  <svg className={className} focusable={false} height={28} role="presentation" viewBox="0 0 34.75 46" width={28}>
     <path
       className="a"
       d="M29.75,23v6.36a7,7,0,0,1-.56,2.78,7.16,7.16,0,0,1-3.8,3.8,7,7,0,0,1-2.78.56H18.5v2.25H23V41H11.75v-2.25h4.5V36.5h-4.11a7,7,0,0,1-2.78-.56,7.16,7.16,0,0,1-3.8-3.8,7,7,0,0,1-.56-2.78V23h2.25v6.36a4.72,4.72,0,0,0,.39,1.9,4.78,4.78,0,0,0,2.6,2.6,4.72,4.72,0,0,0,1.9.39h10.47a4.72,4.72,0,0,0,1.9-.39,4.78,4.78,0,0,0,2.6-2.6,4.72,4.72,0,0,0,.39-1.9V23Zm-18,5.62a1.13,1.13,0,0,0,1.13,1.13h9a1.13,1.13,0,0,0,1.12-1.13V8.38a1.13,1.13,0,0,0-1.12-1.13h-9a1.13,1.13,0,0,0-1.13,1.13Zm1.13,3.38a3.41,3.41,0,0,1-1.32-.26,3.31,3.31,0,0,1-1.8-1.8,3.41,3.41,0,0,1-.26-1.32V8.38a3.41,3.41,0,0,1,.26-1.32,3.31,3.31,0,0,1,1.8-1.8,3.41,3.41,0,0,1,1.32-.26h9a3.4,3.4,0,0,1,1.31.26,3.31,3.31,0,0,1,1.8,1.8,3.41,3.41,0,0,1,.26,1.32v20.24a3.41,3.41,0,0,1-.26,1.32,3.31,3.31,0,0,1-1.8,1.8,3.4,3.4,0,0,1-1.31.26Z"