Alcail/chat message contextMenu and editBox accessible through keyboard

change/@internal-react-components-82a7c7ac-d8e3-47f3-a575-b04d4805f914.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "added ariaLabel in InputBoxButtonProps and strings for EditBox buttons in MessageThreadStrings",
+  "packageName": "@internal/react-components",
+  "email": "alcail@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@internal-react-composites-3f9cad25-1fdf-4e41-8b7d-376f9570d2a1.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "updated Sendbox and EditBox styles",
+  "packageName": "@internal/react-composites",
+  "email": "alcail@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@internal-storybook-36aa626b-f239-4863-b19d-493e835f7753.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "updated Sendbox custom styles",
+  "packageName": "@internal/storybook",
+  "email": "alcail@microsoft.com",
+  "dependentChangeType": "none"
+}

packages/communication-react/review/communication-react.api.md

@@ -1208,6 +1208,7 @@ export type InputBoxButtonProps = {
     onClick: (e: React_2.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     className?: string;
     id?: string;
+    ariaLabel?: string;
 };
 
 // @public
@@ -1485,7 +1486,9 @@ export type MessageThreadSelector = (state: ChatClientState, props: ChatBaseSele
 
 // @public
 export interface MessageThreadStrings {
+    editBoxCancelButton: string;
     editBoxPlaceholderText: string;
+    editBoxSubmitButton: string;
     editBoxTextLimit: string;
     editedTag: string;
     editMessage: string;

packages/react-components/review/react-components.api.md

@@ -382,6 +382,7 @@ export type InputBoxButtonProps = {
     onClick: (e: React_2.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     className?: string;
     id?: string;
+    ariaLabel?: string;
 };
 
 // @public
@@ -477,7 +478,9 @@ export type MessageThreadProps = {
 
 // @public
 export interface MessageThreadStrings {
+    editBoxCancelButton: string;
     editBoxPlaceholderText: string;
+    editBoxSubmitButton: string;
     editBoxTextLimit: string;
     editedTag: string;
     editMessage: string;

packages/react-components/src/components/ChatMessageComponent.tsx

@@ -98,6 +98,7 @@ export const ChatMessageComponent = (props: ChatMessageProps): JSX.Element => {
 
   const { message, onUpdateMessage, onDeleteMessage, disableEditing, showDate, messageContainerStyle, strings } = props;
   const [isEditing, setIsEditing] = useState(false);
+  const [hideContextMenu, setHideContextMenu] = useState<boolean>(true);
 
   const longPressProps = useLongPress(() => console.log('Long press finished'), {
     captureEvent: true,
@@ -114,16 +115,21 @@ export const ChatMessageComponent = (props: ChatMessageProps): JSX.Element => {
       iconOnly: true,
       activeIndex: -1,
       className: menuClass,
+      onItemClick: () => {
+        setHideContextMenu(false);
+      },
       items: [
         {
           children: (
             <MoreMenu
+              hideContextMenu={hideContextMenu}
               onEditClick={() => {
                 setIsEditing(true);
               }}
               onRemoveClick={async () => {
                 onDeleteMessage && message.messageId && (await onDeleteMessage(message.messageId));
               }}
+              onDismiss={() => setHideContextMenu(true)}
               strings={strings}
             />
           ),
@@ -133,7 +139,7 @@ export const ChatMessageComponent = (props: ChatMessageProps): JSX.Element => {
         }
       ]
     }),
-    [menuClass, message.messageId, onDeleteMessage, strings]
+    [menuClass, message.messageId, onDeleteMessage, strings, hideContextMenu]
   );
 
   if (message.messageType !== 'chat') {
@@ -188,16 +194,19 @@ export const ChatMessageComponent = (props: ChatMessageProps): JSX.Element => {
 };
 
 const MoreMenu = ({
+  hideContextMenu,
   onEditClick,
   onRemoveClick,
+  onDismiss,
   strings
 }: {
+  hideContextMenu: boolean;
   onEditClick: () => void;
   onRemoveClick: () => void;
+  onDismiss: () => void;
   strings: MessageThreadStrings;
 }): JSX.Element => {
   const menuRef = useRef<HTMLDivElement | null>(null);
-  const [menuHidden, setMenuHidden] = useState(true);
 
   const menuItems = useMemo(
     (): IContextualMenuItem[] => [
@@ -224,16 +233,15 @@ const MoreMenu = ({
     <div ref={menuRef}>
       <MoreIcon
         className={iconWrapperStyle}
-        onClick={() => setMenuHidden(false)}
         {...{
           outline: true
         }}
       />
       <ContextualMenu
         items={menuItems}
-        hidden={menuHidden}
+        hidden={hideContextMenu}
         target={menuRef}
-        onDismiss={() => setMenuHidden(true)}
+        onDismiss={() => onDismiss()}
         directionalHint={DirectionalHint.bottomLeftEdge}
         className={chatMessageMenuStyle}
       />

packages/react-components/src/components/EditBox.tsx

@@ -1,10 +1,10 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { concatStyleSets, Icon, mergeStyles } from '@fluentui/react';
+import { concatStyleSets, Icon, ITextField, mergeStyles } from '@fluentui/react';
 import { _formatString } from '@internal/acs-ui-common';
 import { useTheme } from '../theming/FluentThemeProvider';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { editBoxStyle, inputBoxIcon, editingButtonStyle, editBoxStyleSet } from './styles/EditBox.styles';
 import { InputBoxButton, InputBoxComponent } from './InputBoxComponent';
@@ -39,8 +39,13 @@ export const EditBox = (props: EditBoxProps): JSX.Element => {
   const { onCancel, onSubmit, initialValue, strings } = props;
   const [textValue, setTextValue] = useState<string>(initialValue);
   const [textValueOverflow, setTextValueOverflow] = useState(false);
+  const editTextFieldRef = React.useRef<ITextField>(null);
   const theme = useTheme();
 
+  useEffect(() => {
+    editTextFieldRef.current?.focus();
+  }, []);
+
   const setText = (
     event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
     newValue?: string | undefined
@@ -75,6 +80,8 @@ export const EditBox = (props: EditBoxProps): JSX.Element => {
 
   return (
     <InputBoxComponent
+      id={'editbox'}
+      textFieldRef={editTextFieldRef}
       inputClassName={editBoxStyle}
       placeholderText={strings.editBoxPlaceholderText}
       textValue={textValue}
@@ -89,6 +96,7 @@ export const EditBox = (props: EditBoxProps): JSX.Element => {
     >
       <InputBoxButton
         className={editingButtonStyle}
+        ariaLabel={strings.editBoxCancelButton}
         onRenderIcon={onRenderThemedCancelIcon}
         onClick={() => {
           onCancel && onCancel();
@@ -97,6 +105,7 @@ export const EditBox = (props: EditBoxProps): JSX.Element => {
       />
       <InputBoxButton
         className={editingButtonStyle}
+        ariaLabel={strings.editBoxSubmitButton}
         onRenderIcon={onRenderThemedSubmitIcon}
         onClick={(e) => {
           if (!textValueOverflow && textValue !== '') {

packages/react-components/src/components/InputBoxComponent.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 
 import React, { useState, ReactNode, FormEvent, useCallback } from 'react';
-import { Stack, TextField, mergeStyles, IStyle, ITextField, concatStyleSets } from '@fluentui/react';
+import { Stack, TextField, mergeStyles, IStyle, ITextField, concatStyleSets, IconButton } from '@fluentui/react';
 import { BaseCustomStyles } from '../types';
 import {
   inputBoxStyle,
@@ -130,28 +130,29 @@ export type InputBoxButtonProps = {
   onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   className?: string;
   id?: string;
+  ariaLabel?: string;
 };
 
 /**
  * @private
  */
 export const InputBoxButton = (props: InputBoxButtonProps): JSX.Element => {
-  const { onRenderIcon, onClick, className, id } = props;
-  const [isMouseOverSendIcon, setIsMouseOverSendIcon] = useState(false);
+  const { onRenderIcon, onClick, ariaLabel, className, id } = props;
+  const [isMouseOverIcon, setIsMouseOverIcon] = useState(false);
   const mergedButtonStyle = mergeStyles(inputButtonStyle, className);
   return (
-    <div
+    <IconButton
       className={mergedButtonStyle}
+      ariaLabel={ariaLabel}
       onClick={onClick}
       id={id}
       onMouseEnter={() => {
-        setIsMouseOverSendIcon(true);
+        setIsMouseOverIcon(true);
       }}
       onMouseLeave={() => {
-        setIsMouseOverSendIcon(false);
+        setIsMouseOverIcon(false);
       }}
-    >
-      {onRenderIcon(props, isMouseOverSendIcon)}
-    </div>
+      onRenderIcon={() => onRenderIcon(props, isMouseOverIcon)}
+    />
   );
 };

packages/react-components/src/components/MessageThread.tsx

@@ -179,6 +179,10 @@ export interface MessageThreadStrings {
   newMessagesIndicator: string;
   /** String for replacing display name when there is none*/
   noDisplayNameSub: string;
+  /** String for Cancel button in EditBox*/
+  editBoxCancelButton: string;
+  /** String for Submit in EditBox when there is no user input*/
+  editBoxSubmitButton: string;
 }
 
 /**

packages/react-components/src/components/styles/InputBoxComponent.style.ts

@@ -78,14 +78,12 @@ export const textFieldStyle = (errorColor: string, hasErrorMessage: boolean, dis
  */
 export const inputButtonStyle = mergeStyles({
   color: 'grey',
-  cursor: 'pointer',
-  display: 'flex',
-  justifyContent: 'center',
   margin: 'auto',
-  top: '0',
-  bottom: '0',
   width: '1.0625rem',
-  height: '1.0625rem'
+  height: '1.0625rem',
+  '&:hover': {
+    backgroundColor: 'transparent'
+  }
 });
 
 /**
@@ -94,6 +92,7 @@ export const inputButtonStyle = mergeStyles({
 export const inputButtonContainerStyle = (rtl?: boolean): string =>
   mergeStyles({
     display: 'flex',
+    alignItems: 'baseline',
     justifyContent: 'center',
     position: 'absolute',
     margin: 'auto',

packages/react-components/src/components/styles/SendBox.styles.ts

@@ -31,8 +31,7 @@ export const sendBoxStyle = mergeStyles({
  * @private
  */
 export const sendButtonStyle = mergeStyles({
-  margin: 'auto .6rem',
-  paddingBottom: '1.125rem'
+  margin: '.6rem'
 });
 
 /**

packages/react-components/src/localization/locales/en-US/strings.json

@@ -72,7 +72,9 @@
     "editBoxTextLimit": "Your message is over the limit of {limitNumber} characters",
     "editBoxPlaceholderText": "Edit your message",
     "newMessagesIndicator": "New messages",
-    "noDisplayNameSub": "No name"
+    "noDisplayNameSub": "No name",
+    "editBoxCancelButton": "Cancel",
+    "editBoxSubmitButton": "Submit"
   },
   "errorBar": {
     "unableToReachChatService": "You are offline",

packages/storybook/stories/SendBox/__snapshots__/SendBox.stories.storyshot

@@ -62,37 +62,49 @@ exports[`storybook snapshot tests Storyshots UI Components/Send Box Send Box 1`]
             <div
               className="css-4"
             >
-              <div
-                className="css-64 css-59"
+              <button
+                className="ms-Button ms-Button--icon css-64 css-59 root-19"
+                data-is-focusable={true}
                 id="sendIconWrapper"
                 onClick={[Function]}
+                onKeyDown={[Function]}
+                onKeyPress={[Function]}
+                onKeyUp={[Function]}
+                onMouseDown={[Function]}
                 onMouseEnter={[Function]}
                 onMouseLeave={[Function]}
+                onMouseUp={[Function]}
+                type="button"
               >
-                <i
-                  aria-hidden={true}
-                  className="root-37 css-60 root-19"
-                  data-icon-name="SendBoxSend"
+                <span
+                  className="ms-Button-flexContainer flexContainer-20"
+                  data-automationid="splitbuttonprimary"
                 >
-                  <span
+                  <i
                     aria-hidden={true}
-                    className="root-span"
+                    className="root-37 css-60 root-27"
+                    data-icon-name="SendBoxSend"
                   >
-                    <svg
-                      className="svg"
-                      fill="currentColor"
-                      height={20}
-                      viewBox="0 0 20 20"
-                      width={20}
-                      xmlns="http://www.w3.org/2000/svg"
+                    <span
+                      aria-hidden={true}
+                      className="root-span"
                     >
-                      <path
-                        d="M2.72 2.05l15.36 7.57a.5.5 0 010 .9L2.72 18.07a.5.5 0 01-.7-.58l1.97-7.43-1.97-7.44a.5.5 0 01.7-.58zm.54 1.38l1.61 6.09.07-.02H12a.5.5 0 01.09 1H5a.5.5 0 01-.1 0l-1.63 6.2 13.45-6.63L3.26 3.43z"
-                      />
-                    </svg>
-                  </span>
-                </i>
-              </div>
+                      <svg
+                        className="svg"
+                        fill="currentColor"
+                        height={20}
+                        viewBox="0 0 20 20"
+                        width={20}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M2.72 2.05l15.36 7.57a.5.5 0 010 .9L2.72 18.07a.5.5 0 01-.7-.58l1.97-7.43-1.97-7.44a.5.5 0 01.7-.58zm.54 1.38l1.61 6.09.07-.02H12a.5.5 0 01.09 1H5a.5.5 0 01-.1 0l-1.63 6.2 13.45-6.63L3.26 3.43z"
+                        />
+                      </svg>
+                    </span>
+                  </i>
+                </span>
+              </button>
             </div>
           </div>
         </div>

packages/storybook/stories/SendBox/snippets/CustomIcon.snippet.tsx

@@ -12,6 +12,7 @@ export const CustomIconExample: () => JSX.Element = () => (
         onTyping={async () => {
           return;
         }}
+        styles={{ sendMessageIconContainer: { marginTop: '0.65rem' } }}
         onRenderIcon={() => <Icon iconName="AirplaneSolid" />}
       />
     </div>