Commit graph

26 commits

Author SHA1 Message Date
Classic298
15f724b0f2
fix: give SensitiveInput a unique default id (WCAG 1.3.1, 4.1.2) (#27488)
On latest `dev`, `SensitiveInput` defaults to `export let id = 'password-input'`. The id is used both for the input itself and as the `for` target of the screen reader label rendered just above it.

There are 80 `<SensitiveInput>` usages in `src/` and only 4 pass an explicit id, so the remaining 76 all render `id="password-input"` together with `<label for="password-input">`. These collide on the same page in completely ordinary configurations: `admin/Settings/Audio.svelte` renders 4 at once with `STT_ENGINE === 'openai'` and 4 more with `TTS_ENGINE === 'openai'`, `admin/Settings/Documents.svelte` has 11, and `admin/Settings/WebSearch.svelte` has 33.

`for` resolves to the first matching element, so every label after the first points at the wrong input. In practice a screen reader user tabbing to the OpenAI TTS API key field hears the label belonging to the STT key field from a different section, and every one of those fields announces the same name. Browser password managers and any `getElementById` lookup collapse onto the first element the same way.

Breaks WCAG 1.3.1 Info and Relationships (Level A), because the programmatic label/field relationship is wrong, and 4.1.2 Name, Role, Value (Level A), because the fields do not expose their correct accessible name.

Fix: default the id to a per instance unique value. A Svelte prop default is evaluated per component instance, so each `SensitiveInput` gets its own stable id, and the 4 call sites that pass an explicit id are unaffected. `uuid` is already a direct dependency and `import { v4 as uuidv4 } from 'uuid'` is the existing pattern in the codebase, including `common/Collapsible.svelte`, which already generates a DOM id this way.

Note for self hosted setups: a `#password-input` selector in `static/custom.css` would stop matching. That selector already matched up to 8 elements at once on the Audio settings page, so it was never a reliable hook.

Severity: Serious. Every API key field in Admin Settings is mislabelled for assistive technology.

### Contributor License Agreement

<!--
🚨 DO NOT DELETE THE TEXT BELOW 🚨
Keep the "Contributor License Agreement" confirmation text intact.
Deleting it will trigger the CLA-Bot to INVALIDATE your PR.

Your PR will NOT be reviewed or merged until you check the box below confirming that you have read and agree to the terms of the CLA.
-->

- [x] By submitting this pull request, I confirm that I have read and fully agree to the [Contributor License Agreement (CLA)](https://github.com/open-webui/open-webui/blob/main/CONTRIBUTOR_LICENSE_AGREEMENT), and I am providing my contributions under its terms.

> [!NOTE]
> Deleting the CLA section will lead to immediate closure of your PR and it will not be merged in.
2026-07-26 17:37:45 -04:00
Timothy Jaeryang Baek
c3878b418a refac 2026-07-15 18:21:24 -04:00
Timothy Jaeryang Baek
ba067258de refac 2026-07-15 17:50:26 -04:00
Timothy Jaeryang Baek
db934a3b4f refac 2026-07-15 16:51:08 -04:00
Timothy Jaeryang Baek
60ea4214aa refac 2026-05-09 02:58:17 +09:00
Timothy Jaeryang Baek
9dff497abf refac 2026-02-25 13:12:34 -06:00
Timothy Jaeryang Baek
1441d0d735 refac 2026-01-31 17:03:29 -06:00
Timothy Jaeryang Baek
4ba96fe3e5 refac 2025-08-08 12:55:24 +04:00
Timothy Jaeryang Baek
d0657054a5 enh: abililty to stop merge response 2025-08-05 22:25:51 +04:00
Sine Jespersen
27f7df8ad6 accessibility: placeholder contrast on sensitiveinput 2025-06-18 09:50:04 +02:00
Sine Jespersen
75883dc835 outline-hidden depend on high contrast mode 2025-06-16 09:43:47 +02:00
Sine Jespersen
d1677635a5 add label visible to screen readers to sensitive input 2025-06-16 09:41:29 +02:00
Sine Jespersen
400c4c3d12 add aria pressed to toggle visibility button, to show current state 2025-06-16 09:40:41 +02:00
Sine Jespersen
53d044f8a2 add aria label to button with no other label 2025-06-16 09:12:12 +02:00
Sine Jespersen
0e95af01ea remove decorative svg from screen readers 2025-06-16 09:11:50 +02:00
Timothy Jaeryang Baek
e3fa48b6ce chore: tailwind v4 migration 2025-02-15 19:27:25 -08:00
Timothy Jaeryang Baek
43df7e1424 fix: sensitive input button type 2025-02-08 14:02:59 -08:00
Timothy Jaeryang Baek
0809eb79b8 refac: openai connections 2024-11-11 21:18:51 -08:00
Timothy Jaeryang Baek
b2928975dc refac: styling 2024-11-10 21:01:28 -08:00
Timothy J. Baek
c44e51ae58 refac 2024-08-01 21:43:13 +02:00
Erick Joseph
3569fe9c73 the fix for the issue where chrome thought the SensitiveInput input was a password field 2024-07-31 16:15:00 -03:00
Timothy J. Baek
f0a8aca0e3 fix: automatic1111 auth key should not be required 2024-07-16 10:33:05 +02:00
Timothy J. Baek
a23146ebd1 refac: styling 2024-07-08 20:10:00 -07:00
Timothy J. Baek
3c7f45ced4 fix 2024-06-27 11:12:07 -07:00
Timothy J. Baek
a92c5381fb chore: format 2024-06-25 08:51:52 -07:00
Jun Siang Cheah
f8f6943128 refac: use new SensitiveInput component 2024-06-25 20:15:29 +08:00