@atlaskit/form 12.0.16 → 12.1.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/form
 
+## 12.1.0
+
+### Minor Changes
+
+- [`a32c90b3928be`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a32c90b3928be) -
+  We are testing a fix to message components behind a feature flag. There was an issue with messages
+  that made them not announce when using screenreaders, this has been fixed by adding a slight delay
+  to render message content. If this fix is successful it will be available in a later release.
+
 ## 12.0.16
 
 ### Patch Changes

package/CheckboxField/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/entry-points/checkbox-field.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/entry-points/checkbox-field.d.ts"
       ]

package/Field/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/entry-points/field.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/entry-points/field.d.ts"
       ]

package/Fieldset/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/entry-points/fieldset.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/entry-points/fieldset.d.ts"
       ]

package/Form/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/entry-points/form.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/entry-points/form.d.ts"
       ]

package/FormFooter/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/entry-points/form-footer.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/entry-points/form-footer.d.ts"
       ]

package/FormHeader/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/entry-points/form-header.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/entry-points/form-header.d.ts"
       ]

package/FormSection/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/entry-points/form-section.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/entry-points/form-section.d.ts"
       ]

package/Label/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/entry-points/label.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/entry-points/label.d.ts"
       ]

package/Messages/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/entry-points/messages.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/entry-points/messages.d.ts"
       ]

package/RangeField/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/entry-points/range-field.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/entry-points/range-field.d.ts"
       ]

package/dist/cjs/messages.js

@@ -14,6 +14,7 @@ var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _statusErrorError = _interopRequireDefault(require("@atlaskit/icon/core/migration/status-error--error"));
 var _statusSuccessEditorSuccess = _interopRequireDefault(require("@atlaskit/icon/core/migration/status-success--editor-success"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _fieldIdContext = require("./field-id-context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
@@ -62,18 +63,41 @@ var Message = function Message(_ref2) {
     fieldId = _ref2.fieldId,
     testId = _ref2.testId;
   var icon = messageIcons[appearance];
-  var messageRef = (0, _react.useRef)(null);
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    hasMessageWrapper = _useState2[0],
-    setHasMessageWrapper = _useState2[1];
+  var isFeatureFlagEnabled = (0, _platformFeatureFlags.fg)('platform_dst_form_screenreader_message_fix');
   var _useContext = (0, _react.useContext)(MessageWrapperContext),
     isWrapper = _useContext.isWrapper;
+  var _useState = (0, _react.useState)(isWrapper),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    shouldRenderContent = _useState2[0],
+    setShouldRenderContent = _useState2[1];
+
+  // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
+  var messageRef = (0, _react.useRef)(null);
+  var _useState3 = (0, _react.useState)(isWrapper),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    hasMessageWrapper = _useState4[0],
+    setHasMessageWrapper = _useState4[1];
   (0, _react.useEffect)(function () {
-    if (messageRef.current) {
-      setHasMessageWrapper(isWrapper);
+    if (isFeatureFlagEnabled) {
+      if (!isWrapper) {
+        // Delay rendering to ensure aria-live announcements work on first render if there is no wrapper
+        var timer = setTimeout(function () {
+          setShouldRenderContent(true);
+        }, 10);
+        return function () {
+          return clearTimeout(timer);
+        };
+      } else {
+        // When using MessageWrapper, render content immediately since the wrapper handles aria-live
+        setShouldRenderContent(true);
+      }
+    } else {
+      // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
+      if (messageRef.current) {
+        setHasMessageWrapper(isWrapper);
+      }
     }
-  }, [isWrapper]);
+  }, [isWrapper, isFeatureFlagEnabled]);
 
   /**
    * The wrapping span is necessary to preserve spaces between children.
@@ -84,15 +108,19 @@ var Message = function Message(_ref2) {
    * less DOM element.
    */
   var content = typeof children === 'string' ? children : /*#__PURE__*/React.createElement("span", null, children);
+  var childrenToRender = /*#__PURE__*/React.createElement(_react.Fragment, null, icon && /*#__PURE__*/React.createElement(IconWrapper, null, icon), content);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
-    id: fieldId,
+    id: fieldId
+    // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
+    ,
     ref: messageRef
     // For backwards compatability, if there is a wrapper, aria-live is not needed
+    // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
     ,
     "aria-live": !hasMessageWrapper ? 'polite' : undefined,
     className: (0, _runtime.ax)(["_zulp12x7 _11c8dcr7 _1e0c1txw _1bah1q9y _1pfh1b66", messageAppearanceStyles[appearance]])
-  }, icon && /*#__PURE__*/React.createElement(IconWrapper, null, icon), content);
+  }, isFeatureFlagEnabled ? shouldRenderContent && childrenToRender : childrenToRender);
 };
 
 /**

package/dist/es2019/messages.js

@@ -2,9 +2,10 @@
 import "./messages.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import { createContext, Fragment, useContext, useEffect, useRef, useState } from 'react';
 import ErrorIcon from '@atlaskit/icon/core/migration/status-error--error';
 import SuccessIcon from '@atlaskit/icon/core/migration/status-success--editor-success';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { FieldId } from './field-id-context';
 
 /**
@@ -52,16 +53,34 @@ const Message = ({
   testId
 }) => {
   const icon = messageIcons[appearance];
-  const messageRef = useRef(null);
-  const [hasMessageWrapper, setHasMessageWrapper] = useState(false);
+  const isFeatureFlagEnabled = fg('platform_dst_form_screenreader_message_fix');
   const {
     isWrapper
   } = useContext(MessageWrapperContext);
+  const [shouldRenderContent, setShouldRenderContent] = useState(isWrapper);
+
+  // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
+  const messageRef = useRef(null);
+  const [hasMessageWrapper, setHasMessageWrapper] = useState(isWrapper);
   useEffect(() => {
-    if (messageRef.current) {
-      setHasMessageWrapper(isWrapper);
+    if (isFeatureFlagEnabled) {
+      if (!isWrapper) {
+        // Delay rendering to ensure aria-live announcements work on first render if there is no wrapper
+        const timer = setTimeout(() => {
+          setShouldRenderContent(true);
+        }, 10);
+        return () => clearTimeout(timer);
+      } else {
+        // When using MessageWrapper, render content immediately since the wrapper handles aria-live
+        setShouldRenderContent(true);
+      }
+    } else {
+      // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
+      if (messageRef.current) {
+        setHasMessageWrapper(isWrapper);
+      }
     }
-  }, [isWrapper]);
+  }, [isWrapper, isFeatureFlagEnabled]);
 
   /**
    * The wrapping span is necessary to preserve spaces between children.
@@ -72,15 +91,19 @@ const Message = ({
    * less DOM element.
    */
   const content = typeof children === 'string' ? children : /*#__PURE__*/React.createElement("span", null, children);
+  const childrenToRender = /*#__PURE__*/React.createElement(Fragment, null, icon && /*#__PURE__*/React.createElement(IconWrapper, null, icon), content);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
-    id: fieldId,
+    id: fieldId
+    // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
+    ,
     ref: messageRef
     // For backwards compatability, if there is a wrapper, aria-live is not needed
+    // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
     ,
     "aria-live": !hasMessageWrapper ? 'polite' : undefined,
     className: ax(["_zulp12x7 _11c8dcr7 _1e0c1txw _1bah1q9y _1pfh1b66", messageAppearanceStyles[appearance]])
-  }, icon && /*#__PURE__*/React.createElement(IconWrapper, null, icon), content);
+  }, isFeatureFlagEnabled ? shouldRenderContent && childrenToRender : childrenToRender);
 };
 
 /**

package/dist/esm/messages.js

@@ -3,9 +3,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./messages.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import { createContext, Fragment, useContext, useEffect, useRef, useState } from 'react';
 import ErrorIcon from '@atlaskit/icon/core/migration/status-error--error';
 import SuccessIcon from '@atlaskit/icon/core/migration/status-success--editor-success';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { FieldId } from './field-id-context';
 
 /**
@@ -54,18 +55,41 @@ var Message = function Message(_ref2) {
     fieldId = _ref2.fieldId,
     testId = _ref2.testId;
   var icon = messageIcons[appearance];
-  var messageRef = useRef(null);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    hasMessageWrapper = _useState2[0],
-    setHasMessageWrapper = _useState2[1];
+  var isFeatureFlagEnabled = fg('platform_dst_form_screenreader_message_fix');
   var _useContext = useContext(MessageWrapperContext),
     isWrapper = _useContext.isWrapper;
+  var _useState = useState(isWrapper),
+    _useState2 = _slicedToArray(_useState, 2),
+    shouldRenderContent = _useState2[0],
+    setShouldRenderContent = _useState2[1];
+
+  // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
+  var messageRef = useRef(null);
+  var _useState3 = useState(isWrapper),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hasMessageWrapper = _useState4[0],
+    setHasMessageWrapper = _useState4[1];
   useEffect(function () {
-    if (messageRef.current) {
-      setHasMessageWrapper(isWrapper);
+    if (isFeatureFlagEnabled) {
+      if (!isWrapper) {
+        // Delay rendering to ensure aria-live announcements work on first render if there is no wrapper
+        var timer = setTimeout(function () {
+          setShouldRenderContent(true);
+        }, 10);
+        return function () {
+          return clearTimeout(timer);
+        };
+      } else {
+        // When using MessageWrapper, render content immediately since the wrapper handles aria-live
+        setShouldRenderContent(true);
+      }
+    } else {
+      // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
+      if (messageRef.current) {
+        setHasMessageWrapper(isWrapper);
+      }
     }
-  }, [isWrapper]);
+  }, [isWrapper, isFeatureFlagEnabled]);
 
   /**
    * The wrapping span is necessary to preserve spaces between children.
@@ -76,15 +100,19 @@ var Message = function Message(_ref2) {
    * less DOM element.
    */
   var content = typeof children === 'string' ? children : /*#__PURE__*/React.createElement("span", null, children);
+  var childrenToRender = /*#__PURE__*/React.createElement(Fragment, null, icon && /*#__PURE__*/React.createElement(IconWrapper, null, icon), content);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId,
-    id: fieldId,
+    id: fieldId
+    // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
+    ,
     ref: messageRef
     // For backwards compatability, if there is a wrapper, aria-live is not needed
+    // TODO: DSP-23603 - To clean up when removing "platform_dst_form_screenreader_message_fix" feature flag
     ,
     "aria-live": !hasMessageWrapper ? 'polite' : undefined,
     className: ax(["_zulp12x7 _11c8dcr7 _1e0c1txw _1bah1q9y _1pfh1b66", messageAppearanceStyles[appearance]])
-  }, icon && /*#__PURE__*/React.createElement(IconWrapper, null, icon), content);
+  }, isFeatureFlagEnabled ? shouldRenderContent && childrenToRender : childrenToRender);
 };
 
 /**

package/dist/types/field-id-context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * __Field id__
  *

package/dist/types/form.d.ts

@@ -12,7 +12,7 @@ type GetCurrentValue = <FormValues>(name: string) => FormValues[keyof FormValues
 export declare const FormContext: React.Context<{
     registerField: RegisterField;
     getCurrentValue: GetCurrentValue;
-    subscribe: FormApi['subscribe'];
+    subscribe: FormApi["subscribe"];
 }>;
 /**
  * __Is disabled context__

package/dist/types/required-asterisk.d.ts

@@ -2,5 +2,4 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-/// <reference types="react" />
 export default function RequiredAsterisk(): JSX.Element;

package/dist/types-ts4.5/field-id-context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * __Field id__
  *

package/dist/types-ts4.5/form.d.ts

@@ -12,7 +12,7 @@ type GetCurrentValue = <FormValues>(name: string) => FormValues[keyof FormValues
 export declare const FormContext: React.Context<{
     registerField: RegisterField;
     getCurrentValue: GetCurrentValue;
-    subscribe: FormApi['subscribe'];
+    subscribe: FormApi["subscribe"];
 }>;
 /**
  * __Is disabled context__

package/dist/types-ts4.5/required-asterisk.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * @jsxRuntime classic
  * @jsx jsx

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/form",
-	"version": "12.0.16",
+	"version": "12.1.0",
 	"description": "A form allows users to input information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -28,7 +28,8 @@
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/ds-lib": "^5.0.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^27.10.0",
+		"@atlaskit/icon": "^27.12.0",
+		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.11.0",
 		"@atlaskit/theme": "^19.0.0",
 		"@atlaskit/tokens": "^6.0.0",
@@ -53,7 +54,7 @@
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/lozenge": "^13.0.0",
 		"@atlaskit/modal-dialog": "^14.3.0",
-		"@atlaskit/radio": "^8.1.0",
+		"@atlaskit/radio": "^8.2.0",
 		"@atlaskit/range": "^9.2.0",
 		"@atlaskit/section-message": "^8.5.0",
 		"@atlaskit/select": "^21.2.0",
@@ -61,6 +62,7 @@
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/toggle": "^15.1.0",
 		"@atlaskit/visual-regression": "workspace:^",
+		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@atlassian/ssr-tests": "^0.2.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/react-hooks": "^8.0.1",
@@ -117,5 +119,10 @@
 		"./Label": "./src/entry-points/label.tsx",
 		".": "./src/index.tsx"
 	},
-	"homepage": "https://atlassian.design/components/form/"
+	"homepage": "https://atlassian.design/components/form/",
+	"platform-feature-flags": {
+		"platform_dst_form_screenreader_message_fix": {
+			"type": "boolean"
+		}
+	}
 }