메뉴 버튼

button  aria-haspopup="menu"  aria-expanded="true"  aria-controls="m1"   ← 여는 버튼
ul#m1[role=menu]  aria-labelledby="버튼 id"                              ← 명령 목록
 ├─ li[role=menuitem]  tabindex="-1"   잘라내기
 ├─ li[role=menuitem]  tabindex="-1"   복사
 ├─ li[role=menuitem]  tabindex="-1"  aria-disabled="true"   되돌리기
 └─ li[role=menuitem]  tabindex="-1"   삭제

<button type="button" id="edit-btn"
        aria-haspopup="menu" aria-expanded="false" aria-controls="edit-menu">
  편집 <span aria-hidden="true">▾</span>
</button>
<ul role="menu" id="edit-menu" aria-labelledby="edit-btn" hidden>
  <li role="menuitem" tabindex="-1">잘라내기</li>
  <li role="menuitem" tabindex="-1">복사</li>
  <li role="menuitem" tabindex="-1">붙여넣기</li>
  <li role="menuitem" tabindex="-1" aria-disabled="true">되돌리기</li>
  <li role="menuitem" tabindex="-1">삭제</li>
</ul>

<script>
  initMenuButton(
    document.getElementById('edit-btn'),
    document.getElementById('edit-menu'),
    function (item) { /* item.textContent에 맞는 명령 실행 */ }
  );
</script>

// 메뉴 버튼: 버튼 + role="menu" (명령 목록)
function initMenuButton(button, menu, onSelect) {
  var items = Array.prototype.slice.call(menu.querySelectorAll('[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]'));

  function isOpen() { return button.getAttribute('aria-expanded') === 'true'; }
  function focusItem(i) { items[(i + items.length) % items.length].focus(); }
  function open(where) {
    menu.hidden = false;
    button.setAttribute('aria-expanded', 'true');
    focusItem(where === 'last' ? items.length - 1 : 0);
  }
  function close(returnFocus) {
    menu.hidden = true;
    button.setAttribute('aria-expanded', 'false');
    if (returnFocus) button.focus();
  }
  function activate(item) {
    if (item.getAttribute('aria-disabled') === 'true') return;   // 비활성 항목은 실행하지 않음
    close(true);
    if (onSelect) onSelect(item);
  }

  // 마우스 클릭, Enter, Space: 열고 첫 항목으로 (열려 있으면 닫기)
  button.addEventListener('click', function () {
    if (isOpen()) close(true); else open('first');
  });
  button.addEventListener('keydown', function (e) {
    if (e.key === 'ArrowDown') { e.preventDefault(); open('first'); }
    else if (e.key === 'ArrowUp') { e.preventDefault(); open('last'); }
  });

  menu.addEventListener('keydown', function (e) {
    var i = items.indexOf(document.activeElement);
    if (e.key === 'ArrowDown') { e.preventDefault(); focusItem(i + 1); }
    else if (e.key === 'ArrowUp') { e.preventDefault(); focusItem(i - 1); }
    else if (e.key === 'Home') { e.preventDefault(); focusItem(0); }
    else if (e.key === 'End') { e.preventDefault(); focusItem(items.length - 1); }
    else if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); close(true); }
    else if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (i > -1) activate(items[i]); }
    else if (e.key === 'Tab') {
      if (e.shiftKey) { e.preventDefault(); close(true); }       // 버튼으로
      else { button.focus(); close(false); }                     // 기본 Tab 동작으로 버튼 다음 요소로
    } else if (e.key.length === 1 && !e.ctrlKey && !e.altKey && !e.metaKey) {
      // (선택) 문자 탐색: 그 글자로 시작하는 다음 항목으로
      var ch = e.key.toLowerCase();
      for (var n = 1; n <= items.length; n++) {
        var cand = items[(i + n) % items.length];
        if (cand.textContent.trim().toLowerCase().charAt(0) === ch) { cand.focus(); break; }
      }
    }
  });

  menu.addEventListener('click', function (e) {
    var item = e.target.closest('[role^="menuitem"]');
    if (item) activate(item);
  });

  // 바깥을 누르면 닫기
  document.addEventListener('mousedown', function (e) {
    if (isOpen() && !menu.contains(e.target) && !button.contains(e.target)) close(false);
  });
}

<nav aria-label="주 메뉴">
  <ul>
    <li>
      <button type="button" aria-expanded="false" aria-controls="sub-help">고객센터</button>
      <ul id="sub-help" hidden>
        <li><a href="/notice">공지사항</a></li>
        <li><a href="/faq" aria-current="page">자주 묻는 질문</a></li>
        <li><a href="/inquiry">1:1 문의</a></li>
      </ul>
    </li>
  </ul>
</nav>

// 내비게이션 드롭다운은 메뉴가 아니라 디스클로저로 만듭니다.
function initDisclosureNav(nav) {
  var buttons = Array.prototype.slice.call(nav.querySelectorAll('button[aria-expanded]'));
  function set(btn, open) {
    btn.setAttribute('aria-expanded', String(open));
    document.getElementById(btn.getAttribute('aria-controls')).hidden = !open;
  }
  buttons.forEach(function (btn) {
    btn.addEventListener('click', function () {
      var open = btn.getAttribute('aria-expanded') !== 'true';
      buttons.forEach(function (b) { if (b !== btn) set(b, false); });   // 하나만 열기
      set(btn, open);
    });
  });
  // Esc: 열린 목록을 닫고 그 버튼으로
  nav.addEventListener('keydown', function (e) {
    if (e.key !== 'Escape') return;
    buttons.forEach(function (b) {
      if (b.getAttribute('aria-expanded') === 'true') { set(b, false); b.focus(); }
    });
  });
  // 포커스가 내비게이션을 벗어나면 닫기
  nav.addEventListener('focusout', function (e) {
    if (!nav.contains(e.relatedTarget)) buttons.forEach(function (b) { set(b, false); });
  });
}