Skip to content

Commit 6a6e3c8

Browse files
deleoniodeleonio
authored
Disable accessible autocomplete overlay comments (#8042)
2 parents 58b8714 + 3575581 commit 6a6e3c8

File tree

5 files changed

+35
-27
lines changed

5 files changed

+35
-27
lines changed

‎packages/components/src/components/combobox/shadow.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,7 @@ export class KolCombobox implements ComboboxAPI {
207207
aria-labelledby={this.state._id}
208208
aria-activedescendant={this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined}
209209
autoCapitalize="off"
210+
autoComplete="off" /* disable browser's not accessible autocomplete popup */
210211
autoCorrect="off"
211212
disabled={this.state._disabled}
212213
id={this.state._id}

‎packages/components/src/components/combobox/test/__snapshots__/snapshot.spec.tsx.snap‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ exports[`kol-combobox should render with _label="Label" _name="field" _placehold
1313
</span>
1414
<div slot="input">
1515
<div class="combobox__group">
16-
<input accesskey="V" aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
16+
<input accesskey="V" aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocomplete="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
1717
<button class="combobox__icon" tabindex="-1">
1818
<kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
1919
</button>
@@ -37,7 +37,7 @@ exports[`kol-combobox should render with _label="Label" _name="field" _placehold
3737
</span>
3838
<div slot="input">
3939
<div class="combobox__group">
40-
<input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
40+
<input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocomplete="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
4141
<button class="combobox__icon" tabindex="-1">
4242
<kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
4343
</button>
@@ -61,7 +61,7 @@ exports[`kol-combobox should render with _label="Label" _name="field" _placehold
6161
</span>
6262
<div slot="input">
6363
<div class="combobox__group">
64-
<input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" disabled="" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
64+
<input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocomplete="off" autocorrect="off" class="combobox__input" disabled="" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
6565
<button class="combobox__icon" disabled="" tabindex="-1">
6666
<kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
6767
</button>
@@ -85,7 +85,7 @@ exports[`kol-combobox should render with _label="Label" _name="field" _placehold
8585
</span>
8686
<div slot="input">
8787
<div class="combobox__group">
88-
<input aria-autocomplete="both" aria-controls="listbox" aria-describedby="id-nonce-hint" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
88+
<input aria-autocomplete="both" aria-controls="listbox" aria-describedby="id-nonce-hint" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocomplete="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
8989
<button class="combobox__icon" tabindex="-1">
9090
<kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
9191
</button>
@@ -109,7 +109,7 @@ exports[`kol-combobox should render with _label="Label" _name="field" _placehold
109109
</span>
110110
<div slot="input">
111111
<div class="combobox__group">
112-
<input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
112+
<input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocomplete="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
113113
<button class="combobox__icon" tabindex="-1">
114114
<kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
115115
</button>
@@ -133,7 +133,7 @@ exports[`kol-combobox should render with _label="Label" _name="field" _placehold
133133
</span>
134134
<div slot="input">
135135
<div class="combobox__group">
136-
<input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
136+
<input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocomplete="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
137137
<button class="combobox__icon" tabindex="-1">
138138
<kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
139139
</button>
@@ -157,7 +157,7 @@ exports[`kol-combobox should render with _label="Label" _name="field" _placehold
157157
</span>
158158
<div slot="input">
159159
<div class="combobox__group">
160-
<input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
160+
<input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocomplete="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
161161
<button class="combobox__icon" tabindex="-1">
162162
<kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
163163
</button>
@@ -181,7 +181,7 @@ exports[`kol-combobox should render with _label="Label" _name="field" _placehold
181181
</span>
182182
<div slot="input">
183183
<div class="combobox__group">
184-
<input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
184+
<input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocomplete="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
185185
<button class="combobox__icon" tabindex="-1">
186186
<kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
187187
</button>
@@ -205,7 +205,7 @@ exports[`kol-combobox should render with _label="Label" _name="field" _placehold
205205
</span>
206206
<div slot="input">
207207
<div class="combobox__group">
208-
<input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
208+
<input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocomplete="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
209209
<button class="combobox__icon" tabindex="-1">
210210
<kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
211211
</button>
@@ -229,7 +229,7 @@ exports[`kol-combobox should render with _label="Label" _name="field" _placehold
229229
</span>
230230
<div slot="input">
231231
<div class="combobox__group">
232-
<input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
232+
<input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocomplete="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
233233
<button class="combobox__icon" tabindex="-1">
234234
<kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
235235
</button>
@@ -254,7 +254,7 @@ exports[`kol-combobox should render with _label="Label" _name="field" _placehold
254254
</span>
255255
<div slot="input">
256256
<div class="combobox__group">
257-
<input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
257+
<input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocomplete="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
258258
<button class="combobox__icon" tabindex="-1">
259259
<kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
260260
</button>
@@ -278,7 +278,7 @@ exports[`kol-combobox should render with _label="Label" _name="field" _placehold
278278
</span>
279279
<div slot="input">
280280
<div class="combobox__group">
281-
<input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
281+
<input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocomplete="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
282282
<button class="combobox__icon" tabindex="-1">
283283
<kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
284284
</button>
@@ -302,7 +302,7 @@ exports[`kol-combobox should render with _label="Label" _name="field" _placehold
302302
</span>
303303
<div slot="input">
304304
<div class="combobox__group">
305-
<input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
305+
<input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocomplete="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" type="text" value="Herr">
306306
<button class="combobox__icon" tabindex="-1">
307307
<kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
308308
</button>

‎packages/components/src/components/form/shadow.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,13 @@ export class KolForm implements FormAPI {
7474

7575
private renderFormElement(): JSX.Element {
7676
return (
77-
<form method="post" onSubmit={this.onSubmit} onReset={this.onReset} autoComplete="off" noValidate>
77+
<form
78+
autoComplete="off" /* disable browser's not accessible autocomplete popup */
79+
method="post"
80+
onSubmit={this.onSubmit}
81+
onReset={this.onReset}
82+
noValidate
83+
>
7884
{this.state._requiredText === true ? (
7985
<p>
8086
<div class="mandatory-fields-hint">{translate('kol-form-description')}</div>

‎packages/components/src/components/single-select/shadow.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,7 @@ export class KolSingleSelect implements SingleSelectAPI {
237237
aria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}
238238
aria-activedescendant={this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined}
239239
autoCapitalize="off"
240+
autoComplete="off" /* disable browser's not accessible autocomplete popup */
240241
autoCorrect="off"
241242
disabled={this.state._disabled}
242243
name={this.state._name}

0 commit comments

Comments
 (0)
⚡