@atlaskit/form 12.5.0 → 12.5.2

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 +13 -0
  2. package/dist/cjs/messages.js +15 -33
  3. package/dist/es2019/messages.js +12 -27
  4. package/dist/esm/messages.js +16 -34
  5. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/form
2
2
 
3
+ ## 12.5.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`020fb99d98aff`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/020fb99d98aff) -
8
+ Simplified screenreader logic for message components when MessageWrapper is present
9
+
10
+ ## 12.5.1
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+
3
16
  ## 12.5.0
4
17
 
5
18
  ### Minor Changes
package/dist/cjs/messages.js CHANGED
@@ -63,41 +63,26 @@ var Message = function Message(_ref2) {
63
63
  fieldId = _ref2.fieldId,
64
64
  testId = _ref2.testId;
65
65
  var icon = messageIcons[appearance];
66
- var isFeatureFlagEnabled = (0, _platformFeatureFlags.fg)('platform_dst_form_screenreader_message_fix');
67
66
  var _useContext = (0, _react.useContext)(MessageWrapperContext),
68
67
  isWrapper = _useContext.isWrapper;
69
- var _useState = (0, _react.useState)(isWrapper),
68
+ var _useState = (0, _react.useState)(false),
70
69
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
71
- shouldRenderContent = _useState2[0],
72
- setShouldRenderContent = _useState2[1];
70
+ shouldRenderAfterDelay = _useState2[0],
71
+ setShouldRenderAfterDelay = _useState2[1];
73
72
 
74
73
  // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
75
- var messageRef = (0, _react.useRef)(null);
76
- var _useState3 = (0, _react.useState)(isWrapper),
77
- _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
78
- hasMessageWrapper = _useState4[0],
79
- setHasMessageWrapper = _useState4[1];
74
+ var isDelayRenderEnabled = (0, _platformFeatureFlags.fg)('platform_dst_form_screenreader_message_fix') && !isWrapper;
80
75
  (0, _react.useEffect)(function () {
81
- if (isFeatureFlagEnabled) {
82
- if (!isWrapper) {
83
- // Delay rendering to ensure aria-live announcements work on first render if there is no wrapper
84
- var timer = setTimeout(function () {
85
- setShouldRenderContent(true);
86
- }, 10);
87
- return function () {
88
- return clearTimeout(timer);
89
- };
90
- } else {
91
- // When using MessageWrapper, render content immediately since the wrapper handles aria-live
92
- setShouldRenderContent(true);
93
- }
94
- } else {
95
- // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
96
- if (messageRef.current) {
97
- setHasMessageWrapper(isWrapper);
98
- }
76
+ if (isDelayRenderEnabled) {
77
+ // Only delay rendering if there is no wrapper and feature flag is enabled
78
+ var timer = setTimeout(function () {
79
+ setShouldRenderAfterDelay(true);
80
+ }, 10);
81
+ return function () {
82
+ return clearTimeout(timer);
83
+ };
99
84
  }
100
- }, [isWrapper, isFeatureFlagEnabled]);
85
+ }, [isDelayRenderEnabled]);
101
86
 
102
87
  /**
103
88
  * The wrapping span is necessary to preserve spaces between children.
@@ -112,15 +97,12 @@ var Message = function Message(_ref2) {
112
97
  return /*#__PURE__*/React.createElement("div", {
113
98
  "data-testid": testId,
114
99
  id: fieldId
115
- // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
116
- ,
117
- ref: messageRef
118
100
  // For backwards compatability, if there is a wrapper, aria-live is not needed
119
101
  // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
120
102
  ,
121
- "aria-live": !hasMessageWrapper ? 'polite' : undefined,
103
+ "aria-live": !isWrapper ? 'polite' : undefined,
122
104
  className: (0, _runtime.ax)(["_zulp12x7 _11c8dcr7 _1e0c1txw _1bah1q9y _1pfh1b66", messageAppearanceStyles[appearance]])
123
- }, isFeatureFlagEnabled ? shouldRenderContent && childrenToRender : childrenToRender);
105
+ }, isDelayRenderEnabled ? shouldRenderAfterDelay && childrenToRender : childrenToRender);
124
106
  };
125
107
 
126
108
  /**
package/dist/es2019/messages.js CHANGED
@@ -2,7 +2,7 @@
2
2
  import "./messages.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
- import { createContext, Fragment, useContext, useEffect, useRef, useState } from 'react';
5
+ import { createContext, Fragment, useContext, useEffect, useState } from 'react';
6
6
  import ErrorIcon from '@atlaskit/icon/core/migration/status-error--error';
7
7
  import SuccessIcon from '@atlaskit/icon/core/migration/status-success--editor-success';
8
8
  import { fg } from '@atlaskit/platform-feature-flags';
@@ -53,34 +53,22 @@ const Message = ({
53
53
  testId
54
54
  }) => {
55
55
  const icon = messageIcons[appearance];
56
- const isFeatureFlagEnabled = fg('platform_dst_form_screenreader_message_fix');
57
56
  const {
58
57
  isWrapper
59
58
  } = useContext(MessageWrapperContext);
60
- const [shouldRenderContent, setShouldRenderContent] = useState(isWrapper);
59
+ const [shouldRenderAfterDelay, setShouldRenderAfterDelay] = useState(false);
61
60
 
62
61
  // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
63
- const messageRef = useRef(null);
64
- const [hasMessageWrapper, setHasMessageWrapper] = useState(isWrapper);
62
+ const isDelayRenderEnabled = fg('platform_dst_form_screenreader_message_fix') && !isWrapper;
65
63
  useEffect(() => {
66
- if (isFeatureFlagEnabled) {
67
- if (!isWrapper) {
68
- // Delay rendering to ensure aria-live announcements work on first render if there is no wrapper
69
- const timer = setTimeout(() => {
70
- setShouldRenderContent(true);
71
- }, 10);
72
- return () => clearTimeout(timer);
73
- } else {
74
- // When using MessageWrapper, render content immediately since the wrapper handles aria-live
75
- setShouldRenderContent(true);
76
- }
77
- } else {
78
- // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
79
- if (messageRef.current) {
80
- setHasMessageWrapper(isWrapper);
81
- }
64
+ if (isDelayRenderEnabled) {
65
+ // Only delay rendering if there is no wrapper and feature flag is enabled
66
+ const timer = setTimeout(() => {
67
+ setShouldRenderAfterDelay(true);
68
+ }, 10);
69
+ return () => clearTimeout(timer);
82
70
  }
83
- }, [isWrapper, isFeatureFlagEnabled]);
71
+ }, [isDelayRenderEnabled]);
84
72
 
85
73
  /**
86
74
  * The wrapping span is necessary to preserve spaces between children.
@@ -95,15 +83,12 @@ const Message = ({
95
83
  return /*#__PURE__*/React.createElement("div", {
96
84
  "data-testid": testId,
97
85
  id: fieldId
98
- // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
99
- ,
100
- ref: messageRef
101
86
  // For backwards compatability, if there is a wrapper, aria-live is not needed
102
87
  // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
103
88
  ,
104
- "aria-live": !hasMessageWrapper ? 'polite' : undefined,
89
+ "aria-live": !isWrapper ? 'polite' : undefined,
105
90
  className: ax(["_zulp12x7 _11c8dcr7 _1e0c1txw _1bah1q9y _1pfh1b66", messageAppearanceStyles[appearance]])
106
- }, isFeatureFlagEnabled ? shouldRenderContent && childrenToRender : childrenToRender);
91
+ }, isDelayRenderEnabled ? shouldRenderAfterDelay && childrenToRender : childrenToRender);
107
92
  };
108
93
 
109
94
  /**
package/dist/esm/messages.js CHANGED
@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import "./messages.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
- import { createContext, Fragment, useContext, useEffect, useRef, useState } from 'react';
6
+ import { createContext, Fragment, useContext, useEffect, useState } from 'react';
7
7
  import ErrorIcon from '@atlaskit/icon/core/migration/status-error--error';
8
8
  import SuccessIcon from '@atlaskit/icon/core/migration/status-success--editor-success';
9
9
  import { fg } from '@atlaskit/platform-feature-flags';
@@ -55,41 +55,26 @@ var Message = function Message(_ref2) {
55
55
  fieldId = _ref2.fieldId,
56
56
  testId = _ref2.testId;
57
57
  var icon = messageIcons[appearance];
58
- var isFeatureFlagEnabled = fg('platform_dst_form_screenreader_message_fix');
59
58
  var _useContext = useContext(MessageWrapperContext),
60
59
  isWrapper = _useContext.isWrapper;
61
- var _useState = useState(isWrapper),
60
+ var _useState = useState(false),
62
61
  _useState2 = _slicedToArray(_useState, 2),
63
- shouldRenderContent = _useState2[0],
64
- setShouldRenderContent = _useState2[1];
62
+ shouldRenderAfterDelay = _useState2[0],
63
+ setShouldRenderAfterDelay = _useState2[1];
65
64
 
66
65
  // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
67
- var messageRef = useRef(null);
68
- var _useState3 = useState(isWrapper),
69
- _useState4 = _slicedToArray(_useState3, 2),
70
- hasMessageWrapper = _useState4[0],
71
- setHasMessageWrapper = _useState4[1];
66
+ var isDelayRenderEnabled = fg('platform_dst_form_screenreader_message_fix') && !isWrapper;
72
67
  useEffect(function () {
73
- if (isFeatureFlagEnabled) {
74
- if (!isWrapper) {
75
- // Delay rendering to ensure aria-live announcements work on first render if there is no wrapper
76
- var timer = setTimeout(function () {
77
- setShouldRenderContent(true);
78
- }, 10);
79
- return function () {
80
- return clearTimeout(timer);
81
- };
82
- } else {
83
- // When using MessageWrapper, render content immediately since the wrapper handles aria-live
84
- setShouldRenderContent(true);
85
- }
86
- } else {
87
- // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
88
- if (messageRef.current) {
89
- setHasMessageWrapper(isWrapper);
90
- }
68
+ if (isDelayRenderEnabled) {
69
+ // Only delay rendering if there is no wrapper and feature flag is enabled
70
+ var timer = setTimeout(function () {
71
+ setShouldRenderAfterDelay(true);
72
+ }, 10);
73
+ return function () {
74
+ return clearTimeout(timer);
75
+ };
91
76
  }
92
- }, [isWrapper, isFeatureFlagEnabled]);
77
+ }, [isDelayRenderEnabled]);
93
78
 
94
79
  /**
95
80
  * The wrapping span is necessary to preserve spaces between children.
@@ -104,15 +89,12 @@ var Message = function Message(_ref2) {
104
89
  return /*#__PURE__*/React.createElement("div", {
105
90
  "data-testid": testId,
106
91
  id: fieldId
107
- // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
108
- ,
109
- ref: messageRef
110
92
  // For backwards compatability, if there is a wrapper, aria-live is not needed
111
93
  // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
112
94
  ,
113
- "aria-live": !hasMessageWrapper ? 'polite' : undefined,
95
+ "aria-live": !isWrapper ? 'polite' : undefined,
114
96
  className: ax(["_zulp12x7 _11c8dcr7 _1e0c1txw _1bah1q9y _1pfh1b66", messageAppearanceStyles[appearance]])
115
- }, isFeatureFlagEnabled ? shouldRenderContent && childrenToRender : childrenToRender);
97
+ }, isDelayRenderEnabled ? shouldRenderAfterDelay && childrenToRender : childrenToRender);
116
98
  };
117
99
 
118
100
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/form",
3
- "version": "12.5.0",
3
+ "version": "12.5.2",
4
4
  "description": "A form allows users to input information.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -25,14 +25,14 @@
25
25
  }
26
26
  },
27
27
  "dependencies": {
28
- "@atlaskit/css": "^0.13.0",
28
+ "@atlaskit/css": "^0.14.0",
29
29
  "@atlaskit/ds-lib": "^5.0.0",
30
30
  "@atlaskit/heading": "^5.2.0",
31
31
  "@atlaskit/icon": "^28.1.0",
32
32
  "@atlaskit/platform-feature-flags": "^1.1.0",
33
- "@atlaskit/primitives": "^14.13.0",
33
+ "@atlaskit/primitives": "^14.14.0",
34
34
  "@atlaskit/theme": "^20.0.0",
35
- "@atlaskit/tokens": "^6.2.0",
35
+ "@atlaskit/tokens": "^6.3.0",
36
36
  "@babel/runtime": "^7.0.0",
37
37
  "final-form": "^4.20.3",
38
38
  "final-form-focus": "^1.1.2",