@zohodesk/dot 1.2.1 → 1.2.3

package/es/v1/svg/TemplateIcon.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { TemplateIcon_defaultProps } from '../../svg/props/defaultProps';
+import { TemplateIcon_propTypes } from '../../svg/props/propTypes';
+import SVG from '@zohodesk/svg/lib/SVG/SVG';
+export default class TemplateIcon extends React.Component {
+  render() {
+    let {
+      isRender,
+      isSymbol,
+      className
+    } = this.props;
+    return /*#__PURE__*/React.createElement(SVG, {
+      viewBox: "0 0 40 40",
+      name: "TemplateIcon",
+      isRender: isRender,
+      isSymbol: isSymbol,
+      className: className
+    }, /*#__PURE__*/React.createElement("path", {
+      d: "M33.09,3H6.91A3.91,3.91,0,0,0,3,6.91V33.09A3.91,3.91,0,0,0,6.91,37H33.09A3.91,3.91,0,0,0,37,33.09V6.91A3.92,3.92,0,0,0,33.09,3ZM6.91,5H33.09A1.92,1.92,0,0,1,35,6.91v4.62H5V6.91A1.92,1.92,0,0,1,6.91,5ZM33.09,35H6.91A1.92,1.92,0,0,1,5,33.09V13.53H35V33.09A1.92,1.92,0,0,1,33.09,35Z"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M9.33,9.33A1.07,1.07,0,1,0,8.27,8.27,1.06,1.06,0,0,0,9.33,9.33Z"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M13.6,9.33a1.07,1.07,0,1,0-1.07-1.06A1.06,1.06,0,0,0,13.6,9.33Z"
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M24.87,23H21V19.13a1,1,0,1,0-2,0V23H15.13a1,1,0,0,0,0,2H19v3.86a1,1,0,0,0,2,0V25h3.87a1,1,0,1,0,0-2Z"
+    }));
+  }
+
+}
+TemplateIcon.propTypes = TemplateIcon_propTypes;
+TemplateIcon.defaultProps = TemplateIcon_defaultProps; // if (__DOCS__) {
+//   TemplateIcon.docs = {
+//     componentGroup: 'SVG'
+//   };
+// }

package/es/v1/svg/index.js

@@ -0,0 +1,3 @@
+export { default as PlusIcon } from './PlusIcon';
+export { default as SnippetIcon } from './SnippetIcon';
+export { default as TemplateIcon } from './TemplateIcon';

package/es/v1/version2/alertIcons/index.js

@@ -0,0 +1,8 @@
+export { default as AlarmAlertIcon } from './AlarmAlertIcon';
+export { default as AlertIcons } from './AlertIcons';
+export { default as DangerAlertIcon } from './DangerAlertIcon';
+export { default as ErrorAlertIcon } from './ErrorAlertIcon';
+export { default as InfoAlertIcon } from './InfoAlertIcon';
+export { default as NotificationAlertIcon } from './NotificationAlertIcon';
+export { default as SuccessAlertIcon } from './SuccessAlertIcon';
+export { default as WarningAlertIcon } from './WarningAlertIcon';

package/es/v1/version2/index.js

@@ -0,0 +1,12 @@
+export { default as AlertClose } from './AlertClose/AlertClose';
+import * as _alertIcons from './alertIcons';
+export { _alertIcons as alertIcons };
+import * as _errorstate from './errorstate';
+export { _errorstate as errorstate };
+export { default as GlobalNotification } from './GlobalNotification/GlobalNotification';
+export { GlobalNotificationUI } from './GlobalNotification/GlobalNotification';
+export { GlobalNotificationNew } from './GlobalNotification/GlobalNotification';
+import * as _lookup from './lookup';
+export { _lookup as lookup };
+import * as _notification from './notification';
+export { _notification as notification };

package/es/v1/version2/lookup/AlertHeader/AlertHeader.js

@@ -0,0 +1,79 @@
+import React, { useRef } from 'react'; //AlertDependencies
+
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import AlertClose from '../../AlertClose/AlertClose';
+import AlertIcons from '../../alertIcons/AlertIcons'; //CSS
+
+import style from '../../../../version2/lookup/AlertHeader/css/AlertHeaderNew.module.css';
+import cssJSLogic from '../../../../version2/lookup/AlertHeader/css/cssJSLogic';
+import { mergeStyle } from '@zohodesk/utils'; //customHooks
+
+import useDragger from '../../../../Hooks/Dragger/useDragger'; //Props
+
+import defaultProps from '../../../../version2/lookup/AlertHeader/props/defaultProps';
+import propTypes from '../../../../version2/lookup/AlertHeader/props/propTypes';
+export default function AlertHeader(props) {
+  const {
+    title,
+    needIcon,
+    onClose,
+    closeTitle,
+    children,
+    breakChildren,
+    dataId,
+    type,
+    htmlId,
+    customStyle,
+    dragBoundaryLimit
+  } = props;
+  const finalStyle = mergeStyle(style, customStyle);
+  const {
+    alertHeaderContainerClass
+  } = cssJSLogic({
+    props,
+    style: finalStyle
+  });
+  const dragRef = useRef(null); //dragRef
+
+  useDragger({
+    isActive: true,
+    ChildRef: dragRef,
+    boundaryLimit: dragBoundaryLimit
+  }); //custom Hook
+
+  return /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: `${alertHeaderContainerClass}`,
+    isCover: false,
+    wrap: "wrap",
+    "data-drag-hook": "true",
+    eleRef: dragRef
+  }, needIcon && /*#__PURE__*/React.createElement("div", {
+    className: finalStyle.iconContainer
+  }, /*#__PURE__*/React.createElement(AlertIcons, {
+    type: type
+  })), (title || children) && /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    wrap: breakChildren ? 'wrap' : null
+  }, title && /*#__PURE__*/React.createElement(Box, {
+    className: finalStyle.title,
+    shrink: true,
+    id: htmlId
+  }, title), children && /*#__PURE__*/React.createElement(Box, {
+    adjust: true,
+    flexible: true
+  }, children))), onClose && /*#__PURE__*/React.createElement(Box, {
+    className: style.close
+  }, /*#__PURE__*/React.createElement(AlertClose, {
+    onClose: onClose,
+    dataTitle: closeTitle,
+    dataId: `${dataId}_close`,
+    type: "light"
+  })));
+} //Props
+
+AlertHeader.propTypes = propTypes;
+AlertHeader.defaultProps = defaultProps;

package/es/v1/version2/lookup/AlertLookup/AlertLookup.js

@@ -10,9 +10,9 @@ import { useUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
 import Button from '@zohodesk/components/lib/Button/Button';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import Lookup from '../../../lookup/Lookup/Lookup';
-import AlertHeader from '../../../../version2/lookup/AlertHeader/AlertHeader';
-import Section from '../../../../lookup/Section/Section';
-import FormAction from '../../../../FormAction/FormAction';
+import AlertHeader from '../AlertHeader/AlertHeader';
+import Section from '../../../lookup/Section/Section';
+import FormAction from '../../../FormAction/FormAction';
 /**** CSS ****/
 
 import style from '../../../../version2/lookup/AlertLookup/AlertLookupNew.module.css';
@@ -83,6 +83,8 @@ export default function AlertLookup(props) {
   let ariaMessageId = getAriaId();
   let ariaConfirmMsgId = getAriaId();
   let ariaTitleId = getAriaId();
+  let ariaLeaveButtonId = getAriaId();
+  let ariaStayButtonId = getAriaId();
   a11y = {
     ariaLabelledby: a11y && a11y.ariaLabelledby ? a11y.ariaLabelledby : ariaTitleId,
     ariaDescribedby: a11y && a11y.ariaDescribedby ? a11y.ariaDescribedby : ariaMessageId + ' ' + ariaConfirmMsgId
@@ -141,12 +143,22 @@ export default function AlertLookup(props) {
     customProps: {
       'data-a11y-autofocus': isDefaultFocus
     }
-  }, PrimaryButtonProps)), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
+  }, PrimaryButtonProps, {
+    a11y: {
+      'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaLeaveButtonId
+    },
+    id: ariaLeaveButtonId
+  })), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
     dataId: dataId === 'alertPopup' ? 'alertCancelButton' : `${dataId}_cancelButton`,
     text: cancelText,
     onClick: onCancelClick,
     palette: "secondary"
-  }, SecondaryButtonProps))))) : null))));
+  }, SecondaryButtonProps, {
+    a11y: {
+      'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaStayButtonId
+    },
+    id: ariaStayButtonId
+  }))))) : null))));
 }
 AlertLookup.propTypes = propTypes;
 AlertLookup.defaultProps = defaultProps;

package/es/v1/version2/notification/DesktopNotification/DesktopNotification.js

@@ -0,0 +1,164 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useState } from 'react';
+import { defaultProps } from '../../../../version2/notification/DesktopNotification/props/defaultProps';
+import { propTypes, DesktopNotificationUI_propTypes } from '../../../../version2/notification/DesktopNotification/props/propTypes';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import AutoClose from '../../../actions/AutoClose';
+import Button from '@zohodesk/components/lib/Button/Button';
+import FormAction from '../../../FormAction/FormAction';
+import DesktopNotificationHeader from '../DesktopNotificationHeader/DesktopNotificationHeader';
+import style from '../../../../version2/notification/DesktopNotification/DesktopNotification.module.css';
+let buttonPaletteObject = {
+  success: {
+    buttonPalette: 'successFilled'
+  },
+  error: {
+    buttonPalette: 'dangerFilled'
+  },
+  danger: {
+    buttonPalette: 'dangerFilled'
+  },
+  warning: {
+    buttonPalette: 'dangerFilled'
+  },
+  info: {
+    buttonPalette: 'primaryFilled'
+  },
+  notification: {
+    buttonPalette: 'primaryFilled'
+  }
+};
+export function DesktopNotificationUI(props) {
+  let {
+    type = '',
+    submitText,
+    cancelText,
+    submitType,
+    isMore,
+    message,
+    isAnimate,
+    getBottomContainer,
+    getSubmitContainer,
+    onSubmit,
+    onCancel,
+    dataId,
+    dataSelectorId,
+    isClose,
+    needAutoZindex,
+    title,
+    subTitle,
+    needIcon,
+    info,
+    secondaryInfo,
+    titleVariant,
+    getSectionContainer,
+    isShrinkView,
+    size,
+    onClose,
+    needClose,
+    customClass = {},
+    i18nKeys = {},
+    customProps
+  } = props;
+  let {
+    closeTitle = 'Close'
+  } = i18nKeys;
+  let {
+    containerClass
+  } = customClass;
+  let {
+    buttonPalette = 'dangerFilled'
+  } = buttonPaletteObject[type] || {};
+  let {
+    ExtraProps = {}
+  } = customProps;
+
+  function onClickSubmit(e) {
+    onSubmit && onSubmit();
+  }
+
+  function onClickCancel(e) {
+    onCancel && onCancel();
+  }
+
+  let animateClass = isClose ? style.rightanimate : style.leftanimate;
+  let animateRemoveClass = isClose ? style.rightanimate : style.leftnoanimate;
+  let getNextIndex = useZIndex();
+  let Zindex = isAnimate ? getNextIndex() : null;
+  let uiVariantOne = title && (info || secondaryInfo);
+  let uiVariantTwo = title && !(info || secondaryInfo) && !getSectionContainer;
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.parentElement,
+    style: needAutoZindex && isAnimate ? {
+      zIndex: `${Zindex}`
+    } : {},
+    "data-selector-id": dataSelectorId
+  }, /*#__PURE__*/React.createElement(Container, _extends({
+    className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass} ${style[`${size}`] ? style[`${size}`] : ''} ${isShrinkView ? style.globalNotify : ''} ${containerClass}`,
+    isCover: false,
+    dataId: dataId,
+    isInline: uiVariantTwo
+  }, ExtraProps), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(DesktopNotificationHeader, {
+    type: type,
+    title: title,
+    variant: titleVariant,
+    needIcon: needIcon,
+    onClose: onClose,
+    closeTitle: closeTitle,
+    dataId: `${dataId}_close`,
+    needClose: needClose
+  })), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "column"
+  }, uiVariantOne && /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${style.section} ${style.infoText}`
+  }, subTitle && /*#__PURE__*/React.createElement("div", {
+    className: `${style.subTitle} ${info || secondaryInfo ? style.subTitleMargin : ''}`
+  }, subTitle), info && /*#__PURE__*/React.createElement("div", null, info), secondaryInfo && /*#__PURE__*/React.createElement("div", {
+    className: `${info ? style.secondaryInfo : ''}`
+  }, secondaryInfo))), getSectionContainer && /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+    className: style.footer
+  }, isMore ? /*#__PURE__*/React.createElement("div", {
+    className: `${style.message}`
+  }, message) : null, /*#__PURE__*/React.createElement(FormAction, {
+    size: "small",
+    paddingLeftSize: "xmedium"
+  }, submitText ? /*#__PURE__*/React.createElement("div", {
+    onClick: onClickSubmit,
+    "data-id": `${dataId}_submitButton`,
+    "data-test-id": `${dataId}_submitButton`
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row"
+  }, getSubmitContainer ? /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, getSubmitContainer()) : /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    text: submitText,
+    palette: submitType ? submitType : buttonPalette
+  })))) : null, cancelText ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    text: cancelText,
+    palette: "secondary",
+    dataId: `${dataId}_cancelButton`,
+    onClick: onClickCancel
+  })) : null))) : null)), getBottomContainer ? /*#__PURE__*/React.createElement(Box, null, getBottomContainer()) : null));
+}
+DesktopNotificationUI.propTypes = DesktopNotificationUI_propTypes;
+export default function DesktopNotification(props) {
+  return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
+    Element: DesktopNotificationUI
+  }));
+}
+DesktopNotification.propTypes = propTypes;
+DesktopNotification.defaultProps = defaultProps; // if (__DOCS__) {
+//   DesktopNotification.docs = {
+//     componentGroup: 'DesktopNotification',
+//     folderName: 'Alert'
+//   };
+// }

package/es/version2/lookup/AlertLookup/AlertLookup.js

@@ -117,6 +117,8 @@ export default class AlertLookup extends Component {
     let ariaMessageId = this.getAriaId();
     let ariaConfirmMsgId = this.getAriaId();
     let ariaTitleId = this.getAriaId();
+    let ariaLeaveButtonId = this.getAriaId();
+    let ariaStayButtonId = this.getAriaId();
     a11y = {
       ariaLabelledby: a11y && a11y.ariaLabelledby ? a11y.ariaLabelledby : ariaTitleId,
       ariaDescribedby: a11y && a11y.ariaDescribedby ? a11y.ariaDescribedby : ariaMessageId + ' ' + ariaConfirmMsgId
@@ -175,12 +177,22 @@ export default class AlertLookup extends Component {
       customProps: {
         'data-a11y-autofocus': isDefaultFocus
       }
-    }, PrimaryButtonProps)), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
+    }, PrimaryButtonProps, {
+      a11y: {
+        'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaLeaveButtonId
+      },
+      id: ariaLeaveButtonId
+    })), cancelText && /*#__PURE__*/React.createElement(Button, _extends({
       dataId: dataId === 'alertPopup' ? 'alertCancelButton' : `${dataId}_cancelButton`,
       text: cancelText,
       onClick: onCancelClick,
       palette: "secondary"
-    }, SecondaryButtonProps))))) : null))));
+    }, SecondaryButtonProps, {
+      a11y: {
+        'aria-labelledby': ariaTitleId + ' ' + ariaMessageId + ' ' + ariaStayButtonId
+      },
+      id: ariaStayButtonId
+    }))))) : null))));
   }
 
 }

package/lib/Attachment/Attachment.js

@@ -80,7 +80,8 @@ var Attachment = /*#__PURE__*/function (_React$Component) {
         "data-title": tooltip,
         alignBox: "row",
         isCover: false,
-        dataSelectorId: dataSelectorId
+        dataSelectorId: dataSelectorId,
+        tabIndex: "0"
       }, iconName ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _AttachmentModule["default"].attachleft
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {

package/lib/Attachment/Attachment.module.css

@@ -18,19 +18,22 @@
   background-color: var(--zdt_attachment_transparent_bg);
 }
 
-.attachmentHover:hover, .attachmentHover:hover .attachleft {
+.attachmentHover:hover, .attachmentHover:hover .attachleft, .attachmentHover:focus-within, .attachmentHover:focus-within .attachleft {
   border-color: var(--zdt_attachment_default_hover_border);
 }
 
-.attachmentHover:hover .attachleft i {
+.attachmentHover:hover .attachleft i,
+.attachmentHover:focus-within .attachleft i {
   color: var(--zdt_attachment_hover_text);
 }
 
-.attachment:hover .attachDownload {
+.attachment:hover .attachDownload,
+.attachment:focus-within .attachDownload {
   display: block;
 }
 
-.attachmentHover:hover .attachSize {
+.attachmentHover:hover .attachSize,
+.attachment:focus-within .attachSize {
   color: var(--zdt_attachment_hover_text);
 }
 
@@ -132,7 +135,7 @@
   line-height: var(--zd_size18);
 }
 
-.attachDownload:hover {
+.attachDownload:hover, .attachDownload:focus-within {
   background-color: var(--zdt_attachment_download_hover_bg);
 }
 
@@ -145,7 +148,8 @@
   color: var(--zdt_attachment_size_text);
 }
 
-.attachDownload:hover .downIcon {
+.attachDownload:hover .downIcon,
+.attachDownload:focus-within .downIcon {
   color: var(--zdt_attachment_download_hover_text);
 }
 

package/lib/Link/Link.js

@@ -141,7 +141,8 @@ var Link = /*#__PURE__*/function (_React$Component) {
       }, others, {
         onClick: this.onCallBack.bind(this, urlOutput, href)
       }, customProps, {
-        "aria-label": ariaLabel
+        "aria-label": ariaLabel,
+        tabIndex: "0"
       }), children);
     }
   }]);

package/lib/TagWithIcon/props/propTypes.js

@@ -16,7 +16,7 @@ var propTypes = {
   title: _propTypes["default"].string,
   isBold: _propTypes["default"].bool,
   palette: _propTypes["default"].oneOf(['yellow', 'blue', 'grey']),
-  size: _propTypes["default"].oneOf('small', 'large'),
+  size: _propTypes["default"].oneOf(['small', 'large']),
   className: _propTypes["default"].string,
   text: _propTypes["default"].string,
   dataId: _propTypes["default"].string

package/lib/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -921,12 +921,14 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
 
 exports.ToggleDropDown = ToggleDropDown;
 ToggleDropDown.defaultProps = _defaultProps.defaultProps;
-ToggleDropDown.propTypes = _propTypes.propTypes; // if (__DOCS__) {
+ToggleDropDown.propTypes = _propTypes.propTypes;
+var ToggleDropDown_Component = (0, _Popup["default"])(ToggleDropDown);
+ToggleDropDown_Component.defaultProps = ToggleDropDown.defaultProps;
+ToggleDropDown_Component.propTypes = ToggleDropDown.propTypes; // if (__DOCS__) {
 //   ToggleDropDown.docs = {
 //     componentGroup: 'Molecule'
 //   };
 // }
 
-var _default = (0, _Popup["default"])(ToggleDropDown);
-
+var _default = ToggleDropDown_Component;
 exports["default"] = _default;

package/lib/emptystate/CommonEmptyState/CommonEmptyState.js

@@ -82,6 +82,7 @@ var CommonEmptyState = /*#__PURE__*/function (_Component) {
         "data-id": dataId,
         "data-test-id": dataId
       }, getEmptyState ? getEmptyState() : null, title ? /*#__PURE__*/_react["default"].createElement("div", {
+        tabIndex: "0",
         className: "".concat(_CommonEmptyStateModule["default"].title, " ").concat(titleClass)
       }, title) : null, description ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _CommonEmptyStateModule["default"].linkWrapper

package/lib/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -288,12 +288,15 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
   }, ValidationMessageProps)));
 };
 
-var _default = (0, _Popup["default"])(TagsMultiSelectField);
-
-exports["default"] = _default;
 TagsMultiSelectField.propTypes = _propTypes.propTypes;
-TagsMultiSelectField.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
+TagsMultiSelectField.defaultProps = _defaultProps.defaultProps;
+var TagsMultiSelectField_Component = (0, _Popup["default"])(TagsMultiSelectField);
+TagsMultiSelectField_Component.defaultProps = TagsMultiSelectField.defaultProps;
+TagsMultiSelectField_Component.propTypes = TagsMultiSelectField.propTypes; // if (__DOCS__) {
 //   TagsMultiSelectField.docs = {
 //     componentGroup: 'TagsMultiSelectField'
 //   };
-// }
+// }
+
+var _default = TagsMultiSelectField_Component;
+exports["default"] = _default;

package/lib/layout/SubtabLayout/props/propTypes.js

@@ -48,7 +48,7 @@ var SubtabContent_propTypes = {
 };
 exports.SubtabContent_propTypes = SubtabContent_propTypes;
 var SubtabLayout_propTypes = {
-  children: _propTypes["default"].oneOf([_propTypes["default"].element, _propTypes["default"].array]),
+  children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].array]),
   dataId: _propTypes["default"].string
 };
 exports.SubtabLayout_propTypes = SubtabLayout_propTypes;

package/lib/list/Icons/AddNewIcon.js

@@ -15,6 +15,8 @@ var _icons = require("@zohodesk/icons");
 
 var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
+var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/lib/semantic/Button/semanticButton.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -57,9 +59,9 @@ var AddNewIcon = /*#__PURE__*/function (_React$Component) {
           dataTitle = _this$props.dataTitle,
           iconClass = _this$props.iconClass,
           className = _this$props.className;
-      return /*#__PURE__*/_react["default"].createElement("span", {
+      return /*#__PURE__*/_react["default"].createElement("button", {
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : ''),
+        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : '', " ").concat(_semanticButtonModule["default"].buttonReset),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-title": dataTitle

package/lib/list/Icons/CompleteIcon.js

@@ -15,6 +15,8 @@ var _icons = require("@zohodesk/icons");
 
 var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
+var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/lib/semantic/Button/semanticButton.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -58,9 +60,9 @@ var CompleteIcon = /*#__PURE__*/function (_React$Component) {
           iconClass = _this$props.iconClass,
           className = _this$props.className,
           iconSize = _this$props.iconSize;
-      return /*#__PURE__*/_react["default"].createElement("span", {
+      return /*#__PURE__*/_react["default"].createElement("button", {
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : ''),
+        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : '', " ").concat(_semanticButtonModule["default"].buttonReset),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-title": dataTitle

package/lib/list/Icons/DeleteIcon.js

@@ -15,6 +15,8 @@ var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 var _icons = require("@zohodesk/icons");
 
+var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/lib/semantic/Button/semanticButton.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -58,13 +60,13 @@ var DeleteComponent = /*#__PURE__*/function (_React$Component) {
           iconClass = _this$props.iconClass,
           iconSize = _this$props.iconSize,
           className = _this$props.className;
-      return /*#__PURE__*/_react["default"].createElement("span", {
+      return /*#__PURE__*/_react["default"].createElement("button", {
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].redHover, " ").concat(className ? className : ''),
+        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].redHover, " ").concat(className ? className : '', "  ").concat(_semanticButtonModule["default"].buttonReset),
         "data-id": dataId,
         "data-test-id": dataId,
         "data-title": dataTitle,
-        tabIndex: 0
+        "aria-label": dataTitle
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-GN-delete",
         iconClass: iconClass ? iconClass : '',

package/lib/list/Icons/EditIcon.js

@@ -15,6 +15,8 @@ var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
 var _icons = require("@zohodesk/icons");
 
+var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/lib/semantic/Button/semanticButton.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -58,12 +60,13 @@ var EditIcon = /*#__PURE__*/function (_React$Component) {
           iconClass = _this$props.iconClass,
           iconSize = _this$props.iconSize,
           className = _this$props.className;
-      return /*#__PURE__*/_react["default"].createElement("span", {
+      return /*#__PURE__*/_react["default"].createElement("button", {
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : ''),
+        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : '', "  ").concat(_semanticButtonModule["default"].buttonReset),
         "data-id": dataId,
         "data-test-id": dataId,
-        "data-title": dataTitle
+        "data-title": dataTitle,
+        "aria-label": dataTitle
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-GN-edit",
         iconClass: iconClass ? iconClass : '',

package/lib/list/Icons/ReadUnreadIcon.js

@@ -17,6 +17,8 @@ var _icons = require("@zohodesk/icons");
 
 var _IconsModule = _interopRequireDefault(require("./Icons.module.css"));
 
+var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/lib/semantic/Button/semanticButton.module.css"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -62,12 +64,13 @@ var ReadUnreadIcon = /*#__PURE__*/function (_React$Component) {
           className = _this$props.className,
           isRead = _this$props.isRead,
           iconSize = _this$props.iconSize;
-      return /*#__PURE__*/_react["default"].createElement("span", {
+      return /*#__PURE__*/_react["default"].createElement("button", {
         onClick: onClick,
-        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : ''),
+        className: "".concat(_IconsModule["default"].iconStyle, " ").concat(_IconsModule["default"].blueHover, " ").concat(className ? className : '', " ").concat(_semanticButtonModule["default"].buttonReset),
         "data-id": dataId,
         "data-test-id": dataId,
-        "data-title": dataTitle
+        "data-title": dataTitle,
+        "aria-label": dataTitle
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: isRead ? 'ZD-GN-read' : 'ZD-GN-unread',
         size: iconSize,