@atlaskit/form 8.8.5 → 8.8.7

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/form
 
+## 8.8.7
+
+### Patch Changes
+
+- [`1c6c493447f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1c6c493447f) - [ux] Place label and message fields in correct aria attributes.
+
+## 8.8.6
+
+### Patch Changes
+
+- [`261420360ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/261420360ec) - Upgrades component types to support React 18.
+- Updated dependencies
+
 ## 8.8.5
 
 ### Patch Changes

package/dist/cjs/field.js

@@ -240,13 +240,24 @@ function Field(props) {
       id: props.name
     }));
   }, [props.id, props.name]);
+  var getDescribedBy = function getDescribedBy() {
+    var value = '';
+    if (state.error) {
+      value += "".concat(fieldId, "-error ");
+    }
+    if (state.valid) {
+      value += "".concat(fieldId, "-valid ");
+    }
+    return "".concat(value).concat(fieldId, "-helper");
+  };
   var extendedFieldProps = _objectSpread(_objectSpread({}, state.fieldProps), {}, {
     name: props.name,
     isDisabled: isDisabled,
     isInvalid: Boolean(state.error),
     isRequired: Boolean(props.isRequired),
     'aria-invalid': state.error ? 'true' : 'false',
-    'aria-labelledby': "".concat(fieldId, "-label ").concat(fieldId, "-helper ").concat(fieldId, "-valid ").concat(fieldId, "-error"),
+    'aria-describedby': getDescribedBy(),
+    'aria-labelledby': "".concat(fieldId, "-label"),
     id: fieldId
   });
   return (0, _react2.jsx)("div", {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/form",
-	"version": "8.8.5",
+	"version": "8.8.7",
 	"sideEffects": false
 }

package/dist/es2019/field.js

@@ -222,6 +222,16 @@ export default function Field(props) {
   () => props.id ? props.id : `${props.name}-${uid({
     id: props.name
   })}`, [props.id, props.name]);
+  const getDescribedBy = () => {
+    let value = '';
+    if (state.error) {
+      value += `${fieldId}-error `;
+    }
+    if (state.valid) {
+      value += `${fieldId}-valid `;
+    }
+    return `${value}${fieldId}-helper`;
+  };
   const extendedFieldProps = {
     ...state.fieldProps,
     name: props.name,
@@ -229,7 +239,8 @@ export default function Field(props) {
     isInvalid: Boolean(state.error),
     isRequired: Boolean(props.isRequired),
     'aria-invalid': state.error ? 'true' : 'false',
-    'aria-labelledby': `${fieldId}-label ${fieldId}-helper ${fieldId}-valid ${fieldId}-error`,
+    'aria-describedby': getDescribedBy(),
+    'aria-labelledby': `${fieldId}-label`,
     id: fieldId
   };
   return jsx("div", {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/form",
-	"version": "8.8.5",
+	"version": "8.8.7",
 	"sideEffects": false
 }

package/dist/esm/field.js

@@ -232,13 +232,24 @@ export default function Field(props) {
       id: props.name
     }));
   }, [props.id, props.name]);
+  var getDescribedBy = function getDescribedBy() {
+    var value = '';
+    if (state.error) {
+      value += "".concat(fieldId, "-error ");
+    }
+    if (state.valid) {
+      value += "".concat(fieldId, "-valid ");
+    }
+    return "".concat(value).concat(fieldId, "-helper");
+  };
   var extendedFieldProps = _objectSpread(_objectSpread({}, state.fieldProps), {}, {
     name: props.name,
     isDisabled: isDisabled,
     isInvalid: Boolean(state.error),
     isRequired: Boolean(props.isRequired),
     'aria-invalid': state.error ? 'true' : 'false',
-    'aria-labelledby': "".concat(fieldId, "-label ").concat(fieldId, "-helper ").concat(fieldId, "-valid ").concat(fieldId, "-error"),
+    'aria-describedby': getDescribedBy(),
+    'aria-labelledby': "".concat(fieldId, "-label"),
     id: fieldId
   });
   return jsx("div", {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/form",
-	"version": "8.8.5",
+	"version": "8.8.7",
 	"sideEffects": false
 }

package/dist/types/form-header.d.ts

@@ -14,9 +14,15 @@ export interface FormHeaderProps {
      */
     children?: ReactNode;
 }
-declare const FormHeaderContent: React.FC;
-declare const FormHeaderDescription: React.FC;
-declare const FormHeaderTitle: React.FC;
+declare const FormHeaderContent: React.FC<{
+    children: ReactNode;
+}>;
+declare const FormHeaderDescription: React.FC<{
+    children: ReactNode;
+}>;
+declare const FormHeaderTitle: React.FC<{
+    children: ReactNode;
+}>;
 /**
  * __Form header__
  *

package/dist/types/label.d.ts

@@ -1,8 +1,9 @@
 /** @jsx jsx */
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 export interface LabelProps {
     id?: string;
     htmlFor: string;
+    children: ReactNode;
 }
 /**
  * __Label__

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/form",
-  "version": "8.8.5",
+  "version": "8.8.7",
   "description": "A form allows users to input information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
   "homepage": "https://atlassian.design/components/form/",
   "dependencies": {
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/theme": "^12.2.0",
+    "@atlaskit/theme": "^12.3.0",
     "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -53,7 +53,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.5.0",
+    "@atlaskit/button": "^16.6.0",
     "@atlaskit/calendar": "^13.0.0",
     "@atlaskit/checkbox": "^12.4.0",
     "@atlaskit/datetime-picker": "^12.3.0",

package/report.api.md

@@ -214,6 +214,8 @@ export const Label: FC<LabelProps>;
 
 // @public (undocumented)
 export interface LabelProps {
+  // (undocumented)
+  children: ReactNode;
   // (undocumented)
   htmlFor: string;
   // (undocumented)