@zohodesk/components 1.0.0-alpha-252 → 1.0.0-alpha-253

package/README.md

@@ -32,6 +32,12 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-253
+
+ - **Tabs, Tooltip** - If condition check added  to reduce murphy error logs.
+
+ - `Accesssility`- Screen Reader support for some components.
+
 # 1.0.0-alpha-252
 
  - **Select,GroupSelect,SelectWithAvatar,SelectWithIcon,MultiSelect,MultiSelectWithAvatar** - Initial Loader and Scroll End Loader added.

package/es/Avatar/Avatar.js

@@ -154,7 +154,8 @@ export default class Avatar extends React.Component {
       name: name,
       onError: this.putInvalidImageURLJSON,
       onLoad: this.putValidImageURLJSON,
-      src: showAlternateAvatar ? alternateSrc : src
+      src: showAlternateAvatar ? alternateSrc : src,
+      alt: name
     }), !isValidImageList && !showAlternateAvatar ? null : /*#__PURE__*/React.createElement("span", {
       className: `${style.shadow} ${textStyle} `
     })));

package/es/Card/props/defaultProps.js

@@ -9,7 +9,6 @@ export const Card_defaultProps = {
 export const CardContent_defaultProps = {
   isScrollAttribute: false,
   scroll: 'vertical',
-  preventParentScroll: 'vertical',
   dataId: 'CardContent',
   customClass: ''
 };

package/es/Card/props/propTypes.js

@@ -11,10 +11,10 @@ export const CardContent_propTypes = {
   eleRef: PropTypes.func,
   isScrollAttribute: PropTypes.bool,
   onScroll: PropTypes.func,
-  scroll: PropTypes.PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
+  scroll: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
   shrink: PropTypes.bool,
   customClass: PropTypes.string,
-  preventParentScroll: PropTypes.PropTypes.oneOf(['vertical', 'horizontal', 'both'])
+  preventParentScroll: PropTypes.oneOf(['vertical', 'horizontal', 'both'])
 };
 export const Card_propTypes = {
   childTypes: PropTypes.object,

package/es/DateTime/CalendarView.js

@@ -147,7 +147,8 @@ export default class CalendarView extends React.PureComponent {
     })();
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DaysRow, {
       dayNames: dayNames,
-      dayNamesShort: dayNamesShort
+      dayNamesShort: dayNamesShort,
+      ariaLabel: dayNamesShort
     }), /*#__PURE__*/React.createElement("div", {
       "data-id": `${dataId}_dateContainer`,
       className: `${style.dateContainer} ${needBorder ? style.separator : ''}`
@@ -183,7 +184,8 @@ export class Span extends React.PureComponent {
       dataId: dataId,
       className: `${tdclass} ${isActive ? style.active : ''} ${isToday ? style.today : ''}`,
       key: i,
-      onClick: this.handleSelectChild
+      onClick: this.handleSelectChild,
+      "aria-label": incremday
     }, incremday);
   }
 }

package/es/DateTime/DateTime.module.css

@@ -74,6 +74,7 @@
   line-height: var(--zd_size24);
   color: var(--zdt_datetime_datestr_text);
   composes: semibold;
+  display: initial
 }
 
 .dateContainer {

package/es/DateTime/DateTimePopupHeader.js

@@ -6,6 +6,7 @@ import React, { PureComponent } from 'react';
 /** ** Components *** */
 import { Container, Box } from '../Layout';
 import Icon from '@zohodesk/icons/lib/Icon';
+import Heading from '../Heading/Heading';
 
 /** ** CSS *** */
 import style from './DateTime.module.css';
@@ -26,13 +27,16 @@ class Span extends React.PureComponent {
       dataTitle,
       children,
       dataId,
-      className = ''
+      className = '',
+      ariaLabel
     } = this.props;
     return /*#__PURE__*/React.createElement(Box, {
       "data-title": dataTitle,
       dataId: dataId,
       className: `${style.thArrow} ${style.grid} ${className}`,
-      onClick: this.modifyCalendarChild
+      onClick: this.modifyCalendarChild,
+      "aria-label": ariaLabel,
+      tabindex: "0"
     }, children);
   }
 }
@@ -54,19 +58,26 @@ export default class DateTimePopupHeader extends PureComponent {
       className: style.dateText,
       dataId: "selectYear",
       onClick: onOpenYearView
-    }, /*#__PURE__*/React.createElement("span", {
-      className: style.thMonYear
-    }, showMonthTxt), /*#__PURE__*/React.createElement(Icon, {
+    }, /*#__PURE__*/React.createElement(Heading, {
+      className: style.thMonYear,
+      title: showMonthTxt,
+      tagName: "h2",
+      a11y: {
+        tabindex: '0'
+      }
+    }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-GN-dropdown",
       size: "12",
       iconClass: style.downArrow
-    })), /*#__PURE__*/React.createElement(Box, {
+    }))), /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }), !isYearView ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Span, {
       dataTitle: prevMonthTitleText,
       dataId: "prevMonth",
       modifyCalendar: onModifyCalendar,
-      type: "previousMonth"
+      type: "previousMonth",
+      ariaLabel: "prevMonth",
+      tabindex: "0"
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-arrowLeft3",
       isBold: true
@@ -75,7 +86,9 @@ export default class DateTimePopupHeader extends PureComponent {
       dataId: "nextMonth",
       modifyCalendar: onModifyCalendar,
       type: "nextMonth",
-      className: style.navigation
+      className: style.navigation,
+      ariaLabel: "nextMonth",
+      tabindex: "0"
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-arrowRight3",
       isBold: true

package/es/DateTime/DateWidget.js

@@ -919,7 +919,8 @@ class DateWidgetComponent extends React.Component {
       positionsOffset,
       targetOffset,
       isRestrictScroll,
-      dropBoxPortalId
+      dropBoxPortalId,
+      a11y
     } = this.props;
     const {
       selected: value = '',
@@ -969,7 +970,8 @@ class DateWidgetComponent extends React.Component {
       },
       iconOnHover: iconOnHover,
       isFocus: isPopupReady,
-      autoComplete: false
+      autoComplete: false,
+      a11y: a11y
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both",
       onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick

package/es/DateTime/DaysRow.js

@@ -20,7 +20,8 @@ export default class DaysRow extends PureComponent {
     }, dayNames.map((dayName, index) => /*#__PURE__*/React.createElement(Box, {
       key: dayName,
       className: `${style.daysStr} ${style.grid} ${index === 0 ? style.sunday : ''}`,
-      "data-title": dayName
+      "data-title": dayName,
+      "aria-label": dayName
     }, dayNamesShort[index])));
   }
 }

package/es/DateTime/YearView.js

@@ -7,6 +7,7 @@ import { YearView_defaultProps } from './props/defaultProps';
 import { Virtualizer } from '@zohodesk/virtualizer';
 import { Container, Box } from '../Layout';
 import Icon from '@zohodesk/icons/lib/Icon';
+import Heading from '../Heading/Heading';
 /**** CSS ****/
 import style from './YearView.module.css';
 
@@ -50,9 +51,15 @@ class Year extends React.PureComponent {
       alignBox: "row",
       align: "vertical"
     }, /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      className: style.yearText
-    }, year), /*#__PURE__*/React.createElement(Icon, {
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Heading, {
+      className: style.yearText,
+      title: year,
+      a11y: {
+        tabindex: '0'
+      },
+      tagName: "h4"
+    })), /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-arrowDownSingle",
       size: "7",
       isBold: true,
@@ -85,7 +92,8 @@ class Month extends React.PureComponent {
       dataId: `month_${month}`,
       className: `${style.month} ${isActive ? style.currentMonth : ''}`,
       onClick: this.handleClick,
-      "data-title": hoverText
+      "data-title": hoverText,
+      "aria-label": month
     }, displayText);
   }
 }

package/es/DateTime/YearView.module.css

@@ -5,6 +5,7 @@
   padding-left: var(--zd_size19);
   padding-right: var(--zd_size19);
 }
+
 .month {
   width: 30.333%;
   font-size: var(--zd_font_size12);
@@ -17,51 +18,66 @@
   background-color: var(--zdt_yearview_month_bg);
   border-radius: 20px;
 }
+
 .month:hover {
   background-color: var(--zdt_yearview_month_hover_bg);
 }
+
 .currentMonth,
 .currentMonth:hover {
   color: var(--zdt_yearview_currentmonth_text);
 }
+
 .currentMonth, .currentMonth:hover {
   background-color: var(--zdt_yearview_currentmonth_bg);
 }
+
 .yearBox {
   border-bottom: 1px dotted var(--zdt_yearview_yearbox_border);
 }
+
 .year {
   padding: var(--zd_size7) 0;
   cursor: pointer;
 }
+
 .year:hover .yearText,
 .year:hover .arrow {
   color: var(--zdt_yearview_year_hover_text);
 }
+
 .yearText {
   color: var(--zdt_yearview_yeartext_text);
   font-size: var(--zd_font_size11);
 }
+
 .arrow {
   color: var(--zdt_yearview_yeartext_text);
   transition: transform var(--zd_transition1);
 }
+
 .isActive {
   cursor: default;
 }
+
 .isActive .yearText {
   font-family: var(--zd_semibold);
   color: var(--zdt_yearview_year_hover_text);
+  font-size: var(--zd_font_size11);
 }
+
 .arrowActive {
   color: var(--zdt_yearview_year_hover_text);
 }
+
 [dir=ltr] .arrowActive {
   transform: rotate(180deg);
 }
+
 [dir=rtl] .arrowActive {
   transform: rotate(-180deg);
 }
+
 .container {
   height: 100%;
   overflow-y: auto;
@@ -69,13 +85,15 @@
   composes: boxPadding;
   background-color: var(--zdt_yearview_default_bg);
 }
+
 .yearContainer {
   height: var(--zd_size135);
   overflow: hidden;
   transition: height var(--zd_transition1);
   padding-bottom: var(--zd_size5);
 }
+
 .toggleYear {
   height: 0;
   padding: 0;
-}
+}

package/es/DropDown/DropDownHeading.js

@@ -15,13 +15,15 @@ export default class DropDownHeading extends React.Component {
     } = this.props;
     let {
       role,
-      ariaLabelledby
+      ariaLabelledby,
+      ariaLabel
     } = a11y;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style[palette]} ${customClass}`,
       "data-title": title,
       role: role,
       "aria-labelledby": ariaLabelledby,
+      "aria-label": ariaLabel,
       id: htmlId
       // tabindex='0'
     }, text, children);

package/es/DropDown/props/propTypes.js

@@ -38,7 +38,8 @@ export const DropDownHeading_propTypes = {
   htmlId: PropTypes.string,
   a11y: PropTypes.shape({
     role: PropTypes.string,
-    ariaLabelledby: PropTypes.string
+    ariaLabelledby: PropTypes.string,
+    ariaLabel: PropTypes.string
   })
 };
 export const DropDownItem_propTypes = {

package/es/Label/Label.js

@@ -19,7 +19,8 @@ export default class Label extends React.Component {
       onClick,
       dataId,
       variant,
-      customClass
+      customClass,
+      id
     } = this.props;
     return /*#__PURE__*/React.createElement("label", {
       className: `${style.label} ${style[type]} ${style[size]} ${colors[palette]} ${style[`font_${variant}`]}
@@ -27,7 +28,8 @@ export default class Label extends React.Component {
       htmlFor: htmlFor,
       "data-title": title,
       "data-id": dataId,
-      onClick: onClick
+      onClick: onClick,
+      id: id
     }, text);
   }
 }

package/es/Layout/props/propTypes.js

@@ -16,11 +16,11 @@ export const BoxProps = {
   isFirst: PropTypes.bool,
   isLast: PropTypes.bool,
   isScrollAttribute: PropTypes.bool,
-  scroll: PropTypes.PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
+  scroll: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'none']),
   shrink: PropTypes.bool,
   tagName: PropTypes.string,
   tourId: PropTypes.string,
-  preventParentScroll: PropTypes.PropTypes.oneOf(['vertical', 'horizontal', 'both'])
+  preventParentScroll: PropTypes.oneOf(['vertical', 'horizontal', 'both'])
 };
 export const ContainerProps = {
   align: PropTypes.oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around', 'baseline']),
@@ -38,5 +38,5 @@ export const ContainerProps = {
   tagName: PropTypes.string,
   tourId: PropTypes.string,
   wrap: PropTypes.oneOf(['wrap', 'wrap-reverse', 'nowrap']),
-  preventParentScroll: PropTypes.PropTypes.oneOf(['vertical', 'horizontal', 'both'])
+  preventParentScroll: PropTypes.oneOf(['vertical', 'horizontal', 'both'])
 };

package/es/ListItem/ListContainer.js

@@ -50,7 +50,8 @@ const ListContainer = props => {
   } = useResponsiveReceiver('Helmet', responsiveFunc);
   const {
     role,
-    ariaSelected
+    ariaSelected,
+    ariaLabel
   } = a11y;
   const options = {};
   if (isLink) {
@@ -60,12 +61,13 @@ const ListContainer = props => {
   if (active) {
     options['data-selected'] = active;
   }
-  if (!isDisabled && !isLink && active) {
+  if (!isDisabled && !isLink) {
     options.tabindex = '0';
   }
   return /*#__PURE__*/React.createElement(Container, _extends({
     role: role,
     "aria-selected": ariaSelected,
+    "aria-label": ariaLabel,
     isCover: false,
     align: "vertical",
     alignBox: "row",

package/es/MultiSelect/MultiSelect.js

@@ -825,7 +825,8 @@ export class MultiSelectComponent extends React.Component {
       searchText = 'Searching...'
     } = i18nKeys;
     const {
-      clearLabel = 'Clear all'
+      clearLabel = 'Clear all',
+      ariaLabelledby
     } = a11y;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -907,7 +908,8 @@ export class MultiSelectComponent extends React.Component {
         ariaExpanded: !isReadOnly && !isDisabled && !disableAction && isPopupOpen ? true : false,
         ariaHaspopup: true,
         ariaRequired: true,
-        ariaDescribedby: ariaErrorId
+        ariaDescribedby: ariaErrorId,
+        ariaLabelledby: ariaLabelledby
       },
       autoComplete: autoComplete
     }, /*#__PURE__*/React.createElement(Container, {

package/es/MultiSelect/Suggestions.js

@@ -57,7 +57,8 @@ export default class Suggestions extends React.PureComponent {
       const isActive = activeId === id || selectedOptions.indexOf(id) >= 0;
       const isHighlight = hoverOption === index || id === hoverId ? true : false;
       const list_a11y = Object.assign({}, a11y, {
-        ariaSelected: isActive
+        ariaSelected: isActive,
+        ariaLabel: value
       });
       const commonProps = {
         isDisabled

package/es/Responsive/CustomResponsive.js

@@ -99,6 +99,7 @@ export function useResponsiveReceiver() {
   const data = useRef();
   function updateLatestData() {
     const size = contextData.isParentSize ? contextData.getSize() : validSizeContextData.getSize();
+    const prevData = data.current;
     data.current = query({
       isTouchDevice,
       isParentSize: contextData.isParentSize,
@@ -122,13 +123,16 @@ export function useResponsiveReceiver() {
         });
       }
     });
+    const isSameValues = shallowCompare(data.current, prevData);
+    if (isSameValues) {
+      data.current = prevData;
+    }
+    return isSameValues;
   }
   resizeHandlerRef.current = updateLatestData;
   useEffect(() => {
     function handleResize(size) {
-      const prevData = data.current;
-      resizeHandlerRef.current(size);
-      const isSameValues = shallowCompare(data.current, prevData);
+      const isSameValues = resizeHandlerRef.current(size);
       !isSameValues && forceUpdate({});
     }
     contextData.resize.subscribe(handleResize);

package/es/Select/Select.js

@@ -676,6 +676,7 @@ export class SelectComponent extends Component {
       iconOnHover,
       customProps,
       autoComplete,
+      ariaLabelledby,
       isLoading
     } = this.props;
     let {
@@ -712,14 +713,15 @@ export class SelectComponent extends Component {
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
     }, needSelectDownIcon ? /*#__PURE__*/React.createElement(TextBoxIcon, {
       a11y: {
-        role: 'combobox',
+        role: 'Menuitem',
         ariaLabel: TextBox_ally_label,
         ariaControls: setAriaId,
         ariaExpanded: !isReadOnly && !isDisabled && isPopupOpen ? true : false,
         ariaHaspopup: true,
         ariaReadonly: true,
         ariaActivedescendant: selectedId,
-        ariaOwns: setAriaId
+        ariaOwns: setAriaId,
+        ariaLabelledby: ariaLabelledby
       },
       isDisabled: isDisabled,
       iconRotated: isPopupOpen,
@@ -764,14 +766,15 @@ export class SelectComponent extends Component {
       size: "7"
     })))) : /*#__PURE__*/React.createElement(Textbox, {
       a11y: {
-        role: 'combobox',
+        role: 'Menuitem',
         ariaLabel: TextBox_ally_label,
         ariaControls: setAriaId,
         ariaExpanded: !isReadOnly && !isDisabled && isPopupOpen ? true : false,
         ariaHaspopup: true,
         ariaReadonly: true,
         ariaActivedescendant: selectedId,
-        ariaOwns: setAriaId
+        ariaOwns: setAriaId,
+        ariaLabelledby: ariaLabelledby
       },
       isDisabled: isDisabled,
       inputRef: this.valueInputRef,

package/es/Select/SelectWithIcon.js

@@ -455,7 +455,8 @@ class SelectWithIcon extends Component {
           getRef: this.itemRef,
           a11y: {
             role: 'option',
-            ariaSelected: selectedId === options[idKey]
+            ariaSelected: selectedId === options[idKey],
+            ariaLabel: options[valueKey]
           }
         });
       })) : /*#__PURE__*/React.createElement(EmptyState, {

package/es/Tab/Tabs.js

@@ -20,6 +20,7 @@ import tabsStyle from './Tabs.module.css';
 import Popup from '../Popup/Popup';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
+import btnstyle from '../semantic/Button/semanticButton.module.css';
 class Tabs extends React.Component {
   constructor(props) {
     super(props);
@@ -222,7 +223,7 @@ class Tabs extends React.Component {
     let {
       align
     } = this.props;
-    let totalDimension = getTotalDimension(this.tabsEle, align);
+    let totalDimension = this.tabsEle && getTotalDimension(this.tabsEle, align);
     return totalDimension;
   }
   getTabDimensions() {
@@ -233,7 +234,7 @@ class Tabs extends React.Component {
     } = this.props;
     let tabDimensions = {};
     React.Children.forEach(children, child => /*#__PURE__*/React.isValidElement(child) && child.type === childType && this[child.props.id] && Object.assign(tabDimensions, {
-      [child.props.id]: getTotalDimension(this[child.props.id], align)
+      [child.props.id]: this[child.props.id] && getTotalDimension(this[child.props.id], align)
     }));
     return tabDimensions;
   }
@@ -424,12 +425,16 @@ class Tabs extends React.Component {
     }), React.Children.count(moreTabs) ? /*#__PURE__*/React.createElement(Box, {
       className: `${tabsStyle.menu} `
     }, /*#__PURE__*/React.createElement(Container, _extends({
-      className: `${moreButtonClass} ${isPopupOpen ? moreButtonActiveClass : ''}`,
+      className: `${btnstyle.buttonReset} ${moreButtonClass} ${isPopupOpen ? moreButtonActiveClass : ''}`,
       align: "both",
       onClick: this.togglePopup,
       dataId: "moreTabs",
       eleRef: getTargetRef
-    }, MoreButtonProps), /*#__PURE__*/React.createElement(Icon, {
+    }, MoreButtonProps, {
+      "aria-label": "MoreTabs",
+      role: "tab",
+      tagName: "button"
+    }), /*#__PURE__*/React.createElement(Icon, {
       name: iconName,
       size: iconSize
     })), isPopupOpen && /*#__PURE__*/React.createElement(ResponsiveReceiver, {

package/es/Tab/Tabs.module.css

@@ -138,4 +138,4 @@
 
 .hidden{
   visibility: hidden;
-}
+}

package/es/Tooltip/Tooltip.js

@@ -4,6 +4,7 @@ import { propTypes } from './props/propTypes';
 import { getLibraryConfig } from '../Provider/Config';
 import style from './Tooltip.module.css';
 import ResizeObserver from '../Responsive/ResizeObserver';
+import selectn from 'selectn';
 export default class Tooltip extends React.Component {
   constructor(props) {
     super(props);
@@ -146,7 +147,9 @@ export default class Tooltip extends React.Component {
             //   isContentDotted = element.offsetHeight < element.scrollHeight;
             // }
           } else {
-            isContentDotted = element.parentElement.offsetWidth < element.parentElement.scrollWidth;
+            const offWidth = selectn('parentElement.offsetWidth', element) || 0;
+            const scrollWidth = selectn('parentElement.scrollWidth', element) || 0;
+            isContentDotted = offWidth < scrollWidth;
           }
           let originText = element.innerText.replace(/\s/g, '').toLowerCase();
           let tooltipText = title.replace(/\s/g, '').toLowerCase();