Adds sub menu keyboard up/down navigation (only one level deep) using Alpine.js

wordpress-add-keyboard-navigation-to-sub-menus.js

Array.from(document.querySelectorAll('.menu-item-has-children')).forEach(menu => {
    menu.setAttribute(
        'x-data',
        `{
            usedKeyboard: false,
            list: [],
            start() {
                this.list = this.$el.querySelectorAll("li")
            }
        }`
    )
    menu.setAttribute('x-init', 'start()')
    menu.setAttribute(
        'x-on:keydown.arrow-down.prevent',
        `
            usedKeyboard = true
            let item = list[Array.prototype.indexOf.call(list, document.activeElement.closest('li')) + 1]
            if (item) { item.querySelector('a').focus() } else { list[0].querySelector('a').focus() }
        `
    )
    menu.setAttribute(
        'x-on:keydown.arrow-up.prevent',
        `
            usedKeyboard = true
            let item = list[Array.prototype.indexOf.call(list, document.activeElement.closest('li')) - 1]
            if (item) { item.querySelector('a').focus() } else { list[list.length - 1].querySelector('a').focus() }
        `
    )
})