From b49b64387a3ede6316d184a154d44118f8129770 Mon Sep 17 00:00:00 2001 From: Sofiya Huts Date: Wed, 23 Jan 2019 12:02:25 +0100 Subject: [PATCH 1/5] fix(ChatMessage): Author element should always be rendered --- src/components/Chat/ChatMessage.tsx | 3 +-- src/components/Dropdown/Dropdown.tsx | 12 ++---------- src/lib/accessibility/Styles/accessibilityStyles.ts | 13 +++++++++++++ .../teams/components/Chat/chatMessageStyles.ts | 3 ++- 4 files changed, 18 insertions(+), 13 deletions(-) create mode 100644 src/lib/accessibility/Styles/accessibilityStyles.ts diff --git a/src/components/Chat/ChatMessage.tsx b/src/components/Chat/ChatMessage.tsx index 93d1dc1e18..78d6fb4ccb 100644 --- a/src/components/Chat/ChatMessage.tsx +++ b/src/components/Chat/ChatMessage.tsx @@ -119,8 +119,7 @@ class ChatMessage extends UIComponent, ChatMessageS children ) : ( <> - {!mine && - Text.create(author, { defaultProps: { size: 'small', styles: styles.author } })} + {Text.create(author, { defaultProps: { size: 'small', styles: styles.author } })} {Text.create(timestamp, { defaultProps: { size: 'small', styles: styles.timestamp, timestamp: true }, })} diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index 4a83f59e53..f5766588d4 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/src/components/Dropdown/Dropdown.tsx @@ -39,6 +39,7 @@ import DropdownItem from './DropdownItem' import DropdownSelectedItem, { DropdownSelectedItemProps } from './DropdownSelectedItem' import DropdownSearchInput, { DropdownSearchInputProps } from './DropdownSearchInput' import Button from '../Button/Button' +import { screenReaderContainerStyles } from '../../lib/accessibility/Styles/accessibilityStyles' // TODO: To be replaced when Downshift will add highlightedItem in their interface. export interface A11yStatusMessageOptions extends DownshiftA11yStatusMessageOptions { @@ -554,16 +555,7 @@ export default class Dropdown extends AutoControlledComponent< statusDiv.setAttribute('role', 'status') statusDiv.setAttribute('aria-live', 'polite') statusDiv.setAttribute('aria-relevant', 'additions text') - Object.assign(statusDiv.style, { - border: '0', - clip: 'rect(0 0 0 0)', - height: '1px', - margin: '-1px', - overflow: 'hidden', - padding: '0', - position: 'absolute', - width: '1px', - }) + Object.assign(statusDiv.style, screenReaderContainerStyles) document.body.appendChild(statusDiv) } diff --git a/src/lib/accessibility/Styles/accessibilityStyles.ts b/src/lib/accessibility/Styles/accessibilityStyles.ts new file mode 100644 index 0000000000..9876a36d1d --- /dev/null +++ b/src/lib/accessibility/Styles/accessibilityStyles.ts @@ -0,0 +1,13 @@ +// Visually hides elements which remain visible for screen reader +import { ICSSInJSStyle } from '../../../themes/types' + +export const screenReaderContainerStyles: ICSSInJSStyle = { + border: '0', + clip: 'rect(0 0 0 0)', + height: '1px', + margin: '-1px', + overflow: 'hidden', + padding: '0', + position: 'absolute', + width: '1px', +} diff --git a/src/themes/teams/components/Chat/chatMessageStyles.ts b/src/themes/teams/components/Chat/chatMessageStyles.ts index cdcdca3554..6b4da386b9 100644 --- a/src/themes/teams/components/Chat/chatMessageStyles.ts +++ b/src/themes/teams/components/Chat/chatMessageStyles.ts @@ -1,6 +1,7 @@ import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types' import { ChatMessageProps } from '../../../../components/Chat/ChatMessage' import { ChatMessageVariables } from './chatMessageVariables' +import { screenReaderContainerStyles } from '../../../../lib/accessibility/Styles/accessibilityStyles' const chatMessageStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => ({ @@ -23,8 +24,8 @@ const chatMessageStyles: ComponentSlotStylesInput ({ - display: p.mine ? 'none' : undefined, marginRight: v.authorMargin, + ...(p.mine && screenReaderContainerStyles), }), content: ({ variables: v }): ICSSInJSStyle => ({ From 6d872f99aa887da2ee00558364e3af58cd89dc6f Mon Sep 17 00:00:00 2001 From: Sofiya Huts Date: Wed, 23 Jan 2019 12:22:37 +0100 Subject: [PATCH 2/5] fix(ChatMessage): Author element should always be rendered --- src/components/Chat/ChatMessage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Chat/ChatMessage.tsx b/src/components/Chat/ChatMessage.tsx index 78d6fb4ccb..0798d88f6b 100644 --- a/src/components/Chat/ChatMessage.tsx +++ b/src/components/Chat/ChatMessage.tsx @@ -102,7 +102,7 @@ class ChatMessage extends UIComponent, ChatMessageS unhandledProps, styles, }: RenderResultConfig) { - const { author, children, content, mine, timestamp } = this.props + const { author, children, content, timestamp } = this.props const childrenPropExists = childrenExist(children) const className = childrenPropExists ? cx(classes.root, classes.content) : classes.root From a5c04973d5c0d810a73612787300a5f5d5d199f7 Mon Sep 17 00:00:00 2001 From: Sofiya Huts Date: Wed, 23 Jan 2019 12:31:20 +0100 Subject: [PATCH 3/5] update chnagelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b2f3e36ffd..87732e28a8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Fix teams theme `Status` and `Chat.Message` styles ([#747](https://github.com/stardust-ui/react/pull/747)) - Fix `Popup` - do not stop event propagation when pressing Esc on trigger element @sophieH29 ([#750](https://github.com/stardust-ui/react/pull/750)) - Fix alignment of `Layout`'s `main` area @kuzhelov ([#752](https://github.com/stardust-ui/react/pull/752)) +- Fix `ChatMessage` - Author element should always be rendered @sophieH29 ([#761](https://github.com/stardust-ui/react/pull/761)) ### Features - Rename `Slot` component to `Box` and export it @Bugaa92 ([#713](https://github.com/stardust-ui/react/pull/713)) From f3939e81db16ccffed540f7dd8a03a213094b483 Mon Sep 17 00:00:00 2001 From: Sofiya Huts <8460706+sophieH29@users.noreply.github.com> Date: Wed, 23 Jan 2019 16:05:37 +0100 Subject: [PATCH 4/5] Update accessibilityStyles.ts --- src/lib/accessibility/Styles/accessibilityStyles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/accessibility/Styles/accessibilityStyles.ts b/src/lib/accessibility/Styles/accessibilityStyles.ts index 9876a36d1d..40ab608927 100644 --- a/src/lib/accessibility/Styles/accessibilityStyles.ts +++ b/src/lib/accessibility/Styles/accessibilityStyles.ts @@ -1,6 +1,6 @@ -// Visually hides elements which remain visible for screen reader import { ICSSInJSStyle } from '../../../themes/types' +// Visually hides elements which remain visible for screen reader export const screenReaderContainerStyles: ICSSInJSStyle = { border: '0', clip: 'rect(0 0 0 0)', From 678a6bf4e9b7949b530610bde78466c9719ae909 Mon Sep 17 00:00:00 2001 From: Sofiya Huts Date: Thu, 24 Jan 2019 10:09:29 +0100 Subject: [PATCH 5/5] Do not style author element from mine messages --- .../Chat/Types/ChatMessageExampleStyled.shorthand.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx index 63630850f6..bcb00906b0 100644 --- a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx +++ b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx @@ -51,7 +51,9 @@ const ChatMessageExampleStyled = () => ( }, ChatMessage: { root: { ...slotLabelStyles('chat-message-root'), backgroundColor: '#87CEFA' }, - author: { ...slotLabelStyles('author'), backgroundColor: '#E0FFFF' }, + author: ({ props: { mine } }) => ({ + ...(!mine && { ...slotLabelStyles('author'), backgroundColor: '#E0FFFF' }), + }), content: { ...slotLabelStyles('content'), backgroundColor: '#F08080' }, timestamp: { ...slotLabelStyles('timestamp'), backgroundColor: '#FFFFE0' }, },