@zohoim/chat-components 1.1.0-beta.1 → 1.1.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/assets/Appearance/dark/mode/General_DarkMode.module.css +0 -1
  2. package/assets/Appearance/light/mode/General_LightMode.module.css +0 -1
  3. package/assets/Appearance/pureDark/mode/General_PureDarkMode.module.css +0 -1
  4. package/es/ActionIconWrapper/ActionIconWrapper.js +4 -1
  5. package/es/AttachmentHandler/AttachmentHandler.js +3 -0
  6. package/es/Emoji/Emoji.js +4 -1
  7. package/es/EmojiPopup/EmojiPopup.js +4 -1
  8. package/es/EmojisHeader/css/EmojisHeader.module.css +0 -1
  9. package/es/MessageBubble/MessageBubble.js +20 -4
  10. package/package.json +4 -4
package/assets/Appearance/dark/mode/General_DarkMode.module.css CHANGED
@@ -1,7 +1,6 @@
1
1
  [data-zohoim-mode='dark'] {
2
2
  /* default colors */
3
3
  --imlib_chat_components_common_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
4
- --imlib_chat_components_primary_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
5
4
 
6
5
  /* integration colors */
7
6
  --imlib_chat_components_imIntegrationIcon_whatsapp_color: hsla(143, 70.85%, calc(48.43% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
package/assets/Appearance/light/mode/General_LightMode.module.css CHANGED
@@ -1,7 +1,6 @@
1
1
  [data-zohoim-mode='light'] {
2
2
  /* default colors */
3
3
  --imlib_chat_components_common_border: hsla(210, 33.33%, calc(94.12% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
4
- --imlib_chat_components_primary_text: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
5
4
 
6
5
  /* integration colors */
7
6
  --imlib_chat_components_imIntegrationIcon_whatsapp_color: hsla(143, 70.85%, calc(48.43% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
package/assets/Appearance/pureDark/mode/General_PureDarkMode.module.css CHANGED
@@ -1,7 +1,6 @@
1
1
  [data-zohoim-mode='pureDark'] {
2
2
  /* default colors */
3
3
  --imlib_chat_components_common_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
4
- --imlib_chat_components_primary_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
5
4
 
6
5
  /* integration colors */
7
6
  --imlib_chat_components_imIntegrationIcon_whatsapp_color: hsla(143, 70.85%, calc(48.43% + var(--zdc_darker_lower)), calc(1 + var(--zdc_alpha_low)));
package/es/ActionIconWrapper/ActionIconWrapper.js CHANGED
@@ -53,10 +53,13 @@ export default function ActionIconWrapper(props) {
53
53
  id
54
54
  });
55
55
  return icon ? /*#__PURE__*/React.createElement("div", {
56
+ "aria-label": title,
56
57
  className: actionIconWrapperClass,
57
58
  "data-title": title,
58
59
  onClick: onClick,
59
- onMouseEnter: onMouseEnter
60
+ onMouseEnter: onMouseEnter,
61
+ role: "menuitem",
62
+ tabIndex: 0
60
63
  }, icon) : null;
61
64
  }
62
65
  ActionIconWrapper.propTypes = actionIconWrapperPropTypes;
package/es/AttachmentHandler/AttachmentHandler.js CHANGED
@@ -71,6 +71,9 @@ export default function AttachmentHandler(props) {
71
71
  return /*#__PURE__*/React.createElement(Container, {
72
72
  alignBox: "column"
73
73
  }, customIcon || /*#__PURE__*/React.createElement(IconButton, {
74
+ a11y: {
75
+ ariaLabel: iconTitle
76
+ },
74
77
  className: newStyle.iconButton,
75
78
  iconClass: newStyle.icon,
76
79
  iconName: iconName,
package/es/Emoji/Emoji.js CHANGED
@@ -58,8 +58,11 @@ export default function Emoji(props) {
58
58
  });
59
59
  return /*#__PURE__*/React.createElement("span", {
60
60
  ref: eleRef,
61
+ "aria-label": title,
61
62
  className: emojiClass,
62
- onClick: onSelect
63
+ onClick: onSelect,
64
+ role: "button",
65
+ tabIndex: 0
63
66
  }, /*#__PURE__*/React.createElement("span", {
64
67
  className: newStyle.emojiContent,
65
68
  "data-smiley": emojiName,
package/es/EmojiPopup/EmojiPopup.js CHANGED
@@ -83,7 +83,10 @@ function EmojiPopupComp(props) {
83
83
  isActive: isPopupOpen,
84
84
  onClick: onTogglePopup,
85
85
  title: tooltip,
86
- ...iconProps
86
+ ...iconProps,
87
+ a11y: {
88
+ ariaLabel: tooltip
89
+ }
87
90
  }), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
88
91
  boxPosition: position,
89
92
  customClass: popupClass,
package/es/EmojisHeader/css/EmojisHeader.module.css CHANGED
@@ -24,7 +24,6 @@
24
24
 
25
25
  .searchIcon {
26
26
  position: absolute;
27
- color: var(--imlib_chat_components_primary_text);
28
27
  }
29
28
 
30
29
  [dir=ltr] .searchIcon {
package/es/MessageBubble/MessageBubble.js CHANGED
@@ -20,6 +20,7 @@ import { Box } from '@zohodesk/components/es/Layout';
20
20
  /** ** Styles *** */
21
21
 
22
22
  import style from "./css/MessageBubble.module.css";
23
+ import generateUniqueId from '@zohoim/chat-components-utils/es/common/generateUniqueId';
23
24
  export default function MessageBubble(props) {
24
25
  const {
25
26
  renderMessageBox,
@@ -39,7 +40,9 @@ export default function MessageBubble(props) {
39
40
  const {
40
41
  onMouseEnter,
41
42
  onMouseLeave,
42
- isRenderMessageActions
43
+ isRenderMessageActions,
44
+ onFocus,
45
+ onBlur
43
46
  } = useMessageBubbleAction(props);
44
47
  /* css classnames added based on logic */
45
48
 
@@ -67,7 +70,9 @@ export default function MessageBubble(props) {
67
70
  const messageActionsRenderer = useCallback(() => {
68
71
  const messageActions = isRenderMessageActions ? renderHandler(renderMessageActions)() : null;
69
72
  return messageActions ? /*#__PURE__*/React.createElement(Box, {
70
- className: messageActionWrapperClass
73
+ className: messageActionWrapperClass,
74
+ role: "button",
75
+ tabIndex: "0"
71
76
  }, messageActions) : null;
72
77
  }, [isRenderMessageActions, renderMessageActions, messageActionWrapperClass]);
73
78
  /* Message Box Render */
@@ -84,12 +89,16 @@ export default function MessageBubble(props) {
84
89
 
85
90
  const messageBox = useMemo(() => messageBoxRenderer(), [messageBoxRenderer]);
86
91
  const messageActions = useMemo(() => messageActionsRenderer(), [messageActionsRenderer]);
92
+ const uniqueId = generateUniqueId();
87
93
  const messageBoxWithActionsRenderer = useCallback(() => messageBox || messageActions ? /*#__PURE__*/React.createElement(Box, {
88
94
  className: newStyle.messageContainer
89
95
  }, /*#__PURE__*/React.createElement(Box, {
90
96
  className: newStyle.messageBoxWrapper,
91
97
  flexible: true
92
- }, messageBox, messageActions)) : null, [messageBox, messageActions, newStyle.messageContainer, newStyle.messageBoxWrapper]);
98
+ }, messageBox, /*#__PURE__*/React.createElement("div", {
99
+ id: uniqueId,
100
+ role: "menu"
101
+ }, messageActions))) : null, [messageBox, messageActions, newStyle.messageContainer, newStyle.messageBoxWrapper, uniqueId]);
93
102
  /* Message Footer Render */
94
103
 
95
104
  const messageFooterRenderer = useCallback(() => {
@@ -106,9 +115,16 @@ export default function MessageBubble(props) {
106
115
  /* Construct Layout */
107
116
 
108
117
  const messageLayout = /*#__PURE__*/React.createElement("div", {
118
+ "aria-controls": uniqueId,
119
+ "aria-expanded": isRenderMessageActions ? 'true' : 'false',
120
+ "aria-haspopup": "true",
109
121
  className: bubbleClass,
122
+ onBlur: onBlur,
123
+ onFocus: onFocus,
110
124
  onMouseEnter: onMouseEnter,
111
- onMouseLeave: onMouseLeave
125
+ onMouseLeave: onMouseLeave,
126
+ role: "button",
127
+ tabIndex: 0
112
128
  }, messageSender, messageBoxWithActions, messageFooter);
113
129
  return messageLayout;
114
130
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohoim/chat-components",
3
- "version": "1.1.0-beta.1",
3
+ "version": "1.1.0-beta.3",
4
4
  "description": "Chat Components",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",
@@ -42,8 +42,8 @@
42
42
  "@zohodesk/utils": "1.3.13",
43
43
  "@zohodesk/variables": "1.0.0",
44
44
  "@zohodesk/virtualizer": "1.0.13",
45
- "@zohoim/chat-components-hooks": "1.1.0-beta.1",
46
- "@zohoim/chat-components-utils": "1.1.0-beta.1"
45
+ "@zohoim/chat-components-hooks": "1.1.0-beta.3",
46
+ "@zohoim/chat-components-utils": "1.1.0-beta.3"
47
47
  },
48
48
  "devDependencies": {
49
49
  "@zohodesk-private/color-variable-preprocessor": "1.2.1",
@@ -52,5 +52,5 @@
52
52
  "jsdom": "23.0.0",
53
53
  "react-to-jsx": "1.3.2"
54
54
  },
55
- "gitHead": "89aa900b07687ba5bb8f0d5827427df60aa81f49"
55
+ "gitHead": "25fbf56d52e441403dd3dc68ea232ee6b9db5cb4"
56
56
  }