<button id="lang-menu-open">Open</button>
<ul class="lang-menu visually-hidden">
  <li><a href="/english">English</a></li>
  <li><a href="/spanish">Español</a></li>
  <li><a href="/french">Français</a></li>
  <li><a href="/arabic">عربى</a></li>
  <li><a href="/portuguese">Português</a></li>
</ul>
.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}
const langButton = document.getElementById('lang-menu-open')

const langMenu = document.querySelector('.lang-menu')
const langMenuLinks = langMenu.querySelectorAll('a')

const setTabIndex = (links, value) => {
  links.forEach(link => link.tabIndex = value)
} 

setTabIndex(langMenuLinks, -1)

langButton.addEventListener('click', () => {
  langMenu.classList.toggle('visually-hidden')
 
  if(langMenu.classList.contains('visually-hidden')) {
    setTabIndex(langMenuLinks, -1)
  } else {
    setTabIndex(langMenuLinks, 0)
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.