Merge pull request #611 from centrica-engineering/fix/inputter-valida…

…tion-id-mapping fix: inputter id autogenerated and provided
centrica-engineering · Nov 7, 2024 · b8d8653 · b8d8653
2 parents 62f948e + 4265ce9
commit b8d8653
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/packages/muon/components/inputter/src/inputter-component.js b/packages/muon/components/inputter/src/inputter-component.js
@@ -101,17 +101,18 @@ export class Inputter extends ScopedElementsMixin(ValidationMixin(MaskMixin(Muon
   willUpdate(changedProperties) {
     super.willUpdate(changedProperties);
 
-    let validationEle = this.querySelector(`#${this._id}-validation`);
+    const currentId = this._slottedInputs[0]?.getAttribute('id') || this._id;
+    let validationEle = this.querySelector(`#${currentId}-validation`);
     if (!validationEle) {
       validationEle = document.createElement('div');
       validationEle.setAttribute('class', 'visually-hidden');
-      validationEle.setAttribute('id', `${this._id}-validation`);
+      validationEle.setAttribute('id', `${currentId}-validation`);
       this.appendChild(validationEle);
     }
     const slottedInput = this._slottedInputs[0];
     if (this._shouldShowValidation) {
       validationEle.setAttribute('aria-live', 'polite');
-      slottedInput?.setAttribute('aria-errormessage', `${this._id}-validation`);
+      slottedInput?.setAttribute('aria-errormessage', `${currentId}-validation`);
       slottedInput?.setAttribute('aria-invalid', 'true');
       validationEle.textContent = `${this._isMultiple ? this.heading : this._slottedLabel?.textContent} ${this.validationMessage}`;
     } else {

diff --git a/packages/muon/tests/components/inputter/inputter.test.js b/packages/muon/tests/components/inputter/inputter.test.js
@@ -155,7 +155,7 @@ describe('Inputter', () => {
       const inputter = await fixture(html`
           <${tag} validation=["isRequired","isBetween(8,20)"]>
             <label slot="label">input label</label>
-            <input type="text" value=""/>
+            <input type="text" value="" id="test-input"/>
           </${tag}>`);
       const shadowRoot = inputter.shadowRoot;
 
@@ -179,8 +179,9 @@ describe('Inputter', () => {
       expect(validationMessage).to.not.be.null; // eslint-disable-line no-unused-expressions
       expect(validationMessage.textContent.trim().replace(/\s\s+/g, ' ')).to.equal('Length must be between 8 and 20 characters.', 'validation message has correct value');
 
+      expect(inputter._id).to.be.equal('test-input');
       const validationId = `${inputter._id}-validation`;
-      const validationLightDOM = inputter.querySelector(`#${validationId}`);
+      const validationLightDOM = inputter.querySelector(`#test-input-validation`);
       // eslint-disable-next-line no-unused-expressions
       expect(validationLightDOM).to.be.ok;
       expect(inputElement.getAttribute('aria-errormessage')).to.be.equal(validationId);
@@ -258,6 +259,13 @@ describe('Inputter', () => {
       expect(validationMessage).to.not.be.null; // eslint-disable-line no-unused-expressions
       expect(validationMessage.textContent.trim().replace(/\s\s+/g, ' ')).to.equal('This field is required.', 'validation message has correct value');
 
+      const validationId = `${inputter._id}-validation`;
+      const validationLightDOM = inputter.querySelector(`#${validationId}`);
+      // eslint-disable-next-line no-unused-expressions
+      expect(validationLightDOM).to.be.ok;
+      expect(validationLightDOM.textContent).to.be.equal('input label This field is required.');
+      expect(inputElement.getAttribute('aria-errormessage')).to.be.equal(validationId);
+
       const validationIcon = shadowRoot.querySelector('.validation .icon');
       expect(validationIcon).to.not.be.null; // eslint-disable-line no-unused-expressions
       expect(validationIcon.name).to.equal('exclamation-circle', 'validation icon has correct value');
@@ -269,6 +277,9 @@ describe('Inputter', () => {
       validation = shadowRoot.querySelector('.validation');
       expect(validation).to.be.null; // eslint-disable-line no-unused-expressions
 
+      // eslint-disable-next-line no-unused-expressions
+      expect(validationLightDOM.textContent).to.be.empty;
+
       inputMask = shadowRoot.querySelector('.input-mask');
       expect(inputMask.textContent).to.be.equal('   0', '`input-mask` has correct value');
     });
@@ -419,7 +430,6 @@ describe('Inputter', () => {
       const validationMessage = shadowRoot.querySelector('.validation .message');
       expect(validationMessage).to.not.be.null; // eslint-disable-line no-unused-expressions
 
-
       expect(validationMessage.textContent?.trim().replace(/\s\s+/g, ' ')).to.equal('This field is required.', 'validation message has correct value');
 
       const validationIcon = shadowRoot.querySelector('.validation .icon');