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

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 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)
+
+
+### Features
+
+* group radio checkbox inputs in fieldset ([9f0d998](https://github.com/centrica-engineering/muon/commit/9f0d998156216f538c6eeb00d043184495cbafd8))
+* move validation screen reader accessibility to light dom ([bbd4eec](https://github.com/centrica-engineering/muon/commit/bbd4eec1e72039c62c5e04fd40f5bf7dc3c019ed))
+* remove aria-describedby ([bff1d11](https://github.com/centrica-engineering/muon/commit/bff1d113a8ba776a50465d3c98a08716d460c8f1))
+* unique validation message id ([2b6b9d1](https://github.com/centrica-engineering/muon/commit/2b6b9d14bea5699264d3e42e4d87981f1cf19197))
+* validation message to input element mapping ([2c69e45](https://github.com/centrica-engineering/muon/commit/2c69e45ef8d4dcd904885dd671344e1b4fce1ca1))
+* wrap heading in legend ([40e7bea](https://github.com/centrica-engineering/muon/commit/40e7bea16d07600de38f93c34a7423a86f32a052))
+
+
+### Bug Fixes
+
+* inputter id autogenerated and provided ([ca18a17](https://github.com/centrica-engineering/muon/commit/ca18a17d2a8b656c6e6476dac0b83c6161f9c77f))
+* validation id attribute ([7abeb99](https://github.com/centrica-engineering/muon/commit/7abeb99af524ed31e6478ed2e5f9b9dfe0c60454))
+
 ### [0.0.2-beta.55](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.54...v0.0.2-beta.55) (2024-11-07)
 
 ### [0.0.2-beta.54](https://github.com/centrica-engineering/muon/compare/v0.0.2-beta.52...v0.0.2-beta.54) (2024-10-15)

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

@@ -101,21 +101,23 @@ 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;
+    const validationId = `${currentId}-validation`;
+    let validationEle = this.querySelector(`[id="${validationId}"]`);
     if (!validationEle) {
       validationEle = document.createElement('div');
       validationEle.setAttribute('class', 'visually-hidden');
-      validationEle.setAttribute('id', `${this._id}-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', `${this._id}-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 = '';
     }
@@ -249,6 +251,7 @@ export class Inputter extends ScopedElementsMixin(ValidationMixin(MaskMixin(Muon
         ${this._addMask}
         ${this._addInputTypeIcon}
       </div>
+      ${this._addValidationMessage}
     `;
   }
 
@@ -267,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.55",
+  "version": "0.0.2-beta.57",
   "description": "",
   "main": "index.js",
   "scripts": {

package/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,11 +179,12 @@ 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);
+      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');
@@ -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-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');
@@ -269,6 +277,9 @@ describe('Inputter', () => {
       validation = shadowRoot.querySelector('.validation');
       expect(validation).to.be.null; // eslint-disable-line no-unused-expressions
 
+      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');
     });
@@ -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');