feat(FormGroup): support id on fieldset legend (#9074)

* feat(FormGroup): support `id` on `fieldset legend` * docs(FormGroup): add `legendId` knob * chore: update snapshots Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jul 8, 2021 · 4fc56c3 · 4fc56c3
1 parent 81e9cc6
commit 4fc56c3
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2907,6 +2907,9 @@ Map {
       "invalid": Object {
         "type": "bool",
       },
+      "legendId": Object {
+        "type": "node",
+      },
       "legendText": Object {
         "isRequired": true,
         "type": "node",

diff --git a/packages/react/src/components/FormGroup/FormGroup-story.js b/packages/react/src/components/FormGroup/FormGroup-story.js
@@ -16,7 +16,8 @@ import mdx from './FormGroup.mdx';
 
 const props = () => ({
   disabled: boolean('Disabled (disabled)', false),
-  legendText: text('Legend (legendText)', 'FormGroup Legend'),
+  legendId: text('Legend ID (legendId)', 'formgroup-legend-id'),
+  legendText: text('Legend text (legendText)', 'FormGroup Legend'),
   hasMargin: boolean('Fieldset has bottom margin (hasMargin)', true),
 });
 
@@ -32,7 +33,10 @@ export default {
 };
 
 export const _Default = () => (
-  <FormGroup legendText="FormGroup Legend" style={{ maxWidth: '400px' }}>
+  <FormGroup
+    legendId="formgroup-legend-id"
+    legendText="FormGroup Legend"
+    style={{ maxWidth: '400px' }}>
     <TextInput
       id="one"
       labelText="First Name"

diff --git a/packages/react/src/components/FormGroup/FormGroup.js b/packages/react/src/components/FormGroup/FormGroup.js
@@ -13,6 +13,7 @@ import { settings } from 'carbon-components';
 const { prefix } = settings;
 
 const FormGroup = ({
+  legendId,
   legendText,
   invalid,
   children,
@@ -31,8 +32,13 @@ const FormGroup = ({
     <fieldset
       {...(invalid && { 'data-invalid': '' })}
       className={classNamesFieldset}
-      {...other}>
-      <legend className={classNamesLegend}>{legendText}</legend>
+      {...other}
+      aria-labelledby={other['aria-labelledby'] || legendId}>
+      <legend
+        className={classNamesLegend}
+        id={legendId || other['aria-labelledby']}>
+        {legendText}
+      </legend>
       {children}
       {message ? (
         <div className={`${prefix}--form__requirements`}>{messageText}</div>
@@ -62,6 +68,12 @@ FormGroup.propTypes = {
    */
   invalid: PropTypes.bool,
 
+  /**
+   * Provide id for the fieldset <legend> which corresponds to the fieldset
+   * `aria-labelledby`
+   */
+  legendId: PropTypes.node,
+
   /**
    * Provide the text to be rendered inside of the fieldset <legend>
    */