Skip to content

Commit db415f0

Browse files
AmyL219JoshuaLai
AmyL219
and
JoshuaLai
authored
[Accessibility][MessageThread]Embed the EditBox inside a Chat.Message to enable the Accessibility (#3097)
* Embed the EditBox inside a Chat.Message to enable the accessibility * Fix the editBox width with attached file * [ChatMessageComponentAsEditBox] updating import statement --------- Co-authored-by: Josh Lai <joshlai@microsoft.com>
1 parent f23096b commit db415f0

4 files changed

Lines changed: 89 additions & 59 deletions

File tree

‎change-beta/@azure-communication-react-d4668387-b268-47bb-85bc-44a6af574102.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "Embed the EditBox inside a Chat.Message to enable the accessibility",
4+
"packageName": "@azure/communication-react",
5+
"email": "longamy@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

‎change/@azure-communication-react-d4668387-b268-47bb-85bc-44a6af574102.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "Embed the EditBox inside a Chat.Message to enable the accessibility",
4+
"packageName": "@azure/communication-react",
5+
"email": "longamy@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

‎packages/react-components/src/components/ChatMessage/ChatMessageComponentAsEditBox.tsx‎

Lines changed: 64 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
// Licensed under the MIT license.
33

44
import { concatStyleSets, Icon, ITextField, mergeStyles, Stack } from '@fluentui/react';
5+
import { Chat } from '@internal/northstar-wrapper';
56
import { _formatString } from '@internal/acs-ui-common';
67
import { useTheme } from '../../theming/FluentThemeProvider';
78
import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -13,7 +14,7 @@ import { borderAndBoxShadowStyle } from '../styles/SendBox.styles';
1314
import { ChatMessage } from '../../types';
1415
import { _FileUploadCards } from '../FileUploadCards';
1516
import { FileMetadata } from '../FileDownloadCards';
16-
import { chatMessageFailedTagStyle } from '../styles/ChatMessageComponent.styles';
17+
import { chatMessageFailedTagStyle, chatMessageEditContainerStyle } from '../styles/ChatMessageComponent.styles';
1718
/* @conditional-compile-remove(mention) */
1819
import { MentionLookupOptions } from '../MentionPopover';
1920

@@ -114,70 +115,74 @@ export const ChatMessageComponentAsEditBox = (props: ChatMessageComponentAsEditB
114115
);
115116
}, [attachedFilesMetadata]);
116117

117-
return (
118-
<Stack
119-
className={mergeStyles(
120-
borderAndBoxShadowStyle({
121-
theme,
122-
hasErrorMessage: message.failureReason !== undefined,
123-
disabled: false
124-
})
125-
)}
126-
>
127-
<InputBoxComponent
128-
inlineChildren={props.inlineEditButtons}
129-
id={'editbox'}
130-
textFieldRef={editTextFieldRef}
131-
inputClassName={editBoxStyle(props.inlineEditButtons)}
132-
placeholderText={strings.editBoxPlaceholderText}
133-
textValue={textValue}
134-
onChange={setText}
135-
onEnterKeyDown={() => {
136-
submitEnabled &&
137-
onSubmit(textValue, message.metadata, {
138-
attachedFilesMetadata
139-
});
140-
}}
141-
supportNewline={false}
142-
maxLength={MAXIMUM_LENGTH_OF_MESSAGE}
143-
errorMessage={textTooLongMessage}
144-
styles={editBoxStyles}
145-
/* @conditional-compile-remove(mention) */
146-
mentionLookupOptions={mentionLookupOptions}
118+
const getContent = (): JSX.Element => {
119+
return (
120+
<Stack
121+
className={mergeStyles(
122+
borderAndBoxShadowStyle({
123+
theme,
124+
hasErrorMessage: message.failureReason !== undefined,
125+
disabled: false
126+
})
127+
)}
147128
>
148-
<InputBoxButton
149-
className={editingButtonStyle}
150-
ariaLabel={strings.editBoxCancelButton}
151-
tooltipContent={strings.editBoxCancelButton}
152-
onRenderIcon={onRenderThemedCancelIcon}
153-
onClick={() => {
154-
onCancel && onCancel(message.messageId);
155-
}}
156-
id={'dismissIconWrapper'}
157-
/>
158-
<InputBoxButton
159-
className={editingButtonStyle}
160-
ariaLabel={strings.editBoxSubmitButton}
161-
tooltipContent={strings.editBoxSubmitButton}
162-
onRenderIcon={onRenderThemedSubmitIcon}
163-
onClick={(e) => {
129+
<InputBoxComponent
130+
inlineChildren={props.inlineEditButtons}
131+
id={'editbox'}
132+
textFieldRef={editTextFieldRef}
133+
inputClassName={editBoxStyle(props.inlineEditButtons)}
134+
placeholderText={strings.editBoxPlaceholderText}
135+
textValue={textValue}
136+
onChange={setText}
137+
onEnterKeyDown={() => {
164138
submitEnabled &&
165139
onSubmit(textValue, message.metadata, {
166140
attachedFilesMetadata
167141
});
168-
e.stopPropagation();
169142
}}
170-
id={'submitIconWrapper'}
171-
/>
172-
</InputBoxComponent>
173-
{message.failureReason && (
174-
<div className={mergeStyles(chatMessageFailedTagStyle(theme), { padding: '0.5rem' })}>
175-
{message.failureReason}
176-
</div>
177-
)}
178-
{onRenderFileUploads()}
179-
</Stack>
180-
);
143+
supportNewline={false}
144+
maxLength={MAXIMUM_LENGTH_OF_MESSAGE}
145+
errorMessage={textTooLongMessage}
146+
styles={editBoxStyles}
147+
/* @conditional-compile-remove(mention) */
148+
mentionLookupOptions={mentionLookupOptions}
149+
>
150+
<InputBoxButton
151+
className={editingButtonStyle}
152+
ariaLabel={strings.editBoxCancelButton}
153+
tooltipContent={strings.editBoxCancelButton}
154+
onRenderIcon={onRenderThemedCancelIcon}
155+
onClick={() => {
156+
onCancel && onCancel(message.messageId);
157+
}}
158+
id={'dismissIconWrapper'}
159+
/>
160+
<InputBoxButton
161+
className={editingButtonStyle}
162+
ariaLabel={strings.editBoxSubmitButton}
163+
tooltipContent={strings.editBoxSubmitButton}
164+
onRenderIcon={onRenderThemedSubmitIcon}
165+
onClick={(e) => {
166+
submitEnabled &&
167+
onSubmit(textValue, message.metadata, {
168+
attachedFilesMetadata
169+
});
170+
e.stopPropagation();
171+
}}
172+
id={'submitIconWrapper'}
173+
/>
174+
</InputBoxComponent>
175+
{message.failureReason && (
176+
<div className={mergeStyles(chatMessageFailedTagStyle(theme), { padding: '0.5rem' })}>
177+
{message.failureReason}
178+
</div>
179+
)}
180+
{onRenderFileUploads()}
181+
</Stack>
182+
);
183+
};
184+
185+
return <Chat.Message styles={chatMessageEditContainerStyle} content={getContent()} />;
181186
};
182187

183188
const isMessageTooLong = (messageText: string): boolean => messageText.length > MAXIMUM_LENGTH_OF_MESSAGE;

‎packages/react-components/src/components/styles/ChatMessageComponent.styles.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,17 @@ export const chatMessageMenuStyle = mergeStyles({
7676
overflow: 'hidden'
7777
});
7878

79+
/**
80+
* @private
81+
*/
82+
export const chatMessageEditContainerStyle = {
83+
margin: 0,
84+
padding: 0,
85+
maxWidth: 'unset',
86+
minWidth: 'unset',
87+
backgroundColor: 'transparent'
88+
};
89+
7990
/**
8091
* Styles that can be applied to ensure flyout items have the minimum touch target size.
8192
*

0 commit comments

Comments
 (0)
⚡