@muonic/muon 0.0.2-beta.56 → 0.0.2-beta.57

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.2-beta.57](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.56...v0.0.2-beta.57) (2024-11-11)
+
+
+### Features
+
+* validation message placement ([01bef77](https://github.com/centrica-engineering/muon/commit/01bef77cb6d8690fcd5d95ad9ded31785ddd22d0))
+
+
+### Bug Fixes
+
+* id selector fix ([befa041](https://github.com/centrica-engineering/muon/commit/befa041959eb045ae59c996d6d94af48afcfdd2c))
+
 ### [0.0.2-beta.56](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.55...v0.0.2-beta.56) (2024-11-07)
 
 

package/components/inputter/src/inputter-component.js

@@ -102,21 +102,22 @@ export class Inputter extends ScopedElementsMixin(ValidationMixin(MaskMixin(Muon
     super.willUpdate(changedProperties);
 
     const currentId = this._slottedInputs[0]?.getAttribute('id') || this._id;
-    let validationEle = this.querySelector(`#${currentId}-validation`);
+    const validationId = `${currentId}-validation`;
+    let validationEle = this.querySelector(`[id="${validationId}"]`);
     if (!validationEle) {
       validationEle = document.createElement('div');
       validationEle.setAttribute('class', 'visually-hidden');
-      validationEle.setAttribute('id', `${currentId}-validation`);
+      validationEle.setAttribute('id', validationId);
       this.appendChild(validationEle);
     }
     const slottedInput = this._slottedInputs[0];
     if (this._shouldShowValidation) {
       validationEle.setAttribute('aria-live', 'polite');
-      slottedInput?.setAttribute('aria-errormessage', `${currentId}-validation`);
+      slottedInput?.setAttribute('aria-describedby', validationId);
       slottedInput?.setAttribute('aria-invalid', 'true');
       validationEle.textContent = `${this._isMultiple ? this.heading : this._slottedLabel?.textContent} ${this.validationMessage}`;
     } else {
-      slottedInput?.removeAttribute('aria-errormessage');
+      slottedInput?.removeAttribute('aria-describedby');
       slottedInput?.removeAttribute('aria-invalid');
       validationEle.textContent = '';
     }
@@ -250,6 +251,7 @@ export class Inputter extends ScopedElementsMixin(ValidationMixin(MaskMixin(Muon
         ${this._addMask}
         ${this._addInputTypeIcon}
       </div>
+      ${this._addValidationMessage}
     `;
   }
 
@@ -268,7 +270,6 @@ export class Inputter extends ScopedElementsMixin(ValidationMixin(MaskMixin(Muon
           </fieldset>
         ` : this.__wrapperContent}
       </div>
-      ${this._addValidationMessage}
     `;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@muonic/muon",
-  "version": "0.0.2-beta.56",
+  "version": "0.0.2-beta.57",
   "description": "",
   "main": "index.js",
   "scripts": {

package/tests/components/inputter/inputter.test.js

@@ -184,7 +184,7 @@ describe('Inputter', () => {
       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);
+      expect(inputElement.getAttribute('aria-describedby')).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');
@@ -264,7 +264,7 @@ describe('Inputter', () => {
       // 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);
+      expect(inputElement.getAttribute('aria-describedby')).to.be.equal(validationId);
 
       const validationIcon = shadowRoot.querySelector('.validation .icon');
       expect(validationIcon).to.not.be.null; // eslint-disable-line no-unused-expressions
@@ -277,8 +277,8 @@ 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;
+      expect(inputElement.getAttribute('aria-describedby')).to.be.null; // eslint-disable-line no-unused-expressions
+      expect(validationLightDOM.textContent).to.be.empty; // eslint-disable-line no-unused-expressions
 
       inputMask = shadowRoot.querySelector('.input-mask');
       expect(inputMask.textContent).to.be.equal('   0', '`input-mask` has correct value');