dbeaver/pro#5232 [CB] Trap Focus In the Right Panel

[SychevAndrey]

Screen.Recording.2025-12-03.at.11.43.31.mov

Screen.Recording.2025-12-03.at.11.45.51.mov

While working with this task I encountered several issues:

I couldn't use FocusTrapRegion on the Panel itself, because components should be open to extension to use it, which we could not guarantee with our design.
I couldn't apply FocusTrapRegion on the SlideElement, because it is used for the static part of the app as well.
Then I tried to use FocusTrapRegion on the SlideBox. It entailed two problems:

1. Focus will be trapped only after user interaction. We somehow steal focus from the other part of the app.
2. We have not only the Right Panel in the SlideBox, so we had to make other element inert manually which is weird in case of using library.

Having said that, I decided to use Dialog component from the AriaKit library. This component is based on the WAI-ARIA Dialog Pattern and do everything what we need.

To achieve that I did the following:

1. Added new Dialog component to ui-kit
2. Used it to implement Right Panel.

Here I came across to another problem: nested dialogs were not showed properly. That was kinda expected, so I just make another bunch of changes:

3. Added some Dialog layout wrapper
4. Used new ui-kit Dialog component to implement CB's CommonDialog.

As a result, CommonDialogWrapper became much more simple. We could delete state and focus handling. We also simplified DialogsPortal component, because AriaKit Dialog can handle all the inner dialog focus movements for us.

I generated a bunch of Stories for storybook. I also added storybook source add-on. It comes in handy when you want to see examples of implementation. No need to search the workspace, you can see the code and how it works right in the storybook.

P.S.
For Right Panel I tried to implement special variant of Dialog, but due to growing complexity of that task and many changes, I stopped myself from changing RightArea logic with SlideBox and SlideElement. If we decide, we want to simplify it and remove carousel, we will be able to use Slide Dialog later.

[Copilot]

Pull request overview

This pull request introduces a new Dialog component based on AriaKit's WAI-ARIA Dialog Pattern to implement focus trapping in the right panel. The implementation replaces custom focus handling with a library-based solution that provides better accessibility and maintainability.

Key changes:

• Added new Dialog component to ui-kit with support for modal dialogs and slide panels
• Refactored CommonDialogWrapper to use the new Dialog component, simplifying state and focus management
• Updated right panel implementations in Administration and RightArea to use Dialog for focus trapping

Reviewed changes

Copilot reviewed 29 out of 30 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
webapp/yarn.lock	Added dependencies for Storybook addon-storysource and supporting libraries
webapp/packages/storybook/package.json	Added @storybook/addon-storysource dependency for viewing component source code
webapp/packages/storybook/.storybook/main.ts	Configured the new storysource addon
webapp/packages/storybook/src/stories/components/Dialog/dialog.stories.tsx	Comprehensive stories demonstrating Dialog component usage
webapp/packages/storybook/src/stories/components/Dialog/Dialog.mdx	Documentation for Dialog component and its variants
webapp/common-react/@dbeaver/ui-kit/src/Dialog/Dialog.tsx	New Dialog component wrapping AriaKit with custom styling
webapp/common-react/@dbeaver/ui-kit/src/Dialog/Dialog.css	Styling for Dialog component including animations and variants
webapp/common-react/@dbeaver/ui-kit/src/Dialog/_base.css	CSS variables for Dialog theming
webapp/common-react/@dbeaver/ui-kit/src/index.ts	Exports new Dialog component from ui-kit
webapp/packages/core-blocks/src/CommonDialog/DialogsPortal.tsx	Simplified by removing custom focus handling and backdrop logic
webapp/packages/core-blocks/src/CommonDialog/DialogsPortal.module.css	Removed unused backdrop styles
webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogWrapper.tsx	Refactored to use new Dialog component
webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogWrapper.module.css	Updated styles to work with new Dialog component
webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogHeader.tsx	Uses DialogHeader from ui-kit
webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogFooter.tsx	Uses DialogFooter from ui-kit
webapp/packages/core-blocks/src/CommonDialog/CommonDialog/CommonDialogBody.tsx	Uses DialogBody from ui-kit
webapp/packages/core-blocks/src/Slide/SlideBox.tsx	Removed onClose prop and escape key handling (now handled by Dialog)
webapp/packages/core-blocks/src/Slide/SlideOverlay.tsx	Removed close button (now rendered separately)
webapp/packages/plugin-administration/src/Administration/Administration.tsx	Wraps OptionsPanel in Dialog for focus trapping
webapp/packages/plugin-administration/src/Administration/shared/Administration.module.css	Adds styles for close button
webapp/packages/plugin-administration/package.json	Added ui-kit dependency
webapp/packages/plugin-administration/tsconfig.json	Added ui-kit reference
webapp/packages/core-app/src/AppScreen/RightArea.tsx	Wraps OptionsPanel in Dialog for focus trapping
webapp/packages/core-app/src/AppScreen/RightArea.module.css	Adds styles for close button
webapp/packages/plugin-connection-custom/src/DriverSelector/DriverSelectorDialog.tsx	Removed autofocus prop (now handled by Dialog)
webapp/packages/plugin-authentication/src/Dialog/AuthDialog.tsx	Removed autofocus prop (now handled by Dialog)

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[SychevAndrey]

Screen.Recording.2025-12-05.at.10.25.28.mov

Dialog was removed from SlidePanel implementation, we returned back to manual ESC hotkey handling.
The differences now are the following:

1. Hidden panel becomes inert, so focus never goes there and always visible on the screen
2. Closing button are reachable from the keyboard now and get the focus when the panel is open, since it's always there and don't need to be loaded, it gives us very reliable mechanism of autofocusing on the panel.