baseui 0.0.0-next-84297ea → 0.0.0-next-aadc4ef

package/datepicker/datepicker.d.ts

@@ -11,10 +11,11 @@ type DatepickerState = {
     isPseudoFocused: boolean;
     lastActiveElm: HTMLElement | undefined | null;
     inputValue?: string;
+    ariaDescribedby: string | null;
 };
 export default class Datepicker<T = Date> extends React.Component<DatepickerProps<T>, DatepickerState> {
     static defaultProps: {
-        'aria-describedby': string;
+        'aria-describedby': any;
         value: any;
         formatString: string;
         adapter: import("./utils/types").DateIOAdapter<Date>;
@@ -22,6 +23,7 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
     calendar: HTMLElement | undefined | null;
     dateHelpers: DateHelpers<T>;
     constructor(props: DatepickerProps<T>);
+    componentDidMount(): void;
     handleChange: (a: T | undefined | null | Array<T | undefined | null>) => void;
     onCalendarSelect: (a: {
         readonly date: T | undefined | null | Array<T | undefined | null>;
@@ -38,6 +40,7 @@ export default class Datepicker<T = Date> extends React.Component<DatepickerProp
     handleKeyDown: (event: KeyboardEvent) => void;
     focusCalendar: () => void;
     normalizeDashes: (inputValue: string) => string;
+    generateAriaDescribedByIds: () => string;
     hasLockedBehavior: () => boolean;
     componentDidUpdate(prevProps: DatepickerProps<T>): void;
     getPlaceholder: () => string;

package/datepicker/datepicker.js

@@ -9,6 +9,8 @@ exports.default = exports.DEFAULT_DATE_FORMAT = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
+var _reactUid = require("react-uid");
+
 var _input = require("../input");
 
 var _popover = require("../popover");
@@ -483,6 +485,16 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       return inputValue.replace(/-/g, INPUT_DELIMITER).replace(/—/g, INPUT_DELIMITER);
     });
 
+    _defineProperty(_assertThisInitialized(_this), "generateAriaDescribedByIds", function () {
+      var idList = _this.state.ariaDescribedby;
+
+      if (_this.props['aria-describedby']) {
+        idList = "".concat(_this.props['aria-describedby'], " ").concat(idList);
+      }
+
+      return idList;
+    });
+
     _defineProperty(_assertThisInitialized(_this), "hasLockedBehavior", function () {
       return _this.props.rangedCalendarBehavior === _constants.RANGED_CALENDAR_BEHAVIOR.locked && _this.props.range && _this.props.separateRangeInputs;
     });
@@ -498,12 +510,21 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       selectedInput: null,
       isPseudoFocused: false,
       lastActiveElm: null,
-      inputValue: _this.formatDisplayValue(props.value) || ''
+      inputValue: _this.formatDisplayValue(props.value) || '',
+      ariaDescribedby: null // we initialize this post-mount to prevent SSR hydration issue
+
     };
     return _this;
   }
 
   _createClass(Datepicker, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.setState({
+        ariaDescribedby: (0, _reactUid.uid)(this)
+      });
+    }
+  }, {
     key: "getNullDatePlaceholder",
     value: function getNullDatePlaceholder(formatString) {
       return (this.getMask() || formatString).split(INPUT_DELIMITER)[0].replace(/[0-9]|[a-z]/g, ' ');
@@ -574,7 +595,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         "aria-label": inputLabel,
         error: this.props.error,
         positive: this.props.positive,
-        "aria-describedby": this.props['aria-describedby'],
+        "aria-describedby": this.generateAriaDescribedByIds(),
         "aria-labelledby": this.props['aria-labelledby'],
         "aria-required": this.props.required || null,
         disabled: this.props.disabled,
@@ -659,7 +680,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
           $separateRangeInputs: _this4.props.range && _this4.props.separateRangeInputs
         }), _this4.props.range && _this4.props.separateRangeInputs ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StartDate, startDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, startDateLabel), _this4.renderInputComponent(locale, _constants.INPUT_ROLE.startDate)), /*#__PURE__*/React.createElement(EndDate, endDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, endDateLabel), _this4.renderInputComponent(locale, _constants.INPUT_ROLE.endDate))) : /*#__PURE__*/React.createElement(React.Fragment, null, _this4.renderInputComponent(locale)))), /*#__PURE__*/React.createElement("p", {
           // @ts-ignore
-          id: _this4.props['aria-describedby'],
+          id: _this4.state.ariaDescribedby,
           style: {
             position: 'fixed',
             width: '0px',
@@ -712,7 +733,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 exports.default = Datepicker;
 
 _defineProperty(Datepicker, "defaultProps", {
-  'aria-describedby': 'datepicker--screenreader--message--input',
+  'aria-describedby': null,
   // @ts-ignore
   value: null,
   formatString: DEFAULT_DATE_FORMAT,

package/es/datepicker/datepicker.js

@@ -9,6 +9,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
+import { uid } from 'react-uid';
 import { MaskedInput } from '../input';
 import { Popover, PLACEMENT, ACCESSIBILITY_TYPE } from '../popover';
 import Calendar from './calendar';
@@ -381,6 +382,16 @@ export default class Datepicker extends React.Component {
       return inputValue.replace(/-/g, INPUT_DELIMITER).replace(/—/g, INPUT_DELIMITER);
     });
 
+    _defineProperty(this, "generateAriaDescribedByIds", () => {
+      let idList = this.state.ariaDescribedby;
+
+      if (this.props['aria-describedby']) {
+        idList = `${this.props['aria-describedby']} ${idList}`;
+      }
+
+      return idList;
+    });
+
     _defineProperty(this, "hasLockedBehavior", () => {
       return this.props.rangedCalendarBehavior === RANGED_CALENDAR_BEHAVIOR.locked && this.props.range && this.props.separateRangeInputs;
     });
@@ -394,10 +405,18 @@ export default class Datepicker extends React.Component {
       selectedInput: null,
       isPseudoFocused: false,
       lastActiveElm: null,
-      inputValue: this.formatDisplayValue(props.value) || ''
+      inputValue: this.formatDisplayValue(props.value) || '',
+      ariaDescribedby: null // we initialize this post-mount to prevent SSR hydration issue
+
     };
   }
 
+  componentDidMount() {
+    this.setState({
+      ariaDescribedby: uid(this)
+    });
+  }
+
   getNullDatePlaceholder(formatString) {
     return (this.getMask() || formatString).split(INPUT_DELIMITER)[0].replace(/[0-9]|[a-z]/g, ' ');
   }
@@ -447,7 +466,7 @@ export default class Datepicker extends React.Component {
       "aria-label": inputLabel,
       error: this.props.error,
       positive: this.props.positive,
-      "aria-describedby": this.props['aria-describedby'],
+      "aria-describedby": this.generateAriaDescribedByIds(),
       "aria-labelledby": this.props['aria-labelledby'],
       "aria-required": this.props.required || null,
       disabled: this.props.disabled,
@@ -501,7 +520,7 @@ export default class Datepicker extends React.Component {
       $separateRangeInputs: this.props.range && this.props.separateRangeInputs
     }), this.props.range && this.props.separateRangeInputs ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StartDate, startDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, startDateLabel), this.renderInputComponent(locale, INPUT_ROLE.startDate)), /*#__PURE__*/React.createElement(EndDate, endDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, endDateLabel), this.renderInputComponent(locale, INPUT_ROLE.endDate))) : /*#__PURE__*/React.createElement(React.Fragment, null, this.renderInputComponent(locale)))), /*#__PURE__*/React.createElement("p", {
       // @ts-ignore
-      id: this.props['aria-describedby'],
+      id: this.state.ariaDescribedby,
       style: {
         position: 'fixed',
         width: '0px',
@@ -549,7 +568,7 @@ export default class Datepicker extends React.Component {
 }
 
 _defineProperty(Datepicker, "defaultProps", {
-  'aria-describedby': 'datepicker--screenreader--message--input',
+  'aria-describedby': null,
   // @ts-ignore
   value: null,
   formatString: DEFAULT_DATE_FORMAT,

package/esm/datepicker/datepicker.js

@@ -55,6 +55,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
+import { uid } from 'react-uid';
 import { MaskedInput } from '../input';
 import { Popover, PLACEMENT, ACCESSIBILITY_TYPE } from '../popover';
 import Calendar from './calendar';
@@ -464,6 +465,16 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       return inputValue.replace(/-/g, INPUT_DELIMITER).replace(/—/g, INPUT_DELIMITER);
     });
 
+    _defineProperty(_assertThisInitialized(_this), "generateAriaDescribedByIds", function () {
+      var idList = _this.state.ariaDescribedby;
+
+      if (_this.props['aria-describedby']) {
+        idList = "".concat(_this.props['aria-describedby'], " ").concat(idList);
+      }
+
+      return idList;
+    });
+
     _defineProperty(_assertThisInitialized(_this), "hasLockedBehavior", function () {
       return _this.props.rangedCalendarBehavior === RANGED_CALENDAR_BEHAVIOR.locked && _this.props.range && _this.props.separateRangeInputs;
     });
@@ -479,12 +490,21 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
       selectedInput: null,
       isPseudoFocused: false,
       lastActiveElm: null,
-      inputValue: _this.formatDisplayValue(props.value) || ''
+      inputValue: _this.formatDisplayValue(props.value) || '',
+      ariaDescribedby: null // we initialize this post-mount to prevent SSR hydration issue
+
     };
     return _this;
   }
 
   _createClass(Datepicker, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.setState({
+        ariaDescribedby: uid(this)
+      });
+    }
+  }, {
     key: "getNullDatePlaceholder",
     value: function getNullDatePlaceholder(formatString) {
       return (this.getMask() || formatString).split(INPUT_DELIMITER)[0].replace(/[0-9]|[a-z]/g, ' ');
@@ -555,7 +575,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
         "aria-label": inputLabel,
         error: this.props.error,
         positive: this.props.positive,
-        "aria-describedby": this.props['aria-describedby'],
+        "aria-describedby": this.generateAriaDescribedByIds(),
         "aria-labelledby": this.props['aria-labelledby'],
         "aria-required": this.props.required || null,
         disabled: this.props.disabled,
@@ -640,7 +660,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
           $separateRangeInputs: _this4.props.range && _this4.props.separateRangeInputs
         }), _this4.props.range && _this4.props.separateRangeInputs ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StartDate, startDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, startDateLabel), _this4.renderInputComponent(locale, INPUT_ROLE.startDate)), /*#__PURE__*/React.createElement(EndDate, endDateProps, /*#__PURE__*/React.createElement(InputLabel, inputLabelProps, endDateLabel), _this4.renderInputComponent(locale, INPUT_ROLE.endDate))) : /*#__PURE__*/React.createElement(React.Fragment, null, _this4.renderInputComponent(locale)))), /*#__PURE__*/React.createElement("p", {
           // @ts-ignore
-          id: _this4.props['aria-describedby'],
+          id: _this4.state.ariaDescribedby,
           style: {
             position: 'fixed',
             width: '0px',
@@ -691,7 +711,7 @@ var Datepicker = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 
 _defineProperty(Datepicker, "defaultProps", {
-  'aria-describedby': 'datepicker--screenreader--message--input',
+  'aria-describedby': null,
   // @ts-ignore
   value: null,
   formatString: DEFAULT_DATE_FORMAT,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-next-84297ea",
+  "version": "0.0.0-next-aadc4ef",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",