refactor: radio group

Author: segunadebayo

.changeset/radio-group-invalid-required.md

@@ -0,0 +1,6 @@
+---
+"@zag-js/radio-group": patch
+---
+
+Improve accessibility of radio group by adding `invalid` and `required` props with corresponding `data-*` and `aria-*`
+attributes

packages/machines/radio-group/src/radio-group.connect.ts

@@ -13,12 +13,13 @@ export function connect<T extends PropTypes>(
   const { context, send, computed, prop, scope } = service
 
   const groupDisabled = computed("isDisabled")
+  const groupInvalid = prop("invalid")
   const readOnly = prop("readOnly")
 
   function getItemState(props: ItemProps): ItemState {
     return {
       value: props.value,
-      invalid: !!props.invalid,
+      invalid: !!props.invalid || !!groupInvalid,
       disabled: !!props.disabled || groupDisabled,
       checked: context.get("value") === props.value,
       focused: context.get("focusedValue") === props.value,
@@ -64,8 +65,13 @@ export function connect<T extends PropTypes>(
         role: "radiogroup",
         id: dom.getRootId(scope),
         "aria-labelledby": dom.getLabelId(scope),
+        "aria-required": prop("required") || undefined,
+        "aria-disabled": groupDisabled || undefined,
+        "aria-readonly": readOnly || undefined,
         "data-orientation": prop("orientation"),
         "data-disabled": dataAttr(groupDisabled),
+        "data-invalid": dataAttr(groupInvalid),
+        "data-required": dataAttr(prop("required")),
         "aria-orientation": prop("orientation"),
         dir: prop("dir"),
         style: {
@@ -80,6 +86,8 @@ export function connect<T extends PropTypes>(
         dir: prop("dir"),
         "data-orientation": prop("orientation"),
         "data-disabled": dataAttr(groupDisabled),
+        "data-invalid": dataAttr(groupInvalid),
+        "data-required": dataAttr(prop("required")),
         id: dom.getLabelId(scope),
         onClick: focus,
       })
@@ -159,6 +167,8 @@ export function connect<T extends PropTypes>(
         name: prop("name") || prop("id"),
         form: prop("form"),
         value: props.value,
+        required: prop("required"),
+        "aria-invalid": itemState.invalid || undefined,
         onClick(event) {
           if (readOnly) {
             event.preventDefault()

packages/machines/radio-group/src/radio-group.props.ts

@@ -9,10 +9,12 @@ export const props = createProps<RadioGroupProps>()([
   "getRootNode",
   "id",
   "ids",
+  "invalid",
   "name",
   "onValueChange",
   "orientation",
   "readOnly",
+  "required",
   "value",
   "defaultValue",
 ])

packages/machines/radio-group/src/radio-group.types.ts

@@ -47,7 +47,15 @@ export interface RadioGroupProps extends DirectionProperty, CommonProperties {
    */
   disabled?: boolean | undefined
   /**
-   * Whether the checkbox is read-only
+   * If `true`, the radio group is marked as invalid.
+   */
+  invalid?: boolean | undefined
+  /**
+   * If `true`, the radio group is marked as required.
+   */
+  required?: boolean | undefined
+  /**
+   * Whether the radio group is read-only
    */
   readOnly?: boolean | undefined
   /**