@@ -102,21 +102,22 @@ export class Inputter extends ScopedElementsMixin(ValidationMixin(MaskMixin(Muon
102
102
super . willUpdate ( changedProperties ) ;
103
103
104
104
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 } "]` ) ;
106
107
if ( ! validationEle ) {
107
108
validationEle = document . createElement ( 'div' ) ;
108
109
validationEle . setAttribute ( 'class' , 'visually-hidden' ) ;
109
- validationEle . setAttribute ( 'id' , ` ${ currentId } -validation` ) ;
110
+ validationEle . setAttribute ( 'id' , validationId ) ;
110
111
this . appendChild ( validationEle ) ;
111
112
}
112
113
const slottedInput = this . _slottedInputs [ 0 ] ;
113
114
if ( this . _shouldShowValidation ) {
114
115
validationEle . setAttribute ( 'aria-live' , 'polite' ) ;
115
- slottedInput ?. setAttribute ( 'aria-errormessage ' , ` ${ currentId } -validation` ) ;
116
+ slottedInput ?. setAttribute ( 'aria-describedby ' , validationId ) ;
116
117
slottedInput ?. setAttribute ( 'aria-invalid' , 'true' ) ;
117
118
validationEle . textContent = `${ this . _isMultiple ? this . heading : this . _slottedLabel ?. textContent } ${ this . validationMessage } ` ;
118
119
} else {
119
- slottedInput ?. removeAttribute ( 'aria-errormessage ' ) ;
120
+ slottedInput ?. removeAttribute ( 'aria-describedby ' ) ;
120
121
slottedInput ?. removeAttribute ( 'aria-invalid' ) ;
121
122
validationEle . textContent = '' ;
122
123
}
@@ -250,6 +251,7 @@ export class Inputter extends ScopedElementsMixin(ValidationMixin(MaskMixin(Muon
250
251
${ this . _addMask }
251
252
${ this . _addInputTypeIcon }
252
253
</ div >
254
+ ${ this . _addValidationMessage }
253
255
` ;
254
256
}
255
257
@@ -268,7 +270,6 @@ export class Inputter extends ScopedElementsMixin(ValidationMixin(MaskMixin(Muon
268
270
</ fieldset >
269
271
` : this . __wrapperContent }
270
272
</ div >
271
- ${ this . _addValidationMessage }
272
273
` ;
273
274
}
274
275
}
0 commit comments