import { useEffect } from "react"
export function FixWhyUsMenu() {
useEffect(() => {
const menuItem = document.querySelector('a[href="/why-us"]')
const submenu = document.querySelector('[data-submenu="why-us"]')
if (!menuItem || !submenu) return
const submenuLinks = submenu.querySelectorAll("a")
// ✅ Accessibility attributes
menuItem.setAttribute("aria-haspopup", "true")
menuItem.setAttribute("aria-expanded", "false")
submenuLinks.forEach(link => {
link.setAttribute("tabindex", "-1")
})
// ✅ When tab focuses "Why Us"
menuItem.addEventListener("focus", () => {
submenu.style.display = "block"
menuItem.setAttribute("aria-expanded", "true")
// Allow submenu items in tab order
submenuLinks.forEach(link => {
link.setAttribute("tabindex", "0")
})
})
// ✅ Move focus into submenu with Tab
menuItem.addEventListener("keydown", (e) => {
if (e.key === "Tab" && !e.shiftKey) {
if (submenuLinks.length > 0) {
e.preventDefault()
submenuLinks[0].focus()
}
}
})
// ✅ Close when leaving submenu
submenu.addEventListener("focusout", () => {
setTimeout(() => {
if (!submenu.contains(document.activeElement)) {
submenu.style.display = "none"
menuItem.setAttribute("aria-expanded", "false")
submenuLinks.forEach(link => {
link.setAttribute("tabindex", "-1")
})
}
}, 100)
})
}, [])
return {}
}
Join
hundreds
of
NRIs
already
simplifying
their
Indian
investments.
Start
today
with
zero
hassle.