@khanacademy/wonder-blocks-form 4.10.0 → 4.10.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @khanacademy/wonder-blocks-form
 
+## 4.10.2
+
+### Patch Changes
+
+-   Updated dependencies [6999fd39]
+    -   @khanacademy/wonder-blocks-tokens@2.1.0
+    -   @khanacademy/wonder-blocks-clickable@4.2.9
+    -   @khanacademy/wonder-blocks-layout@2.2.2
+
+## 4.10.1
+
+### Patch Changes
+
+-   8c861955: Modify `RadioGroup` and `CheckboxGroup` to append `legend` as the first child in `fieldset`, so the accessibility tree can associate the legend contents with the fieldset group and announce its label correctly
+-   0b3a28a7: - Combobox: Add error prop to support aria-invalid and styling changes.
+    -   TextField: Modify aria-invalid order to be overriden by the caller.
+
 ## 4.10.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -467,6 +467,8 @@ const Choice = React.forwardRef(function Choice(props, ref) {
 
 const styles$3 = StyleSheet.create({
   fieldset: {
+    display: "flex",
+    flexDirection: "column",
     border: "none",
     padding: 0,
     margin: 0
@@ -513,10 +515,8 @@ const CheckboxGroup = React.forwardRef(function CheckboxGroup(props, ref) {
   const allChildren = React.Children.toArray(children).filter(Boolean);
   return React.createElement(StyledFieldset$1, {
     "data-testid": testId,
-    style: styles$3.fieldset,
+    style: [styles$3.fieldset, style],
     ref: ref
-  }, React.createElement(View, {
-    style: style
   }, label && React.createElement(StyledLegend$1, {
     style: styles$3.legend
   }, React.createElement(LabelMedium, null, label)), description && React.createElement(LabelSmall, {
@@ -541,7 +541,7 @@ const CheckboxGroup = React.forwardRef(function CheckboxGroup(props, ref) {
       style: [index > 0 && styles$3.defaultLineGap, style],
       variant: "checkbox"
     });
-  })));
+  }));
 });
 
 const StyledFieldset = addStyle("fieldset");
@@ -561,10 +561,8 @@ const RadioGroup = React.forwardRef(function RadioGroup(props, ref) {
   const allChildren = React.Children.toArray(children).filter(Boolean);
   return React.createElement(StyledFieldset, {
     "data-testid": testId,
-    style: styles$3.fieldset,
+    style: [styles$3.fieldset, style],
     ref: ref
-  }, React.createElement(View, {
-    style: style
   }, label && React.createElement(StyledLegend, {
     style: styles$3.legend
   }, React.createElement(LabelMedium, null, label)), description && React.createElement(LabelSmall, {
@@ -589,7 +587,7 @@ const RadioGroup = React.forwardRef(function RadioGroup(props, ref) {
       style: [index > 0 && styles$3.defaultLineGap, style],
       variant: "radio"
     });
-  })));
+  }));
 });
 
 const _excluded$2 = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "light", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
@@ -711,10 +709,9 @@ class TextField extends React.Component {
       readOnly: readOnly || disabled,
       autoFocus: autoFocus,
       autoComplete: autoComplete,
-      ref: forwardedRef
-    }, otherProps, {
+      ref: forwardedRef,
       "aria-invalid": this.state.error ? "true" : "false"
-    })));
+    }, otherProps)));
   }
 }
 TextField.defaultProps = {

package/dist/index.js

@@ -497,6 +497,8 @@ const Choice = React__namespace.forwardRef(function Choice(props, ref) {
 
 const styles$3 = aphrodite.StyleSheet.create({
   fieldset: {
+    display: "flex",
+    flexDirection: "column",
     border: "none",
     padding: 0,
     margin: 0
@@ -543,10 +545,8 @@ const CheckboxGroup = React__namespace.forwardRef(function CheckboxGroup(props,
   const allChildren = React__namespace.Children.toArray(children).filter(Boolean);
   return React__namespace.createElement(StyledFieldset$1, {
     "data-testid": testId,
-    style: styles$3.fieldset,
+    style: [styles$3.fieldset, style],
     ref: ref
-  }, React__namespace.createElement(wonderBlocksCore.View, {
-    style: style
   }, label && React__namespace.createElement(StyledLegend$1, {
     style: styles$3.legend
   }, React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, label)), description && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
@@ -571,7 +571,7 @@ const CheckboxGroup = React__namespace.forwardRef(function CheckboxGroup(props,
       style: [index > 0 && styles$3.defaultLineGap, style],
       variant: "checkbox"
     });
-  })));
+  }));
 });
 
 const StyledFieldset = wonderBlocksCore.addStyle("fieldset");
@@ -591,10 +591,8 @@ const RadioGroup = React__namespace.forwardRef(function RadioGroup(props, ref) {
   const allChildren = React__namespace.Children.toArray(children).filter(Boolean);
   return React__namespace.createElement(StyledFieldset, {
     "data-testid": testId,
-    style: styles$3.fieldset,
+    style: [styles$3.fieldset, style],
     ref: ref
-  }, React__namespace.createElement(wonderBlocksCore.View, {
-    style: style
   }, label && React__namespace.createElement(StyledLegend, {
     style: styles$3.legend
   }, React__namespace.createElement(wonderBlocksTypography.LabelMedium, null, label)), description && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
@@ -619,7 +617,7 @@ const RadioGroup = React__namespace.forwardRef(function RadioGroup(props, ref) {
       style: [index > 0 && styles$3.defaultLineGap, style],
       variant: "radio"
     });
-  })));
+  }));
 });
 
 const _excluded$2 = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "light", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
@@ -741,10 +739,9 @@ class TextField extends React__namespace.Component {
       readOnly: readOnly || disabled,
       autoFocus: autoFocus,
       autoComplete: autoComplete,
-      ref: forwardedRef
-    }, otherProps, {
+      ref: forwardedRef,
       "aria-invalid": this.state.error ? "true" : "false"
-    })));
+    }, otherProps)));
   }
 }
 TextField.defaultProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "4.10.0",
+  "version": "4.10.2",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,11 +16,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^4.2.8",
+    "@khanacademy/wonder-blocks-clickable": "^4.2.9",
     "@khanacademy/wonder-blocks-core": "^7.0.1",
     "@khanacademy/wonder-blocks-icon": "^4.1.5",
-    "@khanacademy/wonder-blocks-layout": "^2.2.1",
-    "@khanacademy/wonder-blocks-tokens": "^2.0.1",
+    "@khanacademy/wonder-blocks-layout": "^2.2.2",
+    "@khanacademy/wonder-blocks-tokens": "^2.1.0",
     "@khanacademy/wonder-blocks-typography": "^2.1.16"
   },
   "peerDependencies": {