@zohoim/chat-components 1.1.3 → 1.1.4

package/README.md

@@ -10,6 +10,10 @@ In this Library, We Provide Some Basic Message Components to Build Your Chat App
 
 > import MessageBubble from '@zohoim/chat-components/es/MessageBubble/MessageBubble’;
 
+# 1.1.4
+
+- A11y related props and functionalities added
+
 # 1.1.3
 
 - Editor line break issue fix

package/es/ActionIconWrapper/ActionIconWrapper.js

@@ -53,10 +53,14 @@ export default function ActionIconWrapper(props) {
     id
   });
   return icon ? /*#__PURE__*/React.createElement("div", {
+    "aria-label": title,
     className: actionIconWrapperClass,
+    "data-a11y-focus": "true",
     "data-title": title,
     onClick: onClick,
-    onMouseEnter: onMouseEnter
+    onMouseEnter: onMouseEnter,
+    role: "menuitem",
+    tabIndex: 0
   }, icon) : null;
 }
 ActionIconWrapper.propTypes = actionIconWrapperPropTypes;

package/es/AttachmentHandler/AttachmentHandler.js

@@ -71,6 +71,9 @@ export default function AttachmentHandler(props) {
   return /*#__PURE__*/React.createElement(Container, {
     alignBox: "column"
   }, customIcon || /*#__PURE__*/React.createElement(IconButton, {
+    a11y: {
+      ariaLabel: iconTitle
+    },
     className: newStyle.iconButton,
     iconClass: newStyle.icon,
     iconName: iconName,

package/es/Emoji/Emoji.js

@@ -58,8 +58,12 @@ export default function Emoji(props) {
   });
   return /*#__PURE__*/React.createElement("span", {
     ref: eleRef,
+    "aria-label": title,
     className: emojiClass,
-    onClick: onSelect
+    "data-a11y-focus": "true",
+    onClick: onSelect,
+    role: "button",
+    tabIndex: 0
   }, /*#__PURE__*/React.createElement("span", {
     className: newStyle.emojiContent,
     "data-smiley": emojiName,

package/es/EmojiPopup/EmojiPopup.js

@@ -75,6 +75,9 @@ function EmojiPopupComp(props) {
   return /*#__PURE__*/React.createElement(Container, {
     alignBox: "column"
   }, /*#__PURE__*/React.createElement(IconButton, {
+    a11y: {
+      ariaLabel: tooltip
+    },
     className: newStyle.iconWrapper,
     eleRef: getTargetRef,
     iconClass: newStyle.icon,

package/es/EmojiPopup/css/EmojiPopup.module.css

@@ -47,9 +47,4 @@
 
 .icon :global .path2:before {
   color: var(--imlib_chat_components_twotone_icon_border) !important;
-}
-
-.icon :global .path2{
-  position: relative;
-  z-index: 1;
 }

package/es/EmojisFooter/css/EmojisFooter.module.css

@@ -4,7 +4,6 @@
 }
 
 .tabIcon {
-  /* padding: var(--zd_size10) var(--zd_size16); */
   position: relative;
   height: var(--zd_size35) ;
   display: flex;
@@ -36,5 +35,5 @@
   width: auto ;
   height: auto ;
   margin: 0 ;
-  padding: 8% ;
+  padding: 0 8% ;
 }

package/es/MessageActions/MessageActions.js

@@ -29,7 +29,8 @@ export default function MessageActions(props) {
     setRetainMessageActions,
     renderSecondaryActions,
     customStyle,
-    customProps
+    customProps,
+    moreTitle
   } = props;
   const {
     messageActionProps = dummyObject,
@@ -106,9 +107,10 @@ export default function MessageActions(props) {
   }, /*#__PURE__*/React.createElement(MoreIcon, null)), [newStyle.moreIcon]);
   const renderMore = useCallback(componentProps => /*#__PURE__*/React.createElement(ActionIconWrapper, {
     renderIcon: renderMoreIcon,
+    title: moreTitle,
     ...componentProps,
     ...actionIconWrapperProps
-  }), [actionIconWrapperProps, renderMoreIcon]);
+  }), [actionIconWrapperProps, renderMoreIcon, moreTitle]);
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MessageActionsWrapper, {
     actions: allActions,
     defaultShowCount: defaultShowCount,

package/es/MessageActions/props/propTypes.js

@@ -21,6 +21,7 @@ const messageActionsPropTypes = {
   customStyle: PropTypes.object,
   defaultShowCount: PropTypes.number,
   renderSecondaryActions: PropTypes.func,
-  setRetainMessageActions: PropTypes.func
+  setRetainMessageActions: PropTypes.func,
+  moreTitle: PropTypes.string
 };
 export default messageActionsPropTypes;

package/es/MessageBubble/MessageBubble.js

@@ -20,6 +20,7 @@ import { Box } from '@zohodesk/components/es/Layout';
 /** ** Styles *** */
 
 import style from "./css/MessageBubble.module.css";
+import generateUniqueId from '@zohoim/chat-components-utils/es/common/generateUniqueId';
 export default function MessageBubble(props) {
   const {
     renderMessageBox,
@@ -39,7 +40,9 @@ export default function MessageBubble(props) {
   const {
     onMouseEnter,
     onMouseLeave,
-    isRenderMessageActions
+    isRenderMessageActions,
+    onFocus,
+    onBlur
   } = useMessageBubbleAction(props);
   /* css classnames added based on logic */
 
@@ -67,7 +70,9 @@ export default function MessageBubble(props) {
   const messageActionsRenderer = useCallback(() => {
     const messageActions = isRenderMessageActions ? renderHandler(renderMessageActions)() : null;
     return messageActions ? /*#__PURE__*/React.createElement(Box, {
-      className: messageActionWrapperClass
+      className: messageActionWrapperClass,
+      role: "button",
+      tabIndex: "0"
     }, messageActions) : null;
   }, [isRenderMessageActions, renderMessageActions, messageActionWrapperClass]);
   /* Message Box Render */
@@ -84,12 +89,16 @@ export default function MessageBubble(props) {
 
   const messageBox = useMemo(() => messageBoxRenderer(), [messageBoxRenderer]);
   const messageActions = useMemo(() => messageActionsRenderer(), [messageActionsRenderer]);
+  const uniqueId = generateUniqueId();
   const messageBoxWithActionsRenderer = useCallback(() => messageBox || messageActions ? /*#__PURE__*/React.createElement(Box, {
     className: newStyle.messageContainer
   }, /*#__PURE__*/React.createElement(Box, {
     className: newStyle.messageBoxWrapper,
     flexible: true
-  }, messageBox, messageActions)) : null, [messageBox, messageActions, newStyle.messageContainer, newStyle.messageBoxWrapper]);
+  }, messageBox, /*#__PURE__*/React.createElement("div", {
+    id: uniqueId,
+    role: "menu"
+  }, messageActions))) : null, [messageBox, messageActions, newStyle.messageContainer, newStyle.messageBoxWrapper, uniqueId]);
   /* Message Footer Render */
 
   const messageFooterRenderer = useCallback(() => {
@@ -106,9 +115,16 @@ export default function MessageBubble(props) {
   /* Construct Layout */
 
   const messageLayout = /*#__PURE__*/React.createElement("div", {
+    "aria-controls": uniqueId,
+    "aria-expanded": isRenderMessageActions ? 'true' : 'false',
+    "aria-haspopup": "true",
     className: bubbleClass,
+    onBlur: onBlur,
+    onFocus: onFocus,
     onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
+    onMouseLeave: onMouseLeave,
+    role: "button",
+    tabIndex: 0
   }, messageSender, messageBoxWithActions, messageFooter);
   return messageLayout;
 }

package/es/MoreActionItem/MoreActionItem.js

@@ -50,6 +50,10 @@ export default function MoreActionItem(props) {
     id
   });
   return /*#__PURE__*/React.createElement(ListContainer, {
+    a11y: {
+      'data-a11y-focus': true,
+      'data-a11y-click': true
+    },
     autoHover: true,
     customClass: newStyle.listItem,
     disableTitle: title,

package/es/TextBubble/TextBubble.js

@@ -39,9 +39,12 @@ export default function TextBubble(props) {
       // __html: HTMLPurifier.sanitize(message)
       __html: message
     }
-  }), moreText ? /*#__PURE__*/React.createElement("div", {
+  }), moreText ? /*#__PURE__*/React.createElement("button", {
     className: moreTextClass,
-    onClick: onClickMore
+    "data-a11y-click": "true",
+    "data-a11y-focus": "true",
+    onClick: onClickMore,
+    tabIndex: "0"
   }, moreText) : null);
 }
 TextBubble.propTypes = textBubblePropTypes;

package/es/TextBubble/css/TextBubble.module.css

@@ -9,6 +9,7 @@
 
 .moreText {
   color: var(--imlib_chat_components_textBubble_see_more_color);
+  composes: buttonReset from '~@zohodesk/components/es/semantic/Button/semanticButton.module.css';
   cursor: pointer;
 }
 

package/es/im/ReplyEditor/css/ReplyEditor.module.css

@@ -37,6 +37,10 @@
   cursor: text !important;
 }	
 
+div.editableDiv[contenteditable="true"]{
+  outline-offset: -5px !important;
+}
+
 .editorWrapper {
   /** ** Use this class for css customisations *** */
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohoim/chat-components",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Chat Components",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -42,8 +42,8 @@
     "@zohodesk/utils": "1.3.13",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/virtualizer": "1.0.13",
-    "@zohoim/chat-components-hooks": "1.1.3",
-    "@zohoim/chat-components-utils": "1.1.3"
+    "@zohoim/chat-components-hooks": "1.1.4",
+    "@zohoim/chat-components-utils": "1.1.4"
   },
   "devDependencies": {
     "@zohodesk-private/color-variable-preprocessor": "1.2.1",
@@ -52,5 +52,5 @@
     "jsdom": "23.0.0",
     "react-to-jsx": "1.3.2"
   },
-  "gitHead": "abb04f860c9b98548879fc18e70adf580b679af0"
+  "gitHead": "0058c5987d4381f3356078cbcc1e2ca2f6f467ed"
 }