[terra-form-fieldset] Added aria-labelledby (cerner#3704)

* first commit * updated jest tests * helper text * legend helptext order * jest test Co-authored-by: Saket Bajaj <[email protected]> Co-authored-by: Supreeth <[email protected]>
saket2403 · Dec 20, 2022 · 2b33b94 · 2b33b94
1 parent a7f16b6
commit 2b33b94
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 4 deletions.
diff --git a/packages/terra-form-fieldset/CHANGELOG.md b/packages/terra-form-fieldset/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added `aria-labelledby` for terra-form-fieldset.
+
 ## 2.64.0 - (December 7, 2022)
 
 * Changed

diff --git a/packages/terra-form-fieldset/package.json b/packages/terra-form-fieldset/package.json
@@ -30,7 +30,8 @@
     "prop-types": "^15.5.8",
     "terra-form-field": "^4.21.0",
     "terra-form-input": "^4.18.0",
-    "terra-theme-context": "^1.0.0"
+    "terra-theme-context": "^1.0.0",
+    "uuid": "^3.3.2"
   },
   "scripts": {
     "compile": "babel --root-mode upward src --out-dir lib --copy-files",

diff --git a/packages/terra-form-fieldset/src/Fieldset.jsx b/packages/terra-form-fieldset/src/Fieldset.jsx
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import classNamesBind from 'classnames/bind';
 import ThemeContext from 'terra-theme-context';
+import uuidv4 from 'uuid/v4';
 import styles from './Fieldset.module.scss';
 
 const cx = classNamesBind.bind(styles);
@@ -61,12 +62,23 @@ const Fieldset = ({
     { 'legend-visually-hidden': isLegendHidden },
   ]);
 
+  const legendId = `terra-fieldset-legend-${uuidv4()}`;
+  const helpId = `terra-fieldset-help-${uuidv4()}`;
+
+  const addAriaHelpers = (fieldsetChildren) => {
+    const cloneChildren = [];
+    React.Children.forEach(fieldsetChildren, (child) => {
+      cloneChildren.push(React.cloneElement(child, { 'aria-labelledby': `${legendId} ${helpId}` }));
+    });
+    return cloneChildren;
+  };
+
   return (
     <fieldset {...customProps} className={fieldsetClasses}>
-      {legend && <legend {...legendAttrs} className={legendClasses}>{legend}</legend>}
-      {help && <small className={cx('help-text')} tabIndex="-1">{help}</small>}
+      {legend && <legend id={legendId} {...legendAttrs} className={legendClasses}>{legend}</legend>}
+      {help && <small id={helpId} className={cx('help-text')} tabIndex="-1">{help}</small>}
       <div className={cx('fieldset-children')}>
-        {children}
+        {addAriaHelpers(children)}
       </div>
     </fieldset>
   );

diff --git a/packages/terra-form-fieldset/tests/jest/FormFieldset.test.jsx b/packages/terra-form-fieldset/tests/jest/FormFieldset.test.jsx
@@ -10,6 +10,8 @@ it('should render a default component', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+jest.mock('uuid/v4', () => () => '00000000-0000-0000-0000-000000000000');
+
 it('should render a Fieldset when all the possible props are passed into it', () => {
   const input = (
     <Fieldset

diff --git a/packages/terra-form-fieldset/tests/jest/__snapshots__/FormFieldset.test.jsx.snap b/packages/terra-form-fieldset/tests/jest/__snapshots__/FormFieldset.test.jsx.snap
@@ -30,11 +30,13 @@ exports[`should render a Fieldset when all the possible props are passed into it
 >
   <legend
     className="legend healtheintent-legend"
+    id="terra-fieldset-legend-00000000-0000-0000-0000-000000000000"
   >
     Text
   </legend>
   <small
     className="help-text"
+    id="terra-fieldset-help-00000000-0000-0000-0000-000000000000"
     tabIndex="-1"
   >
     This is a test input
@@ -43,6 +45,7 @@ exports[`should render a Fieldset when all the possible props are passed into it
     className="fieldset-children"
   >
     <input
+      aria-labelledby="terra-fieldset-legend-00000000-0000-0000-0000-000000000000 terra-fieldset-help-00000000-0000-0000-0000-000000000000"
       type="radio"
       value="Test"
     />