Merge pull request #337 from oasisrising/issue-336

fix: make checkbox groups accessible via fieldset & legend (issue #336)

Author: dohomi

packages/rhf-mui/package.json

@@ -3,15 +3,26 @@
   "license": "MIT",
   "repository": "https://github.com/dohomi/react-hook-form-mui",
   "homepage": "https://react-hook-form-material-ui.vercel.app",
-  "keywords": ["react", "mui", "material-ui", "react-hook-form"],
-  "workspaces": ["apps/*", "packages/*"],
+  "keywords": [
+    "react",
+    "mui",
+    "material-ui",
+    "react-hook-form"
+  ],
+  "workspaces": [
+    "apps/*",
+    "packages/*"
+  ],
   "name": "react-hook-form-mui",
   "author": "Dominic Garms",
   "source": "src/index.ts",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "typings": "dist/index.d.ts",
-  "files": ["dist/**", "src/**"],
+  "files": [
+    "dist/**",
+    "src/**"
+  ],
   "exports": {
     "./package.json": "./package.json",
     ".": {

packages/rhf-mui/src/CheckboxButtonGroup.tsx

@@ -66,7 +66,7 @@ const CheckboxButtonGroup = forwardRef(function CheckboxButtonGroup<
   TValue = unknown,
 >(
   props: CheckboxButtonGroupProps<TFieldValues, TName, TValue>,
-  ref: Ref<HTMLDivElement>
+  ref: Ref<HTMLFieldSetElement>
 ) {
   const {
     helperText,
@@ -155,8 +155,13 @@ const CheckboxButtonGroup = forwardRef(function CheckboxButtonGroup<
     : helperText
 
   return (
-    <FormControl error={invalid} required={required} ref={ref}>
-      {label ? <FormLabel>{label}</FormLabel> : null}
+    <FormControl
+      error={invalid}
+      required={required}
+      ref={ref}
+      component="fieldset"
+    >
+      {label ? <FormLabel component="legend">{label}</FormLabel> : null}
       <FormGroup row={row}>
         {options.map((option) => {
           const optionValue = propertyExists(option, valueKey)