Add aria-labelledby prop to Modal.svelte so consumer components can reference their heading element for screen reader announcement (WCAG 4.1.2 Name, Role, Value).
Configure focus-trap with returnFocusOnDeactivate: true in Modal.svelte to restore keyboard focus to the trigger element when the modal closes (WCAG 2.4.3 Focus Order).
Add role='dialog', aria-modal='true', and aria-labelledby to ConfirmDialog.svelte. Previously the confirm dialog container had no ARIA dialog semantics at all.
Add id='confirm-dialog-title' to the ConfirmDialog title element and reference it via aria-labelledby so screen readers announce the dialog purpose on open.
Add aria-label to the ConfirmDialog textarea input so screen readers can identify the field.
Configure ConfirmDialog focus-trap with returnFocusOnDeactivate: true.
Add full focus-trap implementation to Drawer.svelte using the same focus-trap library already used by Modal and ConfirmDialog. Previously the Drawer had no focus trapping at all, allowing keyboard focus to escape the drawer.
Add role='dialog', aria-modal='true', and ariaLabelledby prop to Drawer.svelte.
Wire ariaLabelledby and heading IDs in InputModal.svelte and CodeEditorModal.svelte so their Drawer dialogs are properly labeled for screen readers.
Contributor License Agreement
By submitting this pull request, I confirm that I have read and fully agree to the Contributor License Agreement (CLA), 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.
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.
## 📋 Pull Request Information
**Original PR:** https://github.com/open-webui/open-webui/pull/21702
**Author:** [@Classic298](https://github.com/Classic298)
**Created:** 2/21/2026
**Status:** ❌ Closed
**Base:** `dev` ← **Head:** `a11y/modal-dialog-drawer`
---
### 📝 Commits (1)
- [`c844656`](https://github.com/open-webui/open-webui/commit/c844656aaa4c9399c7dee226785f9856541b8747) fix(a11y): improve modal, dialog, and drawer accessibility
### 📊 Changes
**5 files changed** (+33 additions, -7 deletions)
<details>
<summary>View changed files</summary>
📝 `src/lib/components/common/CodeEditorModal.svelte` (+2 -2)
📝 `src/lib/components/common/ConfirmDialog.svelte` (+8 -2)
📝 `src/lib/components/common/Drawer.svelte` (+17 -0)
📝 `src/lib/components/common/InputModal.svelte` (+2 -2)
📝 `src/lib/components/common/Modal.svelte` (+4 -1)
</details>
### 📄 Description
- Add aria-labelledby prop to Modal.svelte so consumer components can reference their heading element for screen reader announcement (WCAG 4.1.2 Name, Role, Value).
- Configure focus-trap with returnFocusOnDeactivate: true in Modal.svelte to restore keyboard focus to the trigger element when the modal closes (WCAG 2.4.3 Focus Order).
- Add role='dialog', aria-modal='true', and aria-labelledby to ConfirmDialog.svelte. Previously the confirm dialog container had no ARIA dialog semantics at all.
- Add id='confirm-dialog-title' to the ConfirmDialog title element and reference it via aria-labelledby so screen readers announce the dialog purpose on open.
- Add aria-label to the ConfirmDialog textarea input so screen readers can identify the field.
- Configure ConfirmDialog focus-trap with returnFocusOnDeactivate: true.
- Add full focus-trap implementation to Drawer.svelte using the same focus-trap library already used by Modal and ConfirmDialog. Previously the Drawer had no focus trapping at all, allowing keyboard focus to escape the drawer.
- Add role='dialog', aria-modal='true', and ariaLabelledby prop to Drawer.svelte.
- Wire ariaLabelledby and heading IDs in InputModal.svelte and CodeEditorModal.svelte so their Drawer dialogs are properly labeled for screen readers.
### 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.
-->
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.
---
<sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
📋 Pull Request Information
Original PR: https://github.com/open-webui/open-webui/pull/21702
Author: @Classic298
Created: 2/21/2026
Status: ❌ Closed
Base:
dev← Head:a11y/modal-dialog-drawer📝 Commits (1)
c844656fix(a11y): improve modal, dialog, and drawer accessibility📊 Changes
5 files changed (+33 additions, -7 deletions)
View changed files
📝
src/lib/components/common/CodeEditorModal.svelte(+2 -2)📝
src/lib/components/common/ConfirmDialog.svelte(+8 -2)📝
src/lib/components/common/Drawer.svelte(+17 -0)📝
src/lib/components/common/InputModal.svelte(+2 -2)📝
src/lib/components/common/Modal.svelte(+4 -1)📄 Description
Add aria-labelledby prop to Modal.svelte so consumer components can reference their heading element for screen reader announcement (WCAG 4.1.2 Name, Role, Value).
Configure focus-trap with returnFocusOnDeactivate: true in Modal.svelte to restore keyboard focus to the trigger element when the modal closes (WCAG 2.4.3 Focus Order).
Add role='dialog', aria-modal='true', and aria-labelledby to ConfirmDialog.svelte. Previously the confirm dialog container had no ARIA dialog semantics at all.
Add id='confirm-dialog-title' to the ConfirmDialog title element and reference it via aria-labelledby so screen readers announce the dialog purpose on open.
Add aria-label to the ConfirmDialog textarea input so screen readers can identify the field.
Configure ConfirmDialog focus-trap with returnFocusOnDeactivate: true.
Add full focus-trap implementation to Drawer.svelte using the same focus-trap library already used by Modal and ConfirmDialog. Previously the Drawer had no focus trapping at all, allowing keyboard focus to escape the drawer.
Add role='dialog', aria-modal='true', and ariaLabelledby prop to Drawer.svelte.
Wire ariaLabelledby and heading IDs in InputModal.svelte and CodeEditorModal.svelte so their Drawer dialogs are properly labeled for screen readers.
Contributor License Agreement
By submitting this pull request, I confirm that I have read and fully agree to the Contributor License Agreement (CLA), and I am providing my contributions under its terms.
🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.