@atlaskit/editor-plugin-date 4.1.9 → 4.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/cjs/ui/DatePicker/index.js +7 -2
  3. package/dist/es2019/ui/DatePicker/index.js +7 -2
  4. package/dist/esm/ui/DatePicker/index.js +7 -2
  5. package/package.json +7 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @atlaskit/editor-plugin-date
2
2
 
3
+ ## 4.1.10
4
+
5
+ ### Patch Changes
6
+
7
+ - [#138373](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/138373)
8
+ [`3a6e2723e498c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3a6e2723e498c) -
9
+ [ux] [A11Y-10137] Add visually hidden alert for when the date picker opens letting screen reader
10
+ users know how to access the date picker popup
11
+ - Updated dependencies
12
+
3
13
  ## 4.1.9
4
14
 
5
15
  ### Patch Changes
package/dist/cjs/ui/DatePicker/index.js CHANGED
@@ -18,10 +18,13 @@ var _react = _interopRequireDefault(require("react"));
18
18
  var _reactIntlNext = require("react-intl-next");
19
19
  var _calendar = _interopRequireDefault(require("@atlaskit/calendar"));
20
20
  var _analytics = require("@atlaskit/editor-common/analytics");
21
+ var _messages = require("@atlaskit/editor-common/messages");
21
22
  var _ui = require("@atlaskit/editor-common/ui");
22
23
  var _utils = require("@atlaskit/editor-common/utils");
23
24
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
25
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
24
26
  var _colors = require("@atlaskit/theme/colors");
27
+ var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
25
28
  var _datePickerInput = _interopRequireDefault(require("./date-picker-input"));
26
29
  function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
27
30
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -142,9 +145,11 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
142
145
  mountTo: mountTo,
143
146
  boundariesElement: boundariesElement,
144
147
  scrollableElement: scrollableElement,
145
- ariaLabel: null,
146
148
  preventOverflow: true
147
- }, /*#__PURE__*/_react.default.createElement(_ui.PlainOutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
149
+ }, (0, _platformFeatureFlags.fg)('editor_a11y_announce_date_picker_open') && /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
150
+ "aria-atomic": true,
151
+ role: "alert"
152
+ }, intl.formatMessage(_messages.dateMessages.datePickerOpenedAlert)), /*#__PURE__*/_react.default.createElement(_ui.PlainOutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
148
153
  return /*#__PURE__*/_react.default.createElement("div", {
149
154
  ref: setOutsideClickTargetRef,
150
155
  className: (0, _runtime.ax)(["_2rko1sit _ca0qv77o _n3tdv77o _19bvv77o _u5f3v77o _16qskkzs _bfhk13b4"]),
package/dist/es2019/ui/DatePicker/index.js CHANGED
@@ -6,10 +6,13 @@ import React from 'react';
6
6
  import { injectIntl } from 'react-intl-next';
7
7
  import Calendar from '@atlaskit/calendar';
8
8
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
9
+ import { dateMessages as messages } from '@atlaskit/editor-common/messages';
9
10
  import { PlainOutsideClickTargetRefContext, Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
10
11
  import { timestampToIsoFormat, timestampToUTCDate } from '@atlaskit/editor-common/utils';
11
12
  import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
13
+ import { fg } from '@atlaskit/platform-feature-flags';
12
14
  import { N0, N60A } from '@atlaskit/theme/colors';
15
+ import VisuallyHidden from '@atlaskit/visually-hidden';
13
16
  const PopupWithListeners = withOuterListeners(Popup);
14
17
  import DatePickerInput from './date-picker-input';
15
18
 
@@ -128,9 +131,11 @@ class DatePicker extends React.Component {
128
131
  mountTo: mountTo,
129
132
  boundariesElement: boundariesElement,
130
133
  scrollableElement: scrollableElement,
131
- ariaLabel: null,
132
134
  preventOverflow: true
133
- }, /*#__PURE__*/React.createElement(PlainOutsideClickTargetRefContext.Consumer, null, setOutsideClickTargetRef => /*#__PURE__*/React.createElement("div", {
135
+ }, fg('editor_a11y_announce_date_picker_open') && /*#__PURE__*/React.createElement(VisuallyHidden, {
136
+ "aria-atomic": true,
137
+ role: "alert"
138
+ }, intl.formatMessage(messages.datePickerOpenedAlert)), /*#__PURE__*/React.createElement(PlainOutsideClickTargetRefContext.Consumer, null, setOutsideClickTargetRef => /*#__PURE__*/React.createElement("div", {
134
139
  ref: setOutsideClickTargetRef,
135
140
  className: ax(["_2rko1sit _ca0qv77o _n3tdv77o _19bvv77o _u5f3v77o _16qsreen _bfhk1bhr"])
136
141
  }, /*#__PURE__*/React.createElement(DatePickerInput, {
package/dist/esm/ui/DatePicker/index.js CHANGED
@@ -13,10 +13,13 @@ import React from 'react';
13
13
  import { injectIntl } from 'react-intl-next';
14
14
  import Calendar from '@atlaskit/calendar';
15
15
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
16
+ import { dateMessages as messages } from '@atlaskit/editor-common/messages';
16
17
  import { PlainOutsideClickTargetRefContext, Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
17
18
  import { timestampToIsoFormat, timestampToUTCDate } from '@atlaskit/editor-common/utils';
18
19
  import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
20
+ import { fg } from '@atlaskit/platform-feature-flags';
19
21
  import { N0, N60A } from '@atlaskit/theme/colors';
22
+ import VisuallyHidden from '@atlaskit/visually-hidden';
20
23
  var PopupWithListeners = withOuterListeners(Popup);
21
24
  import DatePickerInput from './date-picker-input';
22
25
 
@@ -136,9 +139,11 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
136
139
  mountTo: mountTo,
137
140
  boundariesElement: boundariesElement,
138
141
  scrollableElement: scrollableElement,
139
- ariaLabel: null,
140
142
  preventOverflow: true
141
- }, /*#__PURE__*/React.createElement(PlainOutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
143
+ }, fg('editor_a11y_announce_date_picker_open') && /*#__PURE__*/React.createElement(VisuallyHidden, {
144
+ "aria-atomic": true,
145
+ role: "alert"
146
+ }, intl.formatMessage(messages.datePickerOpenedAlert)), /*#__PURE__*/React.createElement(PlainOutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
142
147
  return /*#__PURE__*/React.createElement("div", {
143
148
  ref: setOutsideClickTargetRef,
144
149
  className: ax(["_2rko1sit _ca0qv77o _n3tdv77o _19bvv77o _u5f3v77o _16qskkzs _bfhk13b4"]),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-date",
3
- "version": "4.1.9",
3
+ "version": "4.1.10",
4
4
  "description": "Date plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -37,9 +37,9 @@
37
37
  "@atlaskit/calendar": "^17.1.0",
38
38
  "@atlaskit/css": "^0.10.0",
39
39
  "@atlaskit/date": "^2.0.0",
40
- "@atlaskit/editor-common": "^103.0.0",
40
+ "@atlaskit/editor-common": "^103.1.0",
41
41
  "@atlaskit/editor-plugin-analytics": "^2.2.0",
42
- "@atlaskit/editor-plugin-annotation": "^2.2.0",
42
+ "@atlaskit/editor-plugin-annotation": "^2.3.0",
43
43
  "@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
44
44
  "@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
45
45
  "@atlaskit/editor-prosemirror": "7.0.0",
@@ -52,6 +52,7 @@
52
52
  "@atlaskit/theme": "^18.0.0",
53
53
  "@atlaskit/tmp-editor-statsig": "^4.6.0",
54
54
  "@atlaskit/tokens": "^4.7.0",
55
+ "@atlaskit/visually-hidden": "^3.0.0",
55
56
  "@babel/runtime": "^7.0.0",
56
57
  "bind-event-listener": "^3.0.0",
57
58
  "date-fns": "^2.17.0",
@@ -114,6 +115,9 @@
114
115
  "platform-feature-flags": {
115
116
  "editor_inline_comments_paste_insert_nodes": {
116
117
  "type": "boolean"
118
+ },
119
+ "editor_a11y_announce_date_picker_open": {
120
+ "type": "boolean"
117
121
  }
118
122
  }
119
123
  }