[Chat] Fixed Keyboard Focus Issues Related to File Sharing (#4735)

Author: jpeng-ms

packages/react-components/src/components/Attachment/AttachmentCard.tsx

@@ -136,20 +136,26 @@ export const _AttachmentCard = (props: _AttachmentCardProps): JSX.Element => {
                   target: '#attachment-' + attachment.id
                 }}
               >
-                <Text className={attachmentCardStyles.title} title={attachment.name}>
-                  {attachment.name}
-                </Text>
+                <div className={attachmentCardStyles.fileNameLabel}>
+                  <Text className={attachmentCardStyles.title} aria-label={attachment.name}>
+                    {attachment.name}
+                  </Text>
+                </div>
               </TooltipHost>
             </div>
           }
-          action={MappedMenuItems(
-            menuActions,
-            {
-              ...attachment,
-              url: attachment.url ?? ''
-            },
-            onActionHandlerFailed
-          )}
+          action={
+            <div className={attachmentCardStyles.focusState}>
+              {MappedMenuItems(
+                menuActions,
+                {
+                  ...attachment,
+                  url: attachment.url ?? ''
+                },
+                onActionHandlerFailed
+              )}
+            </div>
+          }
         />
       </Card>
       {isUploadInProgress ? (

packages/react-components/src/components/Attachment/AttachmentDownloadCards.tsx

@@ -8,8 +8,6 @@ import { useMemo } from 'react';
 import { useLocale } from '../../localization';
 import { _AttachmentCard } from './AttachmentCard';
 import { _AttachmentCardGroup, _AttachmentCardGroupLayout } from './AttachmentCardGroup';
-/* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */
-import { getAttachmentCountLiveMessage } from '../ChatMessage/ChatMessageContent';
 import { _formatString } from '@internal/acs-ui-common';
 import { AttachmentMenuAction } from '../../types/Attachment';
 import { AttachmentMetadata } from '@internal/acs-ui-common';
@@ -97,18 +95,6 @@ export const _AttachmentDownloadCards = (props: _AttachmentDownloadCardsProps):
     []
   );
 
-  const attachmentCardGroupDescription = useMemo(
-    () => () => {
-      /* @conditional-compile-remove(file-sharing-teams-interop) @conditional-compile-remove(file-sharing-acs) */
-      return getAttachmentCountLiveMessage(
-        attachments ?? [],
-        props.strings?.attachmentCardGroupMessage ?? localeStrings.attachmentCardGroupMessage
-      );
-      return '';
-    },
-    [props.strings?.attachmentCardGroupMessage, localeStrings.attachmentCardGroupMessage, attachments]
-  );
-
   const hasMultipleAttachments = useMemo(() => {
     return (props.attachments?.length ?? 0) > 1;
   }, [props.attachments]);
@@ -127,10 +113,7 @@ export const _AttachmentDownloadCards = (props: _AttachmentDownloadCardsProps):
       )}
       data-ui-id="attachment-download-card-group"
     >
-      <_AttachmentCardGroup
-        ariaLabel={attachmentCardGroupDescription()}
-        attachmentGroupLayout={_AttachmentCardGroupLayout.Grid}
-      >
+      <_AttachmentCardGroup attachmentGroupLayout={_AttachmentCardGroupLayout.Grid}>
         {attachments &&
           attachments.map((attachment) => (
             <_AttachmentCard

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

@@ -317,6 +317,7 @@ export const RichTextEditor = React.forwardRef<RichTextEditorComponentRef, RichT
       <div className={richTextEditorWrapperStyle(theme, !showRichTextEditorFormatting)}>
         {/* div that is used by Rooster JS as a parent of the editor */}
         <div
+          id="richTextSendBox"
           ref={editorDiv}
           tabIndex={0}
           role="textbox"

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

@@ -41,6 +41,16 @@ export const useAttachmentCardStyles = makeStyles({
   },
   title: {
     width: '100%'
+  },
+  focusState: {
+    '& > * button:focus': {
+      border: `black solid ${_pxToRem(1)}`
+    }
+  },
+  fileNameLabel: {
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflowX: 'clip'
   }
 });
 

packages/react-composites/src/composites/ChatComposite/ChatScreen.tsx

@@ -216,9 +216,30 @@ export const ChatScreen = (props: ChatScreenProps): JSX.Element => {
 
   const userId = toFlatCommunicationIdentifier(adapter.getState().userId);
 
+  /* @conditional-compile-remove(file-sharing-acs) */
+  const setKeyboardFocusAfterFileSelection = useCallback(() => {
+    // look up sendbox by ID for now, we will use `useRef`
+    // once attachment button is moved inside of send box component
+    // see ADO workitem #3764245
+    /* @conditional-compile-remove(rich-text-editor-composite-support) */
+    if (props.options?.richTextEditor) {
+      const richTextSendBox = document?.querySelector(`[id="richTextSendBox"]`) as HTMLDivElement;
+      richTextSendBox?.focus();
+      return;
+    }
+    const sendBox = document?.querySelector(`[id="sendbox"]`) as HTMLTextAreaElement;
+    // set send box on focus after file selection per A11y requirement
+    sendBox?.focus();
+  }, [
+    /* @conditional-compile-remove(rich-text-editor-composite-support) */
+    props.options?.richTextEditor
+  ]);
+
   /* @conditional-compile-remove(file-sharing-acs) */
   const attachmentUploadButtonOnChange = useCallback(
     (files: FileList | null): void => {
+      setKeyboardFocusAfterFileSelection();
+
       if (!files) {
         return;
       }
@@ -254,7 +275,7 @@ export const ChatScreen = (props: ChatScreenProps): JSX.Element => {
       handleUploadAction({ type: AttachmentUploadActionType.Set, newUploads });
       attachmentOptions?.uploadOptions?.handleAttachmentSelection(newUploads);
     },
-    [attachmentOptions?.uploadOptions]
+    [attachmentOptions?.uploadOptions, setKeyboardFocusAfterFileSelection]
   );
 
   /* @conditional-compile-remove(file-sharing-acs) */

packages/react-composites/src/composites/ChatComposite/file-sharing/AttachmentUploadButton.tsx

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 /* @conditional-compile-remove(file-sharing-acs) */
-import { IconButton, mergeStyles, Stack, useTheme } from '@fluentui/react';
+import { IconButton, mergeStyles, Stack, TooltipHost, useTheme } from '@fluentui/react';
 /* @conditional-compile-remove(file-sharing-acs) */
 import React from 'react';
 /* @conditional-compile-remove(file-sharing-acs) */
@@ -79,13 +79,20 @@ export const AttachmentUploadButton = (props: AttachmentUploadButtonProps): JSX.
           inputRef.current?.click();
         }}
       >
-        <IconButton className={iconButtonClassName} ariaLabel={uploadAttachmentButtonStringTrampoline()}>
-          <SendBoxAttachFileIconTrampoline />
-        </IconButton>
+        <TooltipHost content={uploadAttachmentButtonStringTrampoline()} data-ui-id="chat-composite-message-tooltip">
+          <IconButton
+            className={iconButtonClassName}
+            ariaLabel={uploadAttachmentButtonStringTrampoline()}
+            autoFocus={false}
+          >
+            <SendBoxAttachFileIconTrampoline />
+          </IconButton>
+        </TooltipHost>
       </Stack>
       <input
         data-testid="attachment-upload-button"
         ref={inputRef}
+        autoFocus={false}
         hidden
         multiple={!disableMultipleUploads}
         accept={supportedMediaTypes.join(',')}