@khanacademy/wonder-blocks-form 4.9.4 → 4.10.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @khanacademy/wonder-blocks-form
 
+## 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
+
+-   7a98815b: LabeledTextField: Adds `name` prop for the `TextField` component
+
 ## 4.9.4
 
 ### Patch Changes

package/dist/components/labeled-text-field.d.ts

@@ -120,6 +120,10 @@ type CommonProps = {
      * Specifies if the TextField allows autocomplete.
      */
     autoComplete?: string;
+    /**
+     * Provide a name for the TextField.
+     */
+    name?: string;
 };
 type OtherInputProps = CommonProps & {
     /**

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 = {
@@ -916,7 +913,7 @@ const styles$1 = StyleSheet.create({
   }
 });
 
-const _excluded$1 = ["id", "type", "label", "description", "value", "disabled", "required", "validate", "onChange", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "ariaDescribedby", "onValidate", "onFocus", "onBlur"];
+const _excluded$1 = ["id", "type", "label", "description", "value", "disabled", "required", "validate", "onChange", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "ariaDescribedby", "name", "onValidate", "onFocus", "onBlur"];
 class LabeledTextField extends React.Component {
   constructor(props) {
     super(props);
@@ -981,7 +978,8 @@ class LabeledTextField extends React.Component {
         readOnly,
         autoComplete,
         forwardedRef,
-        ariaDescribedby
+        ariaDescribedby,
+        name
       } = _this$props,
       otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
     return React.createElement(IDProvider, {
@@ -1011,7 +1009,8 @@ class LabeledTextField extends React.Component {
         light: light,
         readOnly: readOnly,
         autoComplete: autoComplete,
-        ref: forwardedRef
+        ref: forwardedRef,
+        name: name
       }, otherProps)),
       label: label,
       description: description,

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 = {
@@ -946,7 +943,7 @@ const styles$1 = aphrodite.StyleSheet.create({
   }
 });
 
-const _excluded$1 = ["id", "type", "label", "description", "value", "disabled", "required", "validate", "onChange", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "ariaDescribedby", "onValidate", "onFocus", "onBlur"];
+const _excluded$1 = ["id", "type", "label", "description", "value", "disabled", "required", "validate", "onChange", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "ariaDescribedby", "name", "onValidate", "onFocus", "onBlur"];
 class LabeledTextField extends React__namespace.Component {
   constructor(props) {
     super(props);
@@ -1011,7 +1008,8 @@ class LabeledTextField extends React__namespace.Component {
         readOnly,
         autoComplete,
         forwardedRef,
-        ariaDescribedby
+        ariaDescribedby,
+        name
       } = _this$props,
       otherProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$1);
     return React__namespace.createElement(wonderBlocksCore.IDProvider, {
@@ -1041,7 +1039,8 @@ class LabeledTextField extends React__namespace.Component {
         light: light,
         readOnly: readOnly,
         autoComplete: autoComplete,
-        ref: forwardedRef
+        ref: forwardedRef,
+        name: name
       }, otherProps)),
       label: label,
       description: description,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "4.9.4",
+  "version": "4.10.1",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",