fix(ChatMessage): Author element should always be rendered

CHANGELOG.md

@@ -26,6 +26,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix alignment of `Layout`'s `main` area @kuzhelov ([#752](https://github.com/stardust-ui/react/pull/752))
 - Forwarding props for `createShorthand` calls if the value is a React element @mnajdova ([#759](https://github.com/stardust-ui/react/pull/759))
 - Call `Popup` `onOpenChange` on all user initiated events @levithomason ([#619](https://github.com/stardust-ui/react/pull/619))
+- 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))

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' },
         },

src/components/Chat/ChatMessage.tsx

@@ -102,7 +102,7 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
     unhandledProps,
     styles,
   }: RenderResultConfig<ChatMessageProps>) {
-    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
 
@@ -119,8 +119,7 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, 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 },
             })}

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<Item> extends DownshiftA11yStatusMessageOptions<Item> {
@@ -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)
     }
 

src/lib/accessibility/Styles/accessibilityStyles.ts

@@ -0,0 +1,13 @@
+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)',
+  height: '1px',
+  margin: '-1px',
+  overflow: 'hidden',
+  padding: '0',
+  position: 'absolute',
+  width: '1px',
+}

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<ChatMessageProps, ChatMessageVariables> = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => ({
@@ -23,8 +24,8 @@ const chatMessageStyles: ComponentSlotStylesInput<ChatMessageProps, ChatMessageV
   }),
 
   author: ({ props: p, variables: v }): ICSSInJSStyle => ({
-    display: p.mine ? 'none' : undefined,
     marginRight: v.authorMargin,
+    ...(p.mine && screenReaderContainerStyles),
   }),
 
   content: ({ variables: v }): ICSSInJSStyle => ({