fix(form-group): add legendId

Ref: 4fc56c30b

COMPONENT_INDEX.md

@@ -1466,11 +1466,12 @@ None.
 
 | Prop name   | Kind             | Reactive | Type                 | Default value      | Description                                   |
 | :---------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- |
+| noMargin    | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` for to remove the bottom margin |
 | invalid     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state    |
 | message     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to render a form requirement    |
-| noMargin    | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` for to remove the bottom margin |
 | messageText | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the message text                      |
 | legendText  | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the legend text                       |
+| legendId    | <code>let</code> | No       | <code>string</code>  | <code>''</code>    | Specify an id for the legend element          |
 
 ### Slots
 

docs/src/COMPONENT_API.json

@@ -3682,6 +3682,16 @@
       "moduleName": "FormGroup",
       "filePath": "src/FormGroup/FormGroup.svelte",
       "props": [
+        {
+          "name": "noMargin",
+          "kind": "let",
+          "description": "Set to `true` for to remove the bottom margin",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "invalid",
           "kind": "let",
@@ -3702,16 +3712,6 @@
           "constant": false,
           "reactive": false
         },
-        {
-          "name": "noMargin",
-          "kind": "let",
-          "description": "Set to `true` for to remove the bottom margin",
-          "type": "boolean",
-          "value": "false",
-          "isFunction": false,
-          "constant": false,
-          "reactive": false
-        },
         {
           "name": "messageText",
           "kind": "let",
@@ -3731,6 +3731,16 @@
           "isFunction": false,
           "constant": false,
           "reactive": false
+        },
+        {
+          "name": "legendId",
+          "kind": "let",
+          "description": "Specify an id for the legend element",
+          "type": "string",
+          "value": "''",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
         }
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],

src/FormGroup/FormGroup.svelte

@@ -1,31 +1,38 @@
 <script>
+  /** Set to `true` for to remove the bottom margin */
+  export let noMargin = false;
+
   /** Set to `true` to indicate an invalid state */
   export let invalid = false;
 
   /** Set to `true` to render a form requirement */
   export let message = false;
 
-  /** Set to `true` for to remove the bottom margin */
-  export let noMargin = false;
-
   /** Specify the message text */
   export let messageText = "";
 
   /** Specify the legend text */
   export let legendText = "";
+
+  /** Specify an id for the legend element */
+  export let legendId = "";
 </script>
 
 <fieldset
   data-invalid="{invalid || undefined}"
   class:bx--fieldset="{true}"
   class:bx--fieldset--no-margin="{noMargin}"
+  aria-labelledby="{$$restProps['aria-labelledby'] || legendId}"
   {...$$restProps}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
 >
-  <legend class:bx--label="{true}">{legendText}</legend>
+  <legend
+    class:bx--label="{true}"
+    id="{legendId || $$restProps['aria-labelledby']}">{legendText}</legend
+  >
   <slot />
   {#if message}
     <div class:bx--form__requirement="{true}">{messageText}</div>

types/FormGroup/FormGroup.d.ts

@@ -3,6 +3,12 @@ import { SvelteComponentTyped } from "svelte";
 
 export interface FormGroupProps
   extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["fieldset"]> {
+  /**
+   * Set to `true` for to remove the bottom margin
+   * @default false
+   */
+  noMargin?: boolean;
+
   /**
    * Set to `true` to indicate an invalid state
    * @default false
@@ -15,12 +21,6 @@ export interface FormGroupProps
    */
   message?: boolean;
 
-  /**
-   * Set to `true` for to remove the bottom margin
-   * @default false
-   */
-  noMargin?: boolean;
-
   /**
    * Specify the message text
    * @default ""
@@ -32,6 +32,12 @@ export interface FormGroupProps
    * @default ""
    */
   legendText?: string;
+
+  /**
+   * Specify an id for the legend element
+   * @default ''
+   */
+  legendId?: string;
 }
 
 export default class FormGroup extends SvelteComponentTyped<