[PR #21702] [CLOSED] fix(a11y): improve modal, dialog, and drawer accessibility #49268

New Issue

GiteaMirror · 2026-04-30T01:35:15-05:00

GiteaMirror commented

2026-04-30 01:35:15 -05:00

📋 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)

c844656 fix(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.

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  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>

GiteaMirror added the pull-request label 2026-04-30 01:35:15 -05:00

GiteaMirror closed this issue

2026-04-30 01:35:16 -05:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/open-webui#49268