Skip to content

Commit 28df97b

Browse files
Merge pull request #612 from centrica-engineering/fix/inputter-id-selector
Inputter id selector fix
2 parents f324f9d + 01bef77 commit 28df97b

File tree

2 files changed

+10
-9
lines changed

2 files changed

+10
-9
lines changed

packages/muon/components/inputter/src/inputter-component.js

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -102,21 +102,22 @@ export class Inputter extends ScopedElementsMixin(ValidationMixin(MaskMixin(Muon
102102
super.willUpdate(changedProperties);
103103

104104
const currentId = this._slottedInputs[0]?.getAttribute('id') || this._id;
105-
let validationEle = this.querySelector(`#${currentId}-validation`);
105+
const validationId = `${currentId}-validation`;
106+
let validationEle = this.querySelector(`[id="${validationId}"]`);
106107
if (!validationEle) {
107108
validationEle = document.createElement('div');
108109
validationEle.setAttribute('class', 'visually-hidden');
109-
validationEle.setAttribute('id', `${currentId}-validation`);
110+
validationEle.setAttribute('id', validationId);
110111
this.appendChild(validationEle);
111112
}
112113
const slottedInput = this._slottedInputs[0];
113114
if (this._shouldShowValidation) {
114115
validationEle.setAttribute('aria-live', 'polite');
115-
slottedInput?.setAttribute('aria-errormessage', `${currentId}-validation`);
116+
slottedInput?.setAttribute('aria-describedby', validationId);
116117
slottedInput?.setAttribute('aria-invalid', 'true');
117118
validationEle.textContent = `${this._isMultiple ? this.heading : this._slottedLabel?.textContent} ${this.validationMessage}`;
118119
} else {
119-
slottedInput?.removeAttribute('aria-errormessage');
120+
slottedInput?.removeAttribute('aria-describedby');
120121
slottedInput?.removeAttribute('aria-invalid');
121122
validationEle.textContent = '';
122123
}
@@ -250,6 +251,7 @@ export class Inputter extends ScopedElementsMixin(ValidationMixin(MaskMixin(Muon
250251
${this._addMask}
251252
${this._addInputTypeIcon}
252253
</div>
254+
${this._addValidationMessage}
253255
`;
254256
}
255257

@@ -268,7 +270,6 @@ export class Inputter extends ScopedElementsMixin(ValidationMixin(MaskMixin(Muon
268270
</fieldset>
269271
` : this.__wrapperContent}
270272
</div>
271-
${this._addValidationMessage}
272273
`;
273274
}
274275
}

packages/muon/tests/components/inputter/inputter.test.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ describe('Inputter', () => {
184184
const validationLightDOM = inputter.querySelector(`#test-input-validation`);
185185
// eslint-disable-next-line no-unused-expressions
186186
expect(validationLightDOM).to.be.ok;
187-
expect(inputElement.getAttribute('aria-errormessage')).to.be.equal(validationId);
187+
expect(inputElement.getAttribute('aria-describedby')).to.be.equal(validationId);
188188
const validationIcon = shadowRoot.querySelector('.validation .icon');
189189
expect(validationIcon).to.not.be.null; // eslint-disable-line no-unused-expressions
190190
expect(validationIcon.name).to.equal('exclamation-circle', 'validation icon has correct value');
@@ -264,7 +264,7 @@ describe('Inputter', () => {
264264
// eslint-disable-next-line no-unused-expressions
265265
expect(validationLightDOM).to.be.ok;
266266
expect(validationLightDOM.textContent).to.be.equal('input label This field is required.');
267-
expect(inputElement.getAttribute('aria-errormessage')).to.be.equal(validationId);
267+
expect(inputElement.getAttribute('aria-describedby')).to.be.equal(validationId);
268268

269269
const validationIcon = shadowRoot.querySelector('.validation .icon');
270270
expect(validationIcon).to.not.be.null; // eslint-disable-line no-unused-expressions
@@ -277,8 +277,8 @@ describe('Inputter', () => {
277277
validation = shadowRoot.querySelector('.validation');
278278
expect(validation).to.be.null; // eslint-disable-line no-unused-expressions
279279

280-
// eslint-disable-next-line no-unused-expressions
281-
expect(validationLightDOM.textContent).to.be.empty;
280+
expect(inputElement.getAttribute('aria-describedby')).to.be.null; // eslint-disable-line no-unused-expressions
281+
expect(validationLightDOM.textContent).to.be.empty; // eslint-disable-line no-unused-expressions
282282

283283
inputMask = shadowRoot.querySelector('.input-mask');
284284
expect(inputMask.textContent).to.be.equal(' 0', '`input-mask` has correct value');

0 commit comments

Comments
 (0)