From 1b610aaec425a50533c8e1869f2ba6264fe092e7 Mon Sep 17 00:00:00 2001
From: vitya-ne <9317613+vitya-ne@users.noreply.github.com>
Date: Mon, 29 Jul 2024 10:39:10 +0300
Subject: [PATCH 1/4] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D0=BA=D0=BE=D0=B4=20=D0=B8=D0=B7=20=D0=BE?=
 =?UTF-8?q?=D0=BF=D0=B8=D1=81=D0=B0=D0=BD=D0=B8=D1=8F=20=D1=80=D0=B5=D1=86?=
 =?UTF-8?q?=D0=B5=D0=BF=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 recipes/dropdown-menu/index.md | 38 ++++++++++++++--------------------
 1 file changed, 15 insertions(+), 23 deletions(-)

diff --git a/recipes/dropdown-menu/index.md b/recipes/dropdown-menu/index.md
index 7af5b1c361..10c782c378 100644
--- a/recipes/dropdown-menu/index.md
+++ b/recipes/dropdown-menu/index.md
@@ -33,16 +33,12 @@ tags:
     >
       <ul class="menu">
         <li class="menu__item" data-has-children>
-          <button
-            class="menu__btn"
-            aria-expanded="false"
-            aria-controls="doka-submenu"
-          >
+          <span data-controls="doka-submenu">
             Дока
-          </button>
+          </span>
 
           <!-- Первый уровень вложенности -->
-          <ul class="menu" id="doka-submenu" hidden>
+          <ul class="menu menu-submenu" id="doka-submenu" hidden>
             <li class="menu__item">
               <a
                 href="#"
@@ -54,16 +50,12 @@ tags:
             <li>
 
             <li class="menu__item">
-              <button
-                class="menu__btn"
-                aria-expanded="false"
-                aria-controls="html-submenu"
-              >
+              <span data-controls="html-submenu">
                 HTML
-              </button>
+              </span>
 
               <!-- Второй уровень вложенности -->
-              <ul class="menu" id="html-submenu" hidden>
+              <ul class="menu menu-submenu" id="html-submenu" hidden>
                 <li class="menu__item">
                   <a href="#" class="menu__link">
                     Основы
@@ -83,16 +75,12 @@ tags:
             </li>
 
             <li class="menu__item">
-              <button
-                class="menu__btn"
-                aria-expanded="false"
-                aria-controls="css-submenu"
-              >
+              <span data-controls="css-submenu">
                 CSS
-              </button>
+              </span>
 
               <!-- Второй уровень вложенности -->
-              <ul class="menu" id="css-submenu" hidden>
+              <ul class="menu menu-submenu" id="css-submenu" hidden>
                 <li class="menu__item">
                   <a href="#" class="menu__link">
                     Основы
@@ -264,16 +252,20 @@ a[aria-current="page"] {
   top: 0;
   left: 104%;
 }
+
+.menu[hidden] {
+  display: none;
+}
 ```
 
 ```js
 const nav = document.querySelector('.site-nav')
 nav.classList.add('enhanced')
 
-const submenus = document.querySelectorAll(
+const submenus = nav.querySelectorAll(
   '.menu__item[data-has-children]'
 )
-const dropdowns = document.querySelectorAll(
+const dropdowns = nav.querySelectorAll(
   '.menu__item[data-has-children] > .menu'
 )
 

From 46fa14a5c5c2aab5d5a0380215a4b2cc27ceb41a Mon Sep 17 00:00:00 2001
From: vitya-ne <9317613+vitya-ne@users.noreply.github.com>
Date: Wed, 31 Jul 2024 10:06:11 +0300
Subject: [PATCH 2/4] =?UTF-8?q?=D0=A3=D0=BF=D1=80=D0=BE=D1=89=D0=B0=D0=B5?=
 =?UTF-8?q?=D1=82=20=D1=81=D0=BA=D1=80=D0=B8=D0=BF=D1=82,=20=D1=81=D0=BE?=
 =?UTF-8?q?=D0=B3=D0=BB=D0=B0=D1=81=D1=83=D0=B5=D1=82=20=D0=BA=D0=BE=D0=B4?=
 =?UTF-8?q?=20=D0=B4=D0=B5=D0=BC=D0=BE=20=D0=B8=20=D0=BE=D0=BF=D0=B8=D1=81?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 recipes/dropdown-menu/demos/menu/index.html | 44 +++++++-------
 recipes/dropdown-menu/index.md              | 63 ++++++++++++---------
 2 files changed, 61 insertions(+), 46 deletions(-)

diff --git a/recipes/dropdown-menu/demos/menu/index.html b/recipes/dropdown-menu/demos/menu/index.html
index 15575579a7..4cdf2155a4 100644
--- a/recipes/dropdown-menu/demos/menu/index.html
+++ b/recipes/dropdown-menu/demos/menu/index.html
@@ -236,14 +236,26 @@
     <nav class="site-nav" aria-label="Сайт">
       <ul class="menu">
         <li class="menu__item" data-has-children>
-          <span data-controls="doka-submenu">Дока</span>
+          <button
+            class="menu__btn"
+            aria-expanded="false"
+            aria-controls="doka-submenu"
+          >
+            Дока
+          </button>
 
           <ul class="menu menu-submenu" id="doka-submenu">
             <li class="menu__item">
               <a href="#" class="menu__link" aria-current="page">Рецепты</a>
             </li>
             <li class="menu__item" data-has-children>
-              <span data-controls="html-submenu">HTML</span>
+              <button
+                class="menu__btn"
+                aria-expanded="false"
+                aria-controls="html-submenu"
+              >
+                HTML
+              </button>
 
               <ul class="menu menu-submenu" id="html-submenu">
                 <li class="menu__item">
@@ -258,7 +270,13 @@
               </ul>
             </li>
             <li class="menu__item" data-has-children>
-              <span data-controls="css-submenu">CSS</span>
+              <button
+                class="menu__btn"
+                aria-expanded="false"
+                aria-controls="css-submenu"
+              >
+                CSS
+              </button>
 
               <ul class="menu menu-submenu" id="css-submenu">
                 <li class="menu__item">
@@ -302,13 +320,12 @@ <h1>Рецепты</h1>
   <script>
     // Следуем принципам прогрессивного улучшения.
     // Показываем пользователю простую навигацию в случае, если не удаётся загрузить JavaScript.
-    // Если JavaScript-файл загружен, заменяем span на кнопки и вешаем дополнительные ARIA-атрибуты.
 
     const nav = document.querySelector('.site-nav')
     nav.classList.add('enhanced')
 
-    const submenus = document.querySelectorAll('.menu__item[data-has-children]')
-    const dropdowns = document.querySelectorAll('.menu__item[data-has-children] > .menu')
+    const submenus = nav.querySelectorAll('.menu__item[data-has-children]')
+    const dropdowns = nav.querySelectorAll('.menu__item[data-has-children] > .menu')
 
     const icon = `
       <svg
@@ -327,24 +344,11 @@ <h1>Рецепты</h1>
       const dropdown = item.querySelector(':scope > .menu')
       dropdown.setAttribute('hidden', '')
 
-      const span = item.querySelector(':scope > span')
-      const text = span.innerText
-      const ariaControlsId = span.dataset.controls
-
-      const button = document.createElement('button')
-
-      // Добавляем класс и необходимые ARIA-атрибуты
-      button.classList.add('menu__btn')
-      button.setAttribute('aria-expanded', 'false')
-      button.setAttribute('aria-controls', ariaControlsId)
-
-      button.innerText = text
+      const button = item.querySelector(':scope > .menu__btn')
 
       // Добавляем иконку к кнопке, чтобы визуально было понятно открыто меню или нет
       button.innerHTML += icon
 
-      span.replaceWith(button)
-
       button.addEventListener('click', function (e) {
         toggleDropdown(button, dropdown)
       })
diff --git a/recipes/dropdown-menu/index.md b/recipes/dropdown-menu/index.md
index 10c782c378..53e82e0b71 100644
--- a/recipes/dropdown-menu/index.md
+++ b/recipes/dropdown-menu/index.md
@@ -28,17 +28,21 @@ tags:
 <body>
   <header class="header">
     <nav
-      class="site-nav enhanced"
+      class="site-nav"
       aria-label="Сайт"
     >
       <ul class="menu">
         <li class="menu__item" data-has-children>
-          <span data-controls="doka-submenu">
+          <button
+            class="menu__btn"
+            aria-expanded="false"
+            aria-controls="doka-submenu"
+          >
             Дока
-          </span>
+          </button>
 
           <!-- Первый уровень вложенности -->
-          <ul class="menu menu-submenu" id="doka-submenu" hidden>
+          <ul class="menu menu-submenu" id="doka-submenu">
             <li class="menu__item">
               <a
                 href="#"
@@ -49,13 +53,17 @@ tags:
               </a>
             <li>
 
-            <li class="menu__item">
-              <span data-controls="html-submenu">
+            <li class="menu__item" data-has-children>
+              <button
+                class="menu__btn"
+                aria-expanded="false"
+                aria-controls="html-submenu"
+              >
                 HTML
-              </span>
+              </button>
 
               <!-- Второй уровень вложенности -->
-              <ul class="menu menu-submenu" id="html-submenu" hidden>
+              <ul class="menu menu-submenu" id="html-submenu">
                 <li class="menu__item">
                   <a href="#" class="menu__link">
                     Основы
@@ -74,13 +82,17 @@ tags:
               </ul>
             </li>
 
-            <li class="menu__item">
-              <span data-controls="css-submenu">
+            <li class="menu__item" data-has-children>
+              <button
+                class="menu__btn"
+                aria-expanded="false"
+                aria-controls="css-submenu"
+              >
                 CSS
-              </span>
+              </button>
 
               <!-- Второй уровень вложенности -->
-              <ul class="menu menu-submenu" id="css-submenu" hidden>
+              <ul class="menu menu-submenu" id="css-submenu">
                 <li class="menu__item">
                   <a href="#" class="menu__link">
                     Основы
@@ -269,29 +281,28 @@ const dropdowns = nav.querySelectorAll(
   '.menu__item[data-has-children] > .menu'
 )
 
-const icon = '<svg>...</svg>'
+const icon = `
+  <svg
+    width="24px"
+    height="24px"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+    class="menu__btn-icon"
+  >
+  <path fill="currentColor" d="M5.64645 8.64645c.19526-.19527.51184-.19527.7071 0L12 14.2929l5.6464-5.64645c.1953-.19527.5119-.19527.7072 0 .1952.19526.1952.51184 0 .7071L12 15.7071 5.64645 9.35355c-.19527-.19526-.19527-.51184 0-.7071Z"></path>
+  </svg>
+`
 
 // Находим подменю, заменяем в нём span на кнопку
 submenus.forEach((item) => {
   const dropdown = item.querySelector(':scope > .menu')
   dropdown.setAttribute('hidden', '')
 
-  const span = item.querySelector(':scope > span')
-  const text = span.innerText
-  const ariaControlsId = span.dataset.controls
-  const button = document.createElement('button')
-
-  // Добавляем класс и необходимые aria-атрибуты
-  button.classList.add('menu__btn')
-  button.setAttribute('aria-expanded', 'false')
-  button.setAttribute('aria-controls', ariaControlsId)
-
-  button.innerText = text
+  const button = item.querySelector(':scope > .menu__btn')
 
   // Добавляем иконку к кнопке, чтобы визуально было
   // понятно открыто меню или нет
   button.innerHTML += icon
-  span.replaceWith(button)
 
   button.addEventListener('click', function (e) {
     toggleDropdown(button, dropdown)
@@ -392,7 +403,7 @@ window.addEventListener('click', collapseDropdownsWhenClickingOutsideNav)
 ```html
 <nav class="site-nav" aria-label="Сайт">
   <ul class="menu">
-    <li class="menu__item">
+    <li class="menu__item" data-has-children>
       <button
         class="menu__btn"
         aria-expanded="false"

From 37a0e2171239cb3cf5b9250256677a3e89615ce2 Mon Sep 17 00:00:00 2001
From: vitya-ne <9317613+vitya-ne@users.noreply.github.com>
Date: Thu, 1 Aug 2024 18:43:20 +0300
Subject: [PATCH 3/4] =?UTF-8?q?=D0=A3=D0=B1=D0=B8=D1=80=D0=B0=D0=B5=D1=82?=
 =?UTF-8?q?=20=D0=B0=D0=B1=D0=B7=D0=B0=D1=86=20=D0=BF=D1=80=D0=BE=20=D0=BC?=
 =?UTF-8?q?=D0=BE=D0=B1=D0=B8=D0=BB=D1=8C=D0=BD=D1=83=D1=8E=20=D0=B2=D0=B5?=
 =?UTF-8?q?=D1=80=D1=81=D0=B8=D1=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 recipes/dropdown-menu/index.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/recipes/dropdown-menu/index.md b/recipes/dropdown-menu/index.md
index 53e82e0b71..ee31a9e7a5 100644
--- a/recipes/dropdown-menu/index.md
+++ b/recipes/dropdown-menu/index.md
@@ -493,5 +493,3 @@ function toggleDropdown(button, dropdown) {
 ```
 
 Также при создании многоуровневых меню можно часто встретить вариант, когда элементы меню появляются при наведении на них курсора мыши, — по событию `hover`. В таком случае базовая вёрстка останется аналогичной примеру, только нужно будет доработать стили появления — скрывать вложенное меню по умолчанию свойством `display: none` и показывать при наведении мыши.
-
-В мобильной версии меню выглядит как аккордеон. Часто мобильное меню прячут за иконкой с тремя линиями или точками (бургер) или чем-то подобным. При такой реализации помните о доступности и скрывайте меню полностью, чтобы пользователи не могли сделать на нём фокус с помощью клавиши <kbd>Tab</kbd>. Для этого можно использовать свойство [`display: none`](/css/display/#kak-pishetsya) или HTML-атрибут [`hidden`](/html/hidden/). Данные методы прячут меню из [дерева доступности](/a11y/a11y-tree/), но не дают анимировать открытие и закрытие меню.

From 10487cd852f29ba56d25de98ae9994c4bb1d8fc0 Mon Sep 17 00:00:00 2001
From: vitya-ne <9317613+vitya-ne@users.noreply.github.com>
Date: Wed, 7 Aug 2024 12:11:03 +0300
Subject: [PATCH 4/4] =?UTF-8?q?=D0=9F=D0=BE=D0=BF=D0=BE=D0=BB=D0=BD=D1=8F?=
 =?UTF-8?q?=D0=B5=D1=82=20=D1=81=D0=BF=D0=B8=D1=81=D0=BE=D0=BA=20=D0=BA?=
 =?UTF-8?q?=D0=BE=D1=82=D1=80=D0=B8=D0=B1=D1=8C=D1=8E=D1=82=D0=B5=D1=80?=
 =?UTF-8?q?=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 recipes/dropdown-menu/index.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/recipes/dropdown-menu/index.md b/recipes/dropdown-menu/index.md
index ee31a9e7a5..2331b3bfd1 100644
--- a/recipes/dropdown-menu/index.md
+++ b/recipes/dropdown-menu/index.md
@@ -6,6 +6,7 @@ authors:
 contributors:
   - skorobaeus
   - tatianafokina
+  - vitya-ne
 related:
   - html/nav
   - html/ul