ON-41323 # Changed how aria-describedby was function for radio and ch…

…eckbox elements

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- `aria-describedby` for `Radio` and `Checkbox` elements
+
 ## [6.2.0] - 2024-06-21
 
 ### Added

src/form-elements/FormElementCheckBoxes.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import clsx from 'clsx'
-import { Checkbox } from '@mui/material'
+import { Checkbox, FormGroup } from '@mui/material'
 
 import FormElementOptions from '../components/renderer/FormElementOptions'
 import useFormElementOptions from '../hooks/useFormElementOptions'
@@ -160,11 +160,11 @@ function FormElementCheckboxes({
  </div>
  </div>
  ) : (
- <div
- role="group"
+ <FormGroup
  className="ob-checkbox-container"
  aria-labelledby={`${id}-label`}
- aria-describedby={ariaDescribedby}
+ aria-description={ariaDescribedby}
+ role="group"
  >
  {filteredOptions.map((option, index) => {
  const isSelected = selectedValues.includes(option.value)
@@ -195,7 +195,7 @@ function FormElementCheckboxes({
  </div>
  )
  })}
- </div>
+ </FormGroup>
  )}
 
  <LookupButton

src/form-elements/FormElementRadio.tsx

@@ -95,9 +95,6 @@ function FormElementRadio({
  })
  }}
  edge="start"
- inputProps={{
- 'aria-describedby': ariaDescribedby,
- }}
  />
  {` ${option.label}`}
  </label>
@@ -132,6 +129,7 @@ function FormElementRadio({
  'is-light': !isSelected,
  },
  )}
+ aria-describedby={ariaDescribedby}
  />
  </div>
  )