@zohodesk/components 1.0.0-temp-84 → 1.0.0-temp-107

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

@@ -1,233 +1,202 @@
-.semibold {
-  font-family: var(--zd_semibold);
-}
-
-[dir=ltr] .boxPadding {
-  padding-right: var(--zd_size19);
-  padding-left: var(--zd_size19);
-}
-
-[dir=rtl] .boxPadding {
-  padding-left: var(--zd_size19);
-  padding-right: var(--zd_size19);
-}
-
-.container {
-  font-size: var(--zd_font_size16);
-  composes: offSelection from '../common/common.module.css';
-  border-radius: 3px;
-  background-color: var(--zdt_datetime_default_bg);
-}
-
-.header {
-  min-height: var(--zd_size36);
-  composes: boxPadding;
-  text-align: center;
-  background-color: var(--zdt_datetime_header_bg);
-  border-radius: 0 0 2px 2px;
-  border-bottom: 1px solid var(--zdt_datetime_header_border);
-}
-
-.datesStr {
-  font-family: var(--zd_regular);
-}
-
-.grid {
-  width: var(--zd_size28);
-  height: var(--zd_size28);
-  line-height: var(--zd_size18);
-  text-align: center;
-  padding: var(--zd_size4) 0;
-  border-radius: 50%;
-  border: 1px solid transparent;
-}
-
-.thArrow,
-.datesStr {
-  font-size: var(--zd_font_size13);
-  color: var(--zdt_datetime_datestr_text);
-}
-
-.thArrow, .datesStr {
-  cursor: pointer;
-}
-
-.thArrow:hover,
-.datesStr:hover {
-  color: var(--zdt_datetime_datestr_text);
-}
-
-.thArrow:hover, .datesStr:hover {
-  background: var(--zdt_datetime_datestr_hover_bg);
-}
-
-[dir=ltr] .navigation {
-  margin-left: var(--zd_size2);
-}
-
-[dir=rtl] .navigation {
-  margin-right: var(--zd_size2);
-}
-
-.thMonYear {
-  font-size: var(--zd_font_size13);
-  line-height: var(--zd_size24);
-  color: var(--zdt_datetime_datestr_text);
-  composes: semibold;
-}
-
-.dateContainer {
-  margin: 0 var(--zd_size19) 0 var(--zd_size19);
-  padding: var(--zd_size6) 0 var(--zd_size10) 0;
-}
-
-.separator {
-  border-bottom: 1px dotted var(--zdt_datetime_separator_border);
-}
-
-.days {
-  min-height: var(--zd_size36);
-  composes: boxPadding;
-  composes: alignBetween from '../common/common.module.css';
-  padding-top: var(--zd_size7);
-}
-
-.daysStr {
-  font-size: var(--zd_font_size10);
-  color: var(--zdt_datetime_daystr_text);
-  text-transform: uppercase;
-  composes: semibold;
-}
-
-.dateRow {
-  height: var(--zd_size28);
-  composes: alignBetween from '../common/common.module.css';
-  margin: var(--zd_size1) 0 var(--zd_size5);
-}
-
-.dateRow:last-child {
-  margin-bottom: 0;
-}
-
-.sunday,
-.sunday:hover,
-.invalidDate.sunday:hover {
-  color: var(--zdt_datetime_invalid_hover_text);
-}
-
-.invalidDate {
-  color: var(--zdt_datetime_invalid_text);
-}
-
-.invalidDate.sunday {
-  color: var(--zdt_datetime_invaliddate_text);
-}
-
-.active,
-.active:hover,
-.active.today,
-.active:hover.today:hover {
-  color: var(--zdt_datetime_today_text);
-}
-
-.active, .active:hover, .active.today, .active:hover.today:hover {
-  background-color: var(--zdt_datetime_selected_bg);
-  border-radius: 50%;
-}
-
-.today {
-  border: 1px solid var(--zdt_datetime_today_border);
-  border-radius: 50%;
-}
-
-.today:hover {
-  border: 1px solid var(--zdt_datetime_today_border);
-  background-color: var(--zdt_datetime_datestr_hover_bg);
-}
-
-.timesection {
-  padding-top: var(--zd_size5);
-  padding-bottom: var(--zd_size10);
-}
-
-.dropDownContainer {
-  padding: 0 var(--zd_size5);
-}
-
-.dropDown {
-  width: var(--zd_size60);
-  display: inline-block;
-  position: relative;
-  margin: 0 var(--zd_size4);
-}
-
-.footer {
-  margin-top: var(--zd_size10);
-  padding-bottom: var(--zd_size12);
-}
-
-.timesection,
-.footer {
-  composes: boxPadding;
-}
-
-.space {
-  display: inline-block;
-  width: var(--zd_size15);
-}
-
-.downArrow {
-  color: var(--zdt_datetime_daystr_text);
-}
-
-[dir=ltr] .downArrow {
-  margin-left: var(--zd_size2);
-}
-
-[dir=rtl] .downArrow {
-  margin-right: var(--zd_size2);
-}
-
-.dateText {
-  cursor: pointer;
-}
-
-.dateText:hover .downArrow {
-  color: var(--zdt_datetime_datestr_text);
-}
-
-.text {
-  composes: boxPadding;
-  font-size: var(--zd_font_size11);
-  text-transform: uppercase;
-  color: var(--zdt_datetime_text);
-  composes: semibold;
-  display: block;
-  margin-top: var(--zd_size14);
-}
-
-.yearContainer {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-
-[dir=ltr] .yearContainer {
-  left: 0;
-}
-
-[dir=rtl] .yearContainer {
-  right: 0;
-}
-
-.subContainer {
-  position: relative;
-}
-
-.dropBox {
-  width: 100%;
-  border-radius: 3px;
-  box-shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
-  background-color: var(--zdt_dropbox_default_bg);
+.semibold {
+  font-family: var(--zd_semibold);
+}
+
+.boxPadding {
+  padding-right: var(--zd_size19);
+  padding-left: var(--zd_size19);
+}
+
+.container {
+  border-radius: 3px;
+  background-color: var(--zdt_datetime_default_bg);
+  font-size: var(--zd_font_size16);
+  composes: offSelection from '../common/common.module.css';
+}
+
+.header {
+  min-height: var(--zd_size36);
+  text-align: center;
+  background-color: var(--zdt_datetime_header_bg);
+  border-radius: 0 0 2px 2px;
+  border-bottom: 1px solid var(--zdt_datetime_header_border);
+  composes: boxPadding;
+}
+
+.datesStr {
+  font-family: var(--zd_regular);
+}
+
+.grid {
+  width: var(--zd_size28);
+  height: var(--zd_size28);
+  line-height: var(--zd_size18);
+  text-align: center;
+  padding: var(--zd_size4) 0;
+  border-radius: 50%;
+  border: 1px solid transparent;
+}
+
+.thArrow,
+.datesStr {
+  font-size: var(--zd_font_size13);
+  color: var(--zdt_datetime_datestr_text);
+  cursor: pointer;
+}
+
+.thArrow:hover,
+.datesStr:hover {
+  color: var(--zdt_datetime_datestr_text);
+  background: var(--zdt_datetime_datestr_hover_bg);
+}
+
+.navigation {
+  margin-left: var(--zd_size2);
+}
+
+.thMonYear {
+  font-size: var(--zd_font_size13);
+  line-height: var(--zd_size24);
+  color: var(--zdt_datetime_datestr_text);
+  composes: semibold;
+  display: initial
+}
+
+.dateContainer {
+  margin: 0 var(--zd_size19) 0 var(--zd_size19);
+  padding: var(--zd_size6) 0 var(--zd_size10) 0;
+}
+
+.separator {
+  border-bottom: 1px dotted var(--zdt_datetime_separator_border);
+}
+
+.days {
+  min-height: var(--zd_size36);
+  padding-top: var(--zd_size7);
+  composes: boxPadding;
+  composes: alignBetween from '../common/common.module.css';
+}
+
+.daysStr {
+  font-size: var(--zd_font_size10);
+  color: var(--zdt_datetime_daystr_text);
+  text-transform: uppercase;
+  composes: semibold;
+}
+
+.dateRow {
+  height: var(--zd_size28);
+  margin: var(--zd_size1) 0 var(--zd_size5);
+  composes: alignBetween from '../common/common.module.css';
+}
+
+.dateRow:last-child {
+  margin-bottom: 0;
+}
+
+.sunday,
+.sunday:hover,
+.invalidDate.sunday:hover {
+  color: var(--zdt_datetime_invalid_hover_text);
+}
+
+.invalidDate {
+  color: var(--zdt_datetime_invalid_text);
+}
+
+.invalidDate.sunday {
+  color: var(--zdt_datetime_invaliddate_text);
+}
+
+.active,
+.active:hover,
+.active.today,
+.active:hover.today:hover {
+  background-color: var(--zdt_datetime_selected_bg);
+  color: var(--zdt_datetime_today_text);
+  border-radius: 50%;
+}
+
+.today {
+  border: 1px solid var(--zdt_datetime_today_border);
+  border-radius: 50%;
+}
+
+.today:hover {
+  border: 1px solid var(--zdt_datetime_today_border);
+  background-color: var(--zdt_datetime_datestr_hover_bg);
+}
+
+.timesection {
+  padding-top: var(--zd_size5);
+  padding-bottom: var(--zd_size10);
+}
+
+.dropDownContainer {
+  padding: 0 var(--zd_size5);
+}
+
+.dropDown {
+  width: var(--zd_size60);
+  display: inline-block;
+  margin: 0 var(--zd_size4);
+  position: relative;
+}
+
+.footer {
+  margin-top: var(--zd_size10);
+  padding-bottom: var(--zd_size12);
+}
+
+.timesection,
+.footer {
+  composes: boxPadding;
+}
+
+.space {
+  display: inline-block;
+  width: var(--zd_size15);
+}
+
+.downArrow {
+  margin-left: var(--zd_size2);
+  color: var(--zdt_datetime_daystr_text);
+}
+
+.dateText {
+  cursor: pointer;
+}
+
+.dateText:hover .downArrow {
+  color: var(--zdt_datetime_datestr_text);
+}
+
+.text {
+  composes: boxPadding;
+  font-size: var(--zd_font_size11);
+  text-transform: uppercase;
+  color: var(--zdt_datetime_text);
+  margin-top: var(--zd_size14);
+  composes: semibold;
+  display: block;
+}
+
+.yearContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.subContainer {
+  position: relative;
+}
+
+.dropBox {
+  width: 100%;
+  border-radius: 3px;
+  box-shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
+  background-color: var(--zdt_dropbox_default_bg);
 }

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);
   }
 }
@@ -44,7 +48,9 @@ export default class DateTimePopupHeader extends PureComponent {
       isYearView,
       prevMonthTitleText,
       nextMonthTitleText,
-      onModifyCalendar
+      onModifyCalendar,
+      a11y,
+      ariaLabel
     } = this.props;
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
@@ -54,19 +60,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 +88,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/DateWidget.module.css

@@ -1,38 +1,34 @@
-/* $Id */
-.container {
-  position: relative;
-  composes: offSelection from '../common/common.module.css';
-}
-.readOnly, .readOnly > input, .disabled {
-  cursor: not-allowed;
-}
-.enabled {
-  cursor: pointer;
-}
-.textBox {
-  position: relative;
-}
-.inputLine {
-  position: absolute;
-  bottom: 0;
-  transition: border var(--zd_transition2) linear 0s;
-  border-bottom: 1px solid var(--zdt_datewidget_input_border);
-}
-[dir=ltr] .inputLine {
-  left: 0;
-  right: 0;
-}
-[dir=rtl] .inputLine {
-  right: 0;
-  left: 0;
-}
-.enabled:hover .inputLine {
-  border-bottom-color: var(--zdt_datewidget_enabled_border);
-}
-.textBoxFocus .inputLine {
-  border-bottom-color: var(--zdt_datewidget_textboxfocus_border);
-}
-
-.placeHolder input {
-  color: var(--zdt_datewidget_placeholder_text);
-}
+/* $Id */
+.container {
+  position: relative;
+  composes: offSelection from '../common/common.module.css';
+}
+.readOnly,
+.readOnly > input,
+.disabled {
+  cursor: not-allowed;
+}
+.enabled {
+  cursor: pointer;
+}
+.textBox {
+  position: relative;
+}
+.inputLine {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-bottom: 1px solid var(--zdt_datewidget_input_border);
+  transition: border var(--zd_transition2) linear 0s;
+}
+.enabled:hover .inputLine {
+  border-bottom-color: var(--zdt_datewidget_enabled_border);
+}
+.textBoxFocus .inputLine {
+  border-bottom-color: var(--zdt_datewidget_textboxfocus_border);
+}
+
+.placeHolder input {
+  color: var(--zdt_datewidget_placeholder_text);
+}

package/es/DateTime/DaysRow.js

@@ -11,7 +11,9 @@ export default class DaysRow extends PureComponent {
   render() {
     const {
       dayNames,
-      dayNamesShort
+      dayNamesShort,
+      a11y,
+      ariaLabel
     } = this.props;
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
@@ -20,7 +22,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])));
   }
 }