ADA compliance question for keyboard navigation

[clarabuchanan]

Hey there all,

When using a keyboard to navigate, I can tab to select the main Menu.Button in the top nav, then I hit enter to open that panel but by default Menu.Items container box is selected by default. This is stopping the user from being able to select any of the inner links (Menu.Item) with their keyboard then hit enter to navigate to those links. Is this a known issue that already has a fix coming up or is there anything we can do asap to correct this for our disabled customers?

[adamwathan]

Hey! Please follow the issue template when reporting an issue, which includes providing a reproduction. Without that we can’t do anything to help unfortunately.

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

Once the Menu is open, you should be able to use your keyboard to navigate to items within the Menu. Arrow keys will allow you to navigate up and down for example. All keyboard interactions are described here: https://headlessui.com/react/menu#keyboard-interaction

The Tab key allows you to go to the next focusable element and therefore closing the Menu on its own, instead of going through every single Menu.Item first. An example of that can be found here: https://headlessui-react-511pyixf5-tailwindlabs.vercel.app/menu/multiple-elements

This implementation is based on the ARIA Best Practices for a Menu Button https://www.w3.org/WAI/ARIA/apg/patterns/menu/

If you don't see this behaviour in your own application, then there might be an implementation problem. If this is the case then I would recommend to create a minimal reproduction repo so that we can take a look.

If this is not the behaviour you expect, then I would love to learn more about the issues you are currently having because currently with the previous shared example (https://headlessui-react-511pyixf5-tailwindlabs.vercel.app/menu/multiple-elements) I am able to open/close and navigate all menu's using the keyboard without any mouse interactions.

Hope this information helps!

[clarabuchanan]

Hey there both, the nav is currently live on https://ketochow.xyz. Once a top-level Nav.Button has been tabbed to and enter has been selected to open it, the focus lands on the Menu.Items container and arrow keys nor tabbing will allow someone to select the Menu.Items within. Is there something we should change about our implementation?

[adamwathan]

You'll have to share your implementation for us to be able to help, the rendered output doesn't tell us how it's actually been put together. If accessibility is important for your site btw you should make sure to add focus styles — right now the menu button looks the same whether it's focused or not focused.

My best guess is you aren't making your links the actual Menu.Item — it looks like you've got a div around each link and the div is what is being assigned the menuitem role. You'll want to make sure the links themselves are the menu items:

Menu.Item renders a fragment by default so you just need to make sure that the first child is an <a> tag or whatever your own <Link> component is.

[clarabuchanan]

Here is the code we have currently. Followed your direction above and it didn't allow the menu items to be tabbable. Please let me know if it's something else:

import React, { useState, Fragment, useEffect } from "react";
import { Menu, Transition, Dialog } from "@headlessui/react";
import NavChevronDown from "./SVGs/NavChevronDown";
import SearchIcon from "./SVGs/SearchIcon";
import ProfileIcon from "./SVGs/ProfileIcon";
import CartIcon from "./SVGs/CartIcon";
import MobileMenu from "./MobileMenu";

export default function Nav() {
	let nav, shopifyCartCount;
	
	let [reactCartCount, setReactCartCount] = useState(false);
	let [rccClass, setRccClass] = useState('hidden')
	
	const zChange = () => {
		nav.classList.add("z-10");
	};
	
	let [isOpenMobile, setIsOpenMoblie] = useState(false);
	
	const closeModalMobile = () => {
		setIsOpenMoblie(false);
		setTimeout(function() {
			zChange();
		}, 300);
	};
		
	const openModalMobile = () => {
		setIsOpenMoblie(true);
		nav.classList.remove("z-10");
	};
	
	let [isOpenDesktop, setIsOpenDesktop] = useState(false);
	
	const closeModalDesktop = () => {
		setIsOpenDesktop(false);
		setTimeout(function() {
			zChange();
		}, 300);
	};
	
	const openModalDesktop = () => {
		setIsOpenDesktop(true);
		if(typeof window !== "undefined") {
			var nav = document.getElementById("navigation");
			nav.classList.remove("z-10");
		}
	};
	
	const search = (e) => {
		e.preventDefault();
		let searchValue = e.target[1].value;
		
		if(searchValue && searchValue.trim().length > 0){
			searchValue = searchValue.trim().toLowerCase();
		}
		
		let url = "https://www.ketochow.xyz/search?type=product&q=" +searchValue;
		
		window.location.href = url;
	};

	if(typeof window !== "undefined") {

		function docReady(e) {
			"complete" === document.readyState || "interactive" === document.readyState ? setTimeout(e, 1) : document.addEventListener("DOMContentLoaded", e)
		}

		docReady(function() {
			nav = document.getElementById("navigation");
			nav.classList.remove("z-10");

			shopifyCartCount = window.document.getElementById('CartCount');
			if(shopifyCartCount) {
				// console.log('shopify cart count',typeof shopifyCartCount.innerText);
				setReactCartCount(shopifyCartCount.innerText);
				if(shopifyCartCount.innerText !== '0') {
					setRccClass('inline-block');
				}
			}
		});
	}

	return (
		<nav id="navigation" className="shadow-lg lg:sticky top-0 z-10 bg-white">
			<div className="grid grid-cols-3 px-5 py-3 lg:px-14 items-center lg:relative">
				<div className="col-span-1 flex items-center">
					<div className="mr-3 lg:hidden flex">
						<MobileMenu />
					</div>
					<div className="hidden lg:flex">
						<div className="mr-10">
							<Menu>
								<Menu.Button className="text-ketobody font-bold flex items-center hover:text-ketoblue-light aria-expanded:text-ketoblue-light">Shop<NavChevronDown /></Menu.Button>
								<Transition
									enter="transition duration-100 ease-out"
									enterFrom="opacity-0"
									enterTo="opacity-100"
									leave="transition duration-75 ease-out"
									leaveFrom="opacity-100"
									leaveTo="opacity-0"
								>
									<Menu.Items className="bg-white p-8 pb-4 rounded-sm absolute top-[62px] left-14 right-14 shadow-lg grid grid-cols-5 gap-5 xl:gap-8">
										<Menu.Item>
											<div className="col-span-1">
												<a className="border-b-2 pb-1 border-transparent hover:border-ketoblue-main block" href="https://www.ketochow.xyz/collections/keto-chow">
													<img src="https://cdn.shopify.com/s/files/1/0023/8721/4434/files/Keto-Chow-Collection.jpg?v=1664230276" alt="Bags of Keto Chow" loading="lazy" />
													<p className="uppercase font-semibold text-black">Keto Chow</p>
												</a>
											</div>
										</Menu.Item>
										<Menu.Item>
											<div className="col-span-1">
												<a className="border-b-2 pb-1 border-transparent hover:border-ketoblue-main block" href="https://www.ketochow.xyz/collections/deals-bundles">
													<img src="https://cdn.shopify.com/s/files/1/0023/8721/4434/files/kits.webp?v=1664230276" alt="Boxes and bags of Keto Chow" />
													<p className="uppercase font-semibold text-black">Starter Kits & Bundles</p>
												</a>
											</div>
										</Menu.Item>
										<Menu.Item>
											<div className="col-span-1">
												<a className="border-b-2 pb-1 border-transparent hover:border-ketoblue-main block" href="https://www.ketochow.xyz/collections/nutrients">
													<img src="https://cdn.shopify.com/s/files/1/0023/8721/4434/files/supplements.jpg?v=1664230276" alt="Keto Chow supplements bottles" />
													<p className="uppercase font-semibold text-black">Supplements</p>
												</a>
											</div>
										</Menu.Item>
										<Menu.Item>
											<div className="col-span-1">
												<a className="border-b-2 pb-1 border-transparent hover:border-ketoblue-main block" href="https://www.ketochow.xyz/pages/nb1-mychowkit">
													<img src="https://cdn.shopify.com/s/files/1/0023/8721/4434/files/myChow_40af3ba6-f216-434f-8b8b-0de2fd99ba48.jpg?v=1664230276" alt="Box of Keto Chow" />
													<p className="uppercase font-semibold text-black">Subscriptions</p>
												</a>
											</div>
										</Menu.Item>
										<Menu.Item>
											<div className="col-span-1">
												<a className="border-b-2 pb-1 border-transparent hover:border-ketoblue-main block" href="https://www.ketochow.xyz/collections/bottles-more">
													<img src="https://cdn.shopify.com/s/files/1/0023/8721/4434/files/bottles-more.webp?v=1664230276" alt="Recipe cards, shaker bottle, bag of dried egg white protein" />
													<p className="uppercase font-semibold text-black">Bottles & More</p>
												</a>
											</div>
										</Menu.Item>
									</Menu.Items>
								</Transition>
							</Menu>
						</div>
						<div className="mr-10">
							<Menu>
								<Menu.Button className="text-ketobody font-bold flex items-center hover:text-ketoblue-light aria-expanded:text-ketoblue-light">Learn<NavChevronDown /></Menu.Button>
								<Transition
									enter="transition duration-100 ease-out"
									enterFrom="opacity-0"
									enterTo="opacity-100"
									leave="transition duration-75 ease-out"
									leaveFrom="opacity-100"
									leaveTo="opacity-0"
								>
									<Menu.Items className="bg-white p-8 pb-4 rounded-sm absolute top-[62px] left-14 right-14 shadow-lg grid grid-cols-7 gap-5 xl:gap-8">
										<Menu.Item className="col-span-1">
												<a className="border-b-2 pb-1 border-transparent hover:border-ketoblue-main block" href="https://info.ketochow.xyz/what-is-keto">
													<img src="https://cdn.shopify.com/s/files/1/0023/8721/4434/files/wik.webp?v=1664290177" alt="Man smiling with a Keto Chow shaker bottle" />
													<p className="uppercase font-semibold text-black">What is keto?</p>
												</a>
										</Menu.Item>
										<Menu.Item className="col-span-1">
												<a className="border-b-2 pb-1 border-transparent hover:border-ketoblue-main block" href="https://info.ketochow.xyz/prepare">
													<img src="https://cdn.shopify.com/s/files/1/0023/8721/4434/files/htmkc.jpg?v=1664290177" alt="A woman making keto Chow" />
													<p className="uppercase font-semibold text-black">How to make Keto Chow</p>
												</a>
										</Menu.Item>
										<Menu.Item className="col-span-1">
												<a className="border-b-2 pb-1 border-transparent hover:border-ketoblue-main block" href="https://info.ketochow.xyz/nutrition">
													<img src="https://cdn.shopify.com/s/files/1/0023/8721/4434/files/n.jpg?v=1664290178" alt="collage of nutrition facts" />
													<p className="uppercase font-semibold text-black">Nutrition</p>
												</a>
										</Menu.Item>
										<Menu.Item className="col-span-1">
												<a className="border-b-2 pb-1 border-transparent hover:border-ketoblue-main block" href="https://info.ketochow.xyz/macro-calculator">
													<img src="https://cdn.shopify.com/s/files/1/0023/8721/4434/files/mc.webp?v=1664290177" alt="macro calculator results example" />
													<p className="uppercase font-semibold text-black">Macro Calculator</p>
												</a>
										</Menu.Item>
										<Menu.Item className="col-span-1">
												<a className="border-b-2 pb-1 border-transparent hover:border-ketoblue-main block" href="https://info.ketochow.xyz/category/success-stories/">
													<img src="https://cdn.shopify.com/s/files/1/0023/8721/4434/files/success_stories.jpg?v=1665689292" alt="smiling people" />
													<p className="uppercase font-semibold text-black">Success Stories</p>
												</a>
										</Menu.Item>
										<Menu.Item className="col-span-1">
											<div className="col-span-1">
												<a className="border-b-2 pb-1 border-transparent hover:border-ketoblue-main block" href="https://info.ketochow.xyz/about-us#story">
													<img src="https://cdn.shopify.com/s/files/1/0023/8721/4434/files/os.webp?v=1664290177" alt="macro calculator results example" />
													<p className="uppercase font-semibold text-black">Our Story</p>
												</a>
											</div>
										</Menu.Item>
										<Menu.Item className="col-span-1">
												<a className="border-b-2 pb-1 border-transparent hover:border-ketoblue-main block" href="https://info.ketochow.xyz/blog">
													<img src="https://cdn.shopify.com/s/files/1/0023/8721/4434/files/b.jpg?v=1664290178" alt="macro calculator results example" />
													<p className="uppercase font-semibold text-black">Keto Chow Blog</p>
												</a>
										</Menu.Item>
									</Menu.Items>
								</Transition>
							</Menu>
						</div>
						<div>
							<Menu>
								<Menu.Button className="text-ketobody font-bold flex items-center hover:text-ketoblue-light aria-expanded:text-ketoblue-light">Kitchen<NavChevronDown /></Menu.Button>
								<Transition
									enter="transition duration-100 ease-out"
									enterFrom="opacity-0"
									enterTo="opacity-100"
									leave="transition duration-75 ease-out"
									leaveFrom="opacity-100"
									leaveTo="opacity-0"
								>
									<Menu.Items className="bg-white p-8 pb-4 rounded-sm absolute top-[62px] left-14 right-14 shadow-lg grid grid-cols-6 gap-5 xl:gap-8">
										<Menu.Item className="col-span-1">
												<a className="border-b-2 pb-1 border-transparent hover:border-ketoblue-main block" href="https://info.ketochow.xyz/recipes">
													<img src="https://cdn.shopify.com/s/files/1/0023/8721/4434/files/recipes.jpg?v=1664290320" alt="Recipe cards" />
													<p className="uppercase font-semibold text-black">Recipes</p>
												</a>
 										</Menu.Item>
										<Menu.Item className="col-span-1">
												<a className="border-b-2 pb-1 border-transparent hover:border-ketoblue-main block" href="https://info.ketochow.xyz/meal-plans/">
													<img src="https://cdn.shopify.com/s/files/1/0023/8721/4434/files/meal-plans.jpg?v=1664290321" alt="Bowl of food" />
													<p className="uppercase font-semibold text-black">Meal Plans</p>
												</a>
										</Menu.Item>
										<Menu.Item className="col-span-1">
												<a className="border-b-2 pb-1 border-transparent hover:border-ketoblue-main block" href="https://info.ketochow.xyz/flavor-hacks">
													<img src="https://cdn.shopify.com/s/files/1/0023/8721/4434/files/flavor-hacks.jpg?v=1664290321" alt="Shakes in glass cups" />
													<p className="uppercase font-semibold text-black">Flavor Hacks</p>
												</a>
										</Menu.Item>
									</Menu.Items>
								</Transition>
							</Menu>
						</div>
					</div>
					<>
						<div className="lg:hidden flex">
							<button className="hover:text-ketoblue-light" type="button" onClick={openModalMobile}><span className="sr-only">Search</span><SearchIcon/></button>
							<Transition appear show={isOpenMobile} as={Fragment}>
								<Dialog as="div" className="relative z-2010" onClose={closeModalMobile}>
									<Transition.Child
										as={Fragment}
										enter="ease-out duration-300"
										enterFrom="opacity-0"
										enterTo="opacity-100"
										leave="ease-in duration-200"
										leaveFrom="opacity-100"
										leaveTo="opacity-0"
									>
										<div className="fixed inset-0 bg-black/80"/>
									</Transition.Child>

									<div className="fixed inset-0 overflow-y-auto">
										<div className="flex min-h-full items-center justify-center p-4 text-center">
											<Transition.Child
												as={Fragment}
												enter="ease-out duration-300"
												enterFrom="opacity-0 scale-95"
												enterTo="opacity-100 scale-100"
												leave="ease-in duration-200"
												leaveFrom="opacity-100 scale-100"
												leaveTo="opacity-0 scale-95"
											>
												<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-full bg-white border px-6 py-3 text-left align-middle shadow-xl transition-all">
													<form onSubmit={search} id="searchForm" className="grid grid-cols-12 gap-4">
														<button aria-label="Search"><SearchIcon /></button>
														<input type="text" placeholder="Search..." className="p-2 col-span-10" />
													</form>
												</Dialog.Panel>
											</Transition.Child>
											</div>
									</div>
								</Dialog>
							</Transition>
						</div>
					</>
				</div>
				<div className="col-span-1 text-center">
					<a className="block max-w-[100px] mx-auto"  href="https://ketochow.xyz/">
						<img alt="Keto Chow logo" id="nav-logo" class="mx-auto" src="https://cdn.shopify.com/s/files/1/0023/8721/4434/files/keto-chow-logo-teal.png?v=1664224380" width={76}/>
					</a>
				</div>
				<div className="col-span-1 flex justify-end">
					<>
						<div className="hidden lg:flex mr-3 lg:mr-7">
							<button className="hover:text-ketoblue-light" aria-label="Search" type="button" onClick={openModalDesktop}><span className="sr-only">Search</span><SearchIcon/></button>
							<Transition appear show={isOpenDesktop} as={Fragment}>
								<Dialog as="div" className="relative z-2010" onClose={closeModalDesktop}>
									<Transition.Child
										as={Fragment}
										enter="ease-out duration-300"
										enterFrom="opacity-0"
										enterTo="opacity-100"
										leave="ease-in duration-200"
										leaveFrom="opacity-100"
										leaveTo="opacity-0"
									>
										<div className="fixed inset-0 bg-black/80"/>
									</Transition.Child>

									<div className="fixed inset-0 overflow-y-auto">
										<div className="flex min-h-full items-center justify-center p-4 text-center">
											<Transition.Child
												as={Fragment}
												enter="ease-out duration-300"
												enterFrom="opacity-0 scale-95"
												enterTo="opacity-100 scale-100"
												leave="ease-in duration-200"
												leaveFrom="opacity-100 scale-100"
												leaveTo="opacity-0 scale-95"
											>
												<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-full bg-white border px-6 py-3 text-left align-middle shadow-xl transition-all">
													<form onSubmit={search} id="searchForm" className="grid grid-cols-12 gap-4">
														<button aria-label="Search"><SearchIcon /></button>
														<input type="text" placeholder="Search..." className="p-2 col-span-10" />
													</form>
												</Dialog.Panel>
											</Transition.Child>
											</div>
									</div>
								</Dialog>
							</Transition>
						</div>
					</>
					<div className="mr-3 lg:mr-7 flex">
						<Menu>
							<Menu.Button className="text-ketobody font-bold flex items-center hover:text-ketoblue-light aria-expanded:text-ketoblue-light" aria-label="Account"><ProfileIcon/></Menu.Button>
							<Transition
								enter="transition duration-100 ease-out"
								enterFrom="opacity-0"
								enterTo="opacity-100"
								leave="transition duration-75 ease-out"
								leaveFrom="opacity-100"
								leaveTo="opacity-0"
							>
								<Menu.Items className="bg-white p-8 pb-4 rounded-sm absolute top-[62px] right-14 shadow-lg grid grid-cols-1 gap-5 xl:gap-8 z-10">
									<Menu.Item className="not-logged-in col-span-1">
											<a className="border-b-2 pb-1 border-transparent hover:border-ketoblue-main inline-block" href="https://www.ketochow.xyz/account/register">
												<p className="uppercase font-semibold text-black">Sign Up</p>
											</a>
									</Menu.Item>
									<Menu.Item className="not-logged-in col-span-1">
											<a className="border-b-2 pb-1 border-transparent hover:border-ketoblue-main inline-block" href="https://www.ketochow.xyz/account">
												<p className="uppercase font-semibold text-black">Login</p>
											</a>
									</Menu.Item>
									<Menu.Item className="logged-in col-span-1">
											<a className="border-b-2 pb-1 border-transparent hover:border-ketoblue-main inline-block" href="https://www.ketochow.xyz/account">
												<p className="uppercase font-semibold text-black">Account</p>
											</a>
									</Menu.Item>
									<Menu.Item className="logged-in col-span-1">
											<a className="border-b-2 pb-1 border-transparent hover:border-ketoblue-main inline-block" href="https://www.ketochow.xyz/account/logout">
												<p className="uppercase font-semibold text-black">Logout</p>
											</a>
									</Menu.Item>
								</Menu.Items>
							</Transition>
						</Menu>
					</div>
					<button className="relative text-ketobody hover:text-ketoblue-light jsDrawerOpenRight" aria-label="Cart">
						<CartIcon/>
						<div id="reactCartCount" className={rccClass + " absolute top-0 right-0 bottom-auto left-auto translate-x-[75%] -translate-y-1/2 rotate-0 skew-x-0 skew-y-0 scale-x-100 scale-y-100 py-1 px-2 text-xs leading-none text-center whitespace-nowrap align-baseline font-bold bg-ketoblue-main text-white rounded-full z-10"}>{reactCartCount}</div>
					</button>
				</div>
			</div>

		</nav>
	)
}

[clarabuchanan]

@adamwathan @RobinMalfait

[adamwathan]

Sorry but we can’t with what’s provided, we need a real reproduction, like a CodeSandbox link that minimally demonstrates the issue or a minimal repository we can clone and run.

We can’t paste the code above and actually try it because it’s referencing all sorts of things that aren’t provided, and even if they were provided it’s not reasonable for us to do all the work copying and pasting the source for multiple files and wiring it all up.

[kicksnarehat]

UPDATE: I opened an issue using the template

---

https://codesandbox.io/s/white-bash-jtgbj9?file=/src/App.js

I'm having same problem. Reproduced in CodeSandbox above using "Basic Example" copy/pasted from headlessui's documentation at:

https://headlessui.com/react/menu

Thanks!