fix

src/components/HeaderMenu.vue

@@ -46,92 +46,117 @@ const openMenu = ref(false)
 
 <template>
   <div class="menu-block">
-    <div @click="openMenu = !openMenu" class="burger-button">
+    <button
+      type="button"
+      class="burger-button"
+      :aria-expanded="openMenu"
+      :aria-label="openMenu ? 'Закрыть меню' : 'Открыть меню'"
+      @click="openMenu = !openMenu"
+    >
       <Icon class="burger-icon" size="28">
         <MenuOutlined />
       </Icon>
-    </div>
+    </button>
     <div
       class="left-group menu-buttons-block"
       :class="!openMenu ? 'menu-buttons-block-active' : ''"
     >
-      <div
+      <button
+        type="button"
         class="menu-item-block"
         :class="{ active: props.active == 'main' }"
         @click="router.push('/')"
       >
         Главная
-      </div>
-      <div
+      </button>
+      <button
+        type="button"
         class="menu-item-block"
         :class="{ active: props.active == 'office' }"
         v-if="authStore.hasRole('user')"
         @click="router.push('/office')"
       >
         Кабинет
-      </div>
-      <div
+      </button>
+      <button
+        type="button"
         class="menu-item-block"
         :class="{ active: props.active == 'games' }"
         v-if="hasPermission('games_page')"
         @click="router.push('/games')"
       >
         Игры
-      </div>
-      <div
+      </button>
+      <button
+        type="button"
         class="menu-item-block"
         v-if="hasPermission('games_page')"
         @click="router.push('/tickets/check')"
       >
         Проверка билетов
-      </div>
-      <div
+      </button>
+      <button
+        type="button"
         class="menu-item-block"
         v-if="hasPermission('games_page')"
         @click="router.push('/screen')"
       >
         Экран
-      </div>
-      <div
+      </button>
+      <button
+        type="button"
         class="menu-item-block"
         :class="{ active: props.active == 'catalog' }"
         @click="router.push('/catalog')"
       >
         Каталог
-      </div>
-      <div
+      </button>
+      <button
+        type="button"
         class="menu-item-block"
         :class="{ active: props.active == 'scenarios' }"
         v-if="hasPermission('scenarios_page')"
         @click="router.push('/scenarios')"
       >
         Мои сценарии
-      </div>
-      <div
+      </button>
+      <button
+        type="button"
         class="menu-item-block"
         :class="{ active: props.active == 'users' }"
         v-if="hasPermission('users_page')"
         @click="router.push('/users')"
       >
         Пользователи
-      </div>
-      <div
+      </button>
+      <button
+        type="button"
         class="menu-item-block"
         :class="{ active: props.active == 'reviews' }"
         v-if="hasPermission('reviews_page')"
         @click="router.push('/reviews')"
       >
         Отзывы
-      </div>
+      </button>
     </div>
 
     <div class="right-group">
-      <div v-if="!authStore.isAuthenticated" class="menu-item-block right" @click="goToLogin">
+      <button
+        v-if="!authStore.isAuthenticated"
+        type="button"
+        class="menu-item-block right"
+        @click="goToLogin"
+      >
         Войти
-      </div>
-      <div v-if="authStore.isAuthenticated" class="menu-item-block right" @click="goToLogout">
+      </button>
+      <button
+        v-if="authStore.isAuthenticated"
+        type="button"
+        class="menu-item-block right"
+        @click="goToLogout"
+      >
         Выйти
-      </div>
+      </button>
     </div>
   </div>
 </template>
@@ -151,8 +176,12 @@ const openMenu = ref(false)
 }
 
 .menu-item-block {
+  background: transparent;
+  border: 0;
+  color: inherit;
   cursor: pointer;
   display: inline-block;
+  font-family: inherit;
   font-size: 1.1em;
   margin-left: 10px;
   padding: 5px;
@@ -171,6 +200,14 @@ const openMenu = ref(false)
   color: #63e2b7;
 }
 
+.burger-button {
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  padding: 0;
+}
+
 @media (width >=1024px) {
   .burger-button {
     display: none;
@@ -189,7 +226,7 @@ const openMenu = ref(false)
     width: 100%;
   }
 
-  .menu-buttons-block div {
+  .menu-buttons-block button {
     padding: 15px 5px;
   }