{{#click-outside action=(action (mut isOpen) false)}}
  <button
    aria-label={{t (concat "general.language." locale.id)}}
    class="toggle"
    aria-haspopup="true"
    aria-expanded={{if isOpen "true" "false"}}
    data-level="toggle"
    data-test-toggle
    {{action "toggleMenu"}}
  >
    {{fa-icon "globe"}} <span>{{t (concat "general.language." locale.id)}}</span>
  </button>
  {{#if isOpen}}
    <div class="menu" role="menu">
      {{#each locales as |loc|}}
        <button
          role="menuitemradio"
          lang={{loc.id}}
          tabindex="-1"
          aria-checked={{if (eq locale.id loc.id) "true" "false"}}
          data-level="item"
          data-test-item
          {{action "changeLocale" loc.id}}
        >
          {{loc.text}}
        </button>
      {{/each}}
    </div>
  {{/if}}
{{/click-outside}}

{{#click-outside action=(action (mut isOpen) false)}}
  <button
    aria-label={{t (concat "general.language." locale.id)}}
    role="menuitem"
    class="toggle"
    aria-haspopup="true"
    aria-expanded={{if isOpen "true" "false"}}
    data-level="toggle"
    data-test-toggle
    {{action "toggleMenu"}}
  >
    {{fa-icon "globe"}} <span>{{t (concat "general.language." locale.id)}}</span>
  </button>
  {{#if isOpen}}
    <div class="menu" role="menu">
      {{#each locales as |loc|}}
        <button
          role="menuitemradio"
          lang={{loc.id}}
          tabindex="-1"
          aria-checked={{if (eq locale.id loc.id) "true" "false"}}
          data-level="item"
          data-test-item
          {{action "changeLocale" loc.id}}
        >
          {{loc.text}}
        </button>
      {{/each}}
    </div>
  {{/if}}
{{/click-outside}}

Add menuitem role to button
Add menuitem role to button

Our A11y checker flagged the local choose menubar because in its closed state it
doesn't contain any items. This is actually a menu with a submene, which
was mostly marked up correctly, just missing this one attribute to tell
screen readers that this button is an item in the menu.
