fix modal body block, add locales for modal close button

VanyaMate · Apr 4, 2024 · c7face6 · c7face6
1 parent 4066636
commit c7face6
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -10,5 +10,6 @@
     "toggle_theme_image_alt_button": "Theme image",
     "not_found_title": "Not found",
     "not_found_description": "The resource you requested has been deleted or moved to another location",
-    "error_boundary_title": "Something went wrong"
+    "error_boundary_title": "Something went wrong",
+    "close_modal_window_button": "Close modal window"
 }
diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json
@@ -10,5 +10,6 @@
     "toggle_theme_image_alt_button": "Картинка темы",
     "not_found_title": "Не найдено",
     "not_found_description": "Запрашиваемый вами ресурс удален или перенесен в другое место",
-    "error_boundary_title": "Что-то пошло не так"
+    "error_boundary_title": "Что-то пошло не так",
+    "close_modal_window_button": "Закрыть модальное окно"
 }
diff --git a/src/components/shared/ui/modal/Modal/Modal.tsx b/src/components/shared/ui/modal/Modal/Modal.tsx
@@ -9,6 +9,7 @@ import {
     useModalInnerManager,
 } from '@/components/shared/ui/modal/Modal/hooks/useModalInnerManager.ts';
 import Button from '@/components/shared/ui/buttons/Button/Button.tsx';
+import { useTranslation } from 'react-i18next';
 
 
 export type ModalProps =
@@ -19,6 +20,7 @@ export type ModalProps =
 
 const Modal: React.FC<ModalProps> = (props) => {
     const { className, controller, ...other } = props;
+    const { t }                               = useTranslation();
     const { placeRef, modalRef }              = useModalInnerManager(controller.opened);
 
     return (
@@ -30,7 +32,7 @@ const Modal: React.FC<ModalProps> = (props) => {
                         className={ classNames(css.container, { [css.hidden]: !controller.opened }, []) }
                         ref={ modalRef }
                     >
-                        <Button aria-label="Закрыть модальное окно"
+                        <Button aria-label={ t('close_modal_window_button') }
                                 className={ css.closeButton }
                                 onClick={ () => controller.setOpened(false) }
                         >X</Button>

diff --git a/src/components/shared/ui/modal/Modal/hooks/useModalInnerManager.ts b/src/components/shared/ui/modal/Modal/hooks/useModalInnerManager.ts
@@ -52,7 +52,7 @@ export const useModalInnerManager = function (opened: boolean) {
         }
 
         // Unblock body scroll
-        document.body.classList.add('block-scroll');
+        document.body.classList.remove('block-scroll');
 
         // Set focus on previousFocus
         previousFocus.current?.focus();