diff --git a/packages/vkui/src/components/ModalCard/ModalCard.e2e-playground.tsx b/packages/vkui/src/components/ModalCard/ModalCard.e2e-playground.tsx
index 2bf4da9ee7a..7a16d19283a 100644
--- a/packages/vkui/src/components/ModalCard/ModalCard.e2e-playground.tsx
+++ b/packages/vkui/src/components/ModalCard/ModalCard.e2e-playground.tsx
@@ -94,7 +94,12 @@ export const ModalCardPlayground = (props: ComponentPlaygroundProps) => {
     <ComponentPlayground {...props} propSets={propSets} AppWrapper={AppWrapper}>
       {(props: ModalCardProps) => (
         <div style={{ height: 500, transform: 'translateZ(0)' }}>
-          <ModalRoot activeModal={props.nav}>
+          <ModalRoot
+            activeModal={props.nav}
+            // Note: с включенным фокусом ломаются скриншоты на движке Webkit из-за фокуса сразу
+            // на несколько окон
+            noFocusToDialog
+          >
             <ModalCard {...props} />
           </ModalRoot>
         </div>
diff --git a/packages/vkui/src/components/ModalCard/ModalCard.module.css b/packages/vkui/src/components/ModalCard/ModalCard.module.css
index 6d116db21bd..7a9f8b07b1a 100644
--- a/packages/vkui/src/components/ModalCard/ModalCard.module.css
+++ b/packages/vkui/src/components/ModalCard/ModalCard.module.css
@@ -10,6 +10,10 @@
   align-items: flex-end;
 }
 
+.ModalCard:focus {
+  outline: none;
+}
+
 .ModalCard__in {
   width: 100%;
   margin-left: auto;
diff --git a/packages/vkui/src/components/ModalCard/ModalCard.tsx b/packages/vkui/src/components/ModalCard/ModalCard.tsx
index 792ee6506b7..e730ff7b481 100644
--- a/packages/vkui/src/components/ModalCard/ModalCard.tsx
+++ b/packages/vkui/src/components/ModalCard/ModalCard.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { useExternRef } from '../../hooks/useExternRef';
 import { usePlatform } from '../../hooks/usePlatform';
 import { getNavId, NavIdProps } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
@@ -33,6 +34,7 @@ export const ModalCard = ({
   nav,
   id,
   size,
+  getRootRef,
   ...restProps
 }: ModalCardProps) => {
   const { isDesktop } = useAdaptivityWithJSMediaQueries();
@@ -40,10 +42,18 @@ export const ModalCard = ({
 
   const modalContext = React.useContext(ModalRootContext);
   const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.CARD);
+  const rootRef = useExternRef(getRootRef, refs.modalElement);
+
+  const contextValue = React.useMemo(() => ({ labelId: `${id}-label` }), [id]);
 
   return (
     <RootComponent
       {...restProps}
+      getRootRef={rootRef}
+      tabIndex={-1}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={contextValue.labelId}
       id={id}
       baseClassName={classNames(
         styles['ModalCard'],
diff --git a/packages/vkui/src/components/ModalPage/ModalPage.module.css b/packages/vkui/src/components/ModalPage/ModalPage.module.css
index f92e15cf22a..516fff5dd2f 100644
--- a/packages/vkui/src/components/ModalPage/ModalPage.module.css
+++ b/packages/vkui/src/components/ModalPage/ModalPage.module.css
@@ -7,6 +7,10 @@
   pointer-events: none;
 }
 
+.ModalPage:focus {
+  outline: none;
+}
+
 .ModalPage--desktop {
   display: flex;
   justify-content: center;
diff --git a/packages/vkui/src/components/ModalPage/ModalPage.tsx b/packages/vkui/src/components/ModalPage/ModalPage.tsx
index f1886be80f0..dda568811e2 100644
--- a/packages/vkui/src/components/ModalPage/ModalPage.tsx
+++ b/packages/vkui/src/components/ModalPage/ModalPage.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { useExternRef } from '../../hooks/useExternRef';
 import { useId } from '../../hooks/useId';
 import { useOrientationChange } from '../../hooks/useOrientationChange';
 import { usePlatform } from '../../hooks/usePlatform';
@@ -91,6 +92,7 @@ export const ModalPage = ({
   hideCloseButton = false,
   height,
   modalContentTestId,
+  getRootRef,
   ...restProps
 }: ModalPageProps) => {
   const generatingId = useId();
@@ -113,6 +115,7 @@ export const ModalPage = ({
 
   const modalContext = React.useContext(ModalRootContext);
   const { refs } = useModalRegistry(getNavId({ nav, id }, warn), ModalType.PAGE);
+  const rootRef = useExternRef(getRootRef, refs.modalElement);
 
   const contextValue = React.useMemo(() => ({ labelId: `${id}-label` }), [id]);
 
@@ -120,6 +123,8 @@ export const ModalPage = ({
     <ModalPageContext.Provider value={contextValue}>
       <RootComponent
         {...restProps}
+        getRootRef={rootRef}
+        tabIndex={-1}
         role="dialog"
         aria-modal="true"
         aria-labelledby={contextValue.labelId}
diff --git a/packages/vkui/src/components/ModalRoot/ModalRoot.test.tsx b/packages/vkui/src/components/ModalRoot/ModalRoot.test.tsx
index 17fc6595d0b..633480e9537 100644
--- a/packages/vkui/src/components/ModalRoot/ModalRoot.test.tsx
+++ b/packages/vkui/src/components/ModalRoot/ModalRoot.test.tsx
@@ -170,4 +170,75 @@ describe.each([
 
     expect(document.querySelector('.vkui--disable-overscroll-behavior')).toBeFalsy();
   });
+
+  describe('focus', () => {
+    let modalPageRef: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>();
+    let modalCardRef: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>();
+    let modalPageWithInputRef: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>();
+    let inputInnerModalPageRef: React.RefObject<HTMLInputElement> =
+      React.createRef<HTMLInputElement>();
+    let modals: React.ReactElement[] = [];
+
+    beforeEach(() => {
+      modalPageRef = React.createRef<HTMLDivElement>();
+      modalCardRef = React.createRef<HTMLDivElement>();
+      modalPageWithInputRef = React.createRef<HTMLDivElement>();
+      inputInnerModalPageRef = React.createRef<HTMLInputElement>();
+      modals = [
+        <ModalPage id="modal-page" key="1" getRootRef={modalPageRef} />,
+        <ModalCard id="modal-card" key="2" getRootRef={modalCardRef} />,
+        <ModalPage id="modal-page-with-input" key="3" getRootRef={modalPageWithInputRef}>
+          <input ref={inputInnerModalPageRef} autoFocus />
+        </ModalPage>,
+      ];
+    });
+
+    it('should focus on modal container if controllable element does not exist or is not focused', () => {
+      const component = render(<ModalRoot activeModal="modal-page">{modals}</ModalRoot>, {
+        baseElement: document.documentElement,
+      });
+      runAllTimers();
+
+      expect(modalPageRef.current).toHaveFocus();
+
+      component.rerender(<ModalRoot activeModal="modal-card">{modals}</ModalRoot>);
+      runAllTimers();
+
+      expect(modalCardRef.current).toHaveFocus();
+    });
+
+    it('should focus on controllable element instead modal if it is focused', () => {
+      render(<ModalRoot activeModal="modal-page-with-input">{modals}</ModalRoot>, {
+        baseElement: document.documentElement,
+      });
+      runAllTimers();
+
+      expect(modalPageWithInputRef.current).not.toHaveFocus();
+      expect(inputInnerModalPageRef.current).toHaveFocus();
+    });
+
+    it('should focus on controllable element only (if it is focused)', () => {
+      const component = render(
+        <ModalRoot activeModal="modal-page" noFocusToDialog>
+          {modals}
+        </ModalRoot>,
+        {
+          baseElement: document.documentElement,
+        },
+      );
+      runAllTimers();
+
+      expect(modalPageRef.current).not.toHaveFocus();
+
+      component.rerender(
+        <ModalRoot activeModal="modal-page-with-input" noFocusToDialog>
+          {modals}
+        </ModalRoot>,
+      );
+      runAllTimers();
+
+      expect(modalPageWithInputRef.current).not.toHaveFocus();
+      expect(inputInnerModalPageRef.current).toHaveFocus();
+    });
+  });
 });
diff --git a/packages/vkui/src/components/ModalRoot/ModalRoot.tsx b/packages/vkui/src/components/ModalRoot/ModalRoot.tsx
index 219e0a9956c..6a9f656c578 100644
--- a/packages/vkui/src/components/ModalRoot/ModalRoot.tsx
+++ b/packages/vkui/src/components/ModalRoot/ModalRoot.tsx
@@ -107,14 +107,15 @@ class ModalRootTouchComponent extends React.Component<
 
     // transition phase 3: animate entering modal
     if (this.props.enteringModal && this.props.enteringModal !== prevProps.enteringModal) {
-      const { enteringModal } = this.props;
-      const enteringState = this.props.getModalState(enteringModal);
+      const enteringState = this.props.getModalState(this.props.enteringModal);
       this.props.onEnter();
       this.waitTransitionFinish(enteringState, () => {
-        if (enteringState?.innerElement) {
-          enteringState.innerElement.style.transitionDelay = '';
+        if (enteringState) {
+          if (enteringState.innerElement) {
+            enteringState.innerElement.style.transitionDelay = '';
+          }
+          this.onEntered(enteringState);
         }
-        this.props.onEntered(enteringModal);
       });
 
       if (enteringState?.innerElement) {
@@ -219,6 +220,18 @@ class ModalRootTouchComponent extends React.Component<
     }
   };
 
+  onEntered({ id, modalElement }: ModalsStateEntry) {
+    if (
+      !this.props.noFocusToDialog &&
+      modalElement &&
+      !modalElement.contains(this.document.activeElement)
+    ) {
+      modalElement.focus();
+    }
+
+    this.props.onEntered(id);
+  }
+
   closeModal(id: string) {
     // Сбрасываем состояния, которые могут помешать закрытию модального окна
     this.setState({ touchDown: false });
@@ -598,12 +611,6 @@ class ModalRootTouchComponent extends React.Component<
                 return (
                   <FocusTrap
                     key={key}
-                    getRootRef={(e) => {
-                      const modalState = this.props.getModalState(modalId);
-                      if (modalState) {
-                        modalState.modalElement = e;
-                      }
-                    }}
                     onClose={this.props.onExit}
                     timeout={this.timeout}
                     className={classNames(
diff --git a/packages/vkui/src/components/ModalRoot/ModalRootDesktop.tsx b/packages/vkui/src/components/ModalRoot/ModalRootDesktop.tsx
index 261bb1f6d81..101a5cf2289 100644
--- a/packages/vkui/src/components/ModalRoot/ModalRootDesktop.tsx
+++ b/packages/vkui/src/components/ModalRoot/ModalRootDesktop.tsx
@@ -20,6 +20,7 @@ const warn = warnOnce('ModalRoot');
 export const ModalRootDesktop = ({
   activeModal: activeModalProp,
   children,
+  noFocusToDialog = false,
   onOpen,
   onOpened,
   onClose,
@@ -38,7 +39,7 @@ export const ModalRootDesktop = ({
     getModalState,
     enteringModal,
     onEnter,
-    onEntered,
+    onEntered: onEnteredProp,
     onExited,
     history,
     delayEnter,
@@ -91,6 +92,14 @@ export const ModalRootDesktop = ({
     });
   };
 
+  const onEntered = ({ id, modalElement }: ModalsStateEntry) => {
+    if (!noFocusToDialog && modalElement && !modalElement.contains(document!.activeElement)) {
+      modalElement.focus();
+    }
+
+    onEnteredProp(id);
+  };
+
   const openModal = () => {
     if (!enteringModal || !prevProps) {
       return;
@@ -102,16 +111,10 @@ export const ModalRootDesktop = ({
     // Анимация открытия модального окна
     if (!prevProps.exitingModal) {
       requestAnimationFrame(() => {
-        if (enteringModal === enteringModal) {
-          waitTransitionFinish(
-            enteringState?.innerElement,
-            () => onEntered(enteringModal),
-            timeout,
-          );
+        if (enteringModal === enteringModal && enteringState) {
+          waitTransitionFinish(enteringState.innerElement, () => onEntered(enteringState), timeout);
           animateModalOpacity(enteringState, true);
-          if (enteringState) {
-            setMaskOpacity(enteringState, 1);
-          }
+          setMaskOpacity(enteringState, 1);
         }
       });
 
@@ -127,7 +130,9 @@ export const ModalRootDesktop = ({
       }
     });
 
-    onEntered(enteringModal);
+    if (enteringState) {
+      onEntered(enteringState);
+    }
   };
 
   const closeModal = (id: string) => {
diff --git a/packages/vkui/src/components/ModalRoot/types.ts b/packages/vkui/src/components/ModalRoot/types.ts
index adf9c9d8555..2f439624d15 100644
--- a/packages/vkui/src/components/ModalRoot/types.ts
+++ b/packages/vkui/src/components/ModalRoot/types.ts
@@ -94,6 +94,11 @@ export interface ModalRootProps {
    * Будет вызвано при окончательном закрытии активной модалки с её id
    */
   onClosed?(modalId: string): void;
+
+  /**
+   * Отключает фокус на контейнер диалогового окна при открытии.
+   */
+  noFocusToDialog?: boolean;
 }
 
 export interface ModalRootWithDOMProps extends HasPlatform, ModalRootProps, DOMContextInterface {