Merge branch 'main' into feature/inputter-validation-accessibility

centrica-engineering · Nov 6, 2024 · bbf36a4 · bbf36a4
2 parents af3868d + 6b99c15
commit bbf36a4
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 29 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/muon/components/inputter/src/inputter-component.js b/packages/muon/components/inputter/src/inputter-component.js
@@ -234,6 +234,24 @@ export class Inputter extends ScopedElementsMixin(ValidationMixin(MaskMixin(Muon
     return false;
   }
 
+  get _multiInputHeading() {
+    return html`
+      <legend>${this._addHeading}</legend>
+    `;
+  }
+
+  get __wrapperContent() {
+    return html`
+      ${this._isMultiple ? this._multiInputHeading : this._addLabel}
+      ${this._addHelper}
+      <div class="wrapper">
+        ${super.standardTemplate}
+        ${this._addMask}
+        ${this._addInputTypeIcon}
+      </div>
+    `;
+  }
+
   /**
    * Getter method to construct template for type `standard`.
    * @protected
@@ -243,13 +261,11 @@ export class Inputter extends ScopedElementsMixin(ValidationMixin(MaskMixin(Muon
     return html`
       <div class="${classMap(this.classes)}" style="${styleMap(this.inlineStyles)}" aria-describedby=${ifDefined(this.helper && !this.__isTipDetailAvailable ? this._helperId : undefined)}
         aria-details=${ifDefined(this.helper && this.__isTipDetailAvailable ? this._helperId : undefined)}>
-        ${this._isMultiple ? this._addHeading : this._addLabel}
-        ${this._addHelper}
-        <div class="wrapper">
-          ${super.standardTemplate}
-          ${this._addMask}
-          ${this._addInputTypeIcon}
-        </div>
+        ${this._isMultiple ? html`
+          <fieldset>
+            ${this.__wrapperContent}
+          </fieldset>
+        ` : this.__wrapperContent}
       </div>
       ${this._addValidationMessage}
     `;

diff --git a/packages/muon/tests/components/inputter/__snapshots__/inputter.test.snap.js b/packages/muon/tests/components/inputter/__snapshots__/inputter.test.snap.js
@@ -140,39 +140,51 @@ snapshots["Inputter text mask & validation"] =
 
 snapshots["Inputter radio standard radio"] = 
 `<div class="inputter radio">
-  <span class="input-heading">
-    What is your heating source?
-  </span>
-  <div class="wrapper">
-    <slot>
-    </slot>
-  </div>
+  <fieldset>
+    <legend>
+      <span class="input-heading">
+        What is your heating source?
+      </span>
+    </legend>
+    <div class="wrapper">
+      <slot>
+      </slot>
+    </div>
+  </fieldset>
 </div>
 `;
 /* end snapshot Inputter radio standard radio */
 
 snapshots["Inputter radio radio mask"] = 
 `<div class="has-mask inputter radio">
-  <span class="input-heading">
-    What is your heating source?
-  </span>
-  <div class="wrapper">
-    <slot>
-    </slot>
-  </div>
+  <fieldset>
+    <legend>
+      <span class="input-heading">
+        What is your heating source?
+      </span>
+    </legend>
+    <div class="wrapper">
+      <slot>
+      </slot>
+    </div>
+  </fieldset>
 </div>
 `;
 /* end snapshot Inputter radio radio mask */
 
 snapshots["Inputter radio radio mask validation"] = 
 `<div class="has-mask inputter radio">
-  <span class="input-heading">
-    What is your heating source?
-  </span>
-  <div class="wrapper">
-    <slot>
-    </slot>
-  </div>
+  <fieldset>
+    <legend>
+      <span class="input-heading">
+        What is your heating source?
+      </span>
+    </legend>
+    <div class="wrapper">
+      <slot>
+      </slot>
+    </div>
+  </fieldset>
 </div>
 `;
 /* end snapshot Inputter radio radio mask validation */