a11y group legends

src/forms/inputs/checkbox-group.js

@@ -8,6 +8,7 @@ import {
 } from '../helpers'
 import { LabeledField } from '../labels'
 import { addToArray, removeFromArray, serializeOptions, compose } from '../../utils'
+import { convertNameToLabel } from '../helpers'
 
 /**
  *
@@ -59,6 +60,12 @@ const defaultProps = {
   options: []
 }
 
+function CheckboxGroupLegend ({ name, label }) {
+  return (
+    <legend>{ label || convertNameToLabel(name) }</legend>
+  )
+}
+
 function CheckboxGroup (props) {
   const {
     input: { value, onChange, name },
@@ -76,7 +83,11 @@ function CheckboxGroup (props) {
     }
   }
   return (
-    <LabeledField className="CheckboxGroup" { ...props }>
+    <LabeledField
+      className="CheckboxGroup"
+      labelComponent={ CheckboxGroupLegend }
+      { ...props }
+    >
       {
         optionObjects.map((option, i) => {
           return (

src/forms/inputs/radio-group.js

@@ -2,6 +2,7 @@ import React from 'react'
 // import PropTypes from 'prop-types'
 import Input from './input'
 import {
+  convertNameToLabel,
   fieldPropTypes,
   fieldOptionsType,
   omitLabelProps,
@@ -58,6 +59,12 @@ const defaultProps = {
   options: []
 }
 
+function RadioGroupLegend ({ label, name }) {
+  return (
+    <legend>{ label || convertNameToLabel(name) }</legend>
+  )
+}
+
 function RadioGroup (props) {
   const {
     input: { value, onChange, name },
@@ -67,7 +74,11 @@ function RadioGroup (props) {
   } = omitLabelProps(props)
   const optionObjects = serializeOptions(options)
   return (
-    <LabeledField className="RadioGroup" { ...props }>
+    <LabeledField
+      className="RadioGroup"
+      labelComponent={ RadioGroupLegend }
+      { ...props }
+    >
       {
         optionObjects.map((option, i) => {
           return (

test/forms/inputs/checkbox-group.test.js

@@ -36,4 +36,35 @@ test('CheckboxGroup removes value to array when selected option clicked', () =>
   wrapper.find('input').simulate('change')
   const newValue = onChange.mock.calls[0][0]
   expect(newValue).toEqual([])
-})
+})
+
+test('CheckboxGroup has a legend with the group\'s name by default', () => {
+  const props = { 
+    input: {
+      name: 'testGroup',
+      value: '',
+    }, 
+    meta: {},
+    options: ['TOGGLED_OPTION']
+  }
+  const wrapper = mount(<CheckboxGroup { ...props }/>)
+  const legend = wrapper.find('fieldset').first().find('legend')
+  expect(legend).toBeTruthy()
+  expect(legend.text()).toEqual('Test Group')
+})
+
+test('CheckboxGroup has a legend with the group\'s label (when provided)', () => {
+  const props = { 
+    input: {
+      name: 'testGroup',
+      value: '',
+    },
+    label: 'Checkbox Group',
+    meta: {},
+    options: ['TOGGLED_OPTION']
+  }
+  const wrapper = mount(<CheckboxGroup { ...props }/>)
+  const legend = wrapper.find('fieldset').first().find('legend')
+  expect(legend).toBeTruthy()
+  expect(legend.text()).toEqual('Checkbox Group')
+})

test/forms/inputs/radio-group.test.js

@@ -34,3 +34,36 @@ test('A RadioGroup\'s inputs all have the same name', () => {
   expect(wrapper.find('input').first().prop('name')).toEqual(name)
   expect(wrapper.find('input').last().prop('name')).toEqual(name)
 })
+
+test('A RadioGroup has a legend with the group\'s name by default', () => {
+  const name = "sameName"
+  const props = { 
+    input: {
+      name,
+      value: '',
+    }, 
+    meta: {},
+    options: ['Option 1', 'Option 2']
+  }
+  const wrapper = mount(<RadioGroup { ...props }/>)
+  const legend = wrapper.find('fieldset').first().find('legend')
+  expect(legend).toBeTruthy()
+  expect(legend.text()).toEqual('Same Name')
+})
+
+test('A RadioGroup has a legend with the group\'s label (when provided)', () => {
+  const name = "sameName"
+  const props = { 
+    input: {
+      name,
+      value: '',
+    }, 
+    meta: {},
+    label: "Different Name",
+    options: ['Option 1', 'Option 2']
+  }
+  const wrapper = mount(<RadioGroup { ...props }/>)
+  const legend = wrapper.find('fieldset').first().find('legend')
+  expect(legend).toBeTruthy()
+  expect(legend.text()).toEqual('Different Name')
+})