I’m trying to get a reverse tabbing option to work, based on this tutorial https://www.a11ywithlindsey.com/blog/create-accessible-dropdown-navigation
I have a CodePen with her code here https://codepen.io/johneemac/pen/mdZVrwM
<code>const topLevelLinks = document.querySelectorAll('.menu__link')
topLevelLinks.forEach(link => {
link.addEventListener('focus', function() {
this.parentElement.classList.add('focus')
})
if (link.nextElementSibling) {
const subMenu = link.nextElementSibling
const subMenuLinks = subMenu.querySelectorAll('a')
const lastLinkIndex = subMenuLinks.length - 1
const lastLink = subMenuLinks[lastLinkIndex]
lastLink.addEventListener('blur', function() {
link.parentElement.classList.remove('focus')
})
}
})
</code>
<code>const topLevelLinks = document.querySelectorAll('.menu__link')
topLevelLinks.forEach(link => {
link.addEventListener('focus', function() {
this.parentElement.classList.add('focus')
})
if (link.nextElementSibling) {
const subMenu = link.nextElementSibling
const subMenuLinks = subMenu.querySelectorAll('a')
const lastLinkIndex = subMenuLinks.length - 1
const lastLink = subMenuLinks[lastLinkIndex]
lastLink.addEventListener('blur', function() {
link.parentElement.classList.remove('focus')
})
}
})
</code>
const topLevelLinks = document.querySelectorAll('.menu__link')
topLevelLinks.forEach(link => {
link.addEventListener('focus', function() {
this.parentElement.classList.add('focus')
})
if (link.nextElementSibling) {
const subMenu = link.nextElementSibling
const subMenuLinks = subMenu.querySelectorAll('a')
const lastLinkIndex = subMenuLinks.length - 1
const lastLink = subMenuLinks[lastLinkIndex]
lastLink.addEventListener('blur', function() {
link.parentElement.classList.remove('focus')
})
}
})
Normal / Forward tabbing works fine but just cannot think how to get reverse tabbing to work and hide and select menus correctly. I have tried a few things but just cannot get the logic to work out.
Even if someone gives me some pseudo code and I’ll try and work it out.
Many thanks in advance.
2