Aquí está mi enlace de codesandbox: https://codesandbox.io/s/accessible-menu-ejzte

Tengo un menú que aparece cuando haces clic en un botón. Es funcional, pero me doy cuenta de que es diferente de los ejemplos que encuentro en línea.

Menu.tsx es solo una ul con niños:

 <Container role="menu" id={id} ref={menu_ref} is_visible={open} onKeyDown={handleKeyPress} onClick={(e: React.MouseEvent) => { e.stopPropagation(); onClose(); }} {...rest} > {children} </Container>

MenuItem.tsx es un li con botones en él:

 const MenuItem = ({ start_text, onClick }: MenuItemProps) => ( <Container role="none"> <ClickableWrapper onClick={(e: React.MouseEvent) => onClick && onClick(e)} role="menuitem" > <TextContainer> {start_text && <StartText>{start_text}</StartText>} </TextContainer> </ClickableWrapper> </Container> );

Sin embargo, cuando miro otros sitios web, sus menús se comportan de manera diferente a la mía:

1. https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html
2. https://mui.com/components/menus/

Noté estas diferencias:

1. El primer elemento del menú se enfoca automáticamente cuando abre el menú al tocar el botón y presionar Entrar
2. Si el menú está abierto y presiona Esc , el menú se cierra y el botón se enfoca

¿Esta funcionalidad proviene de Javascript? ¿O es el comportamiento predeterminado para los menús que se construyen correctamente?

Pensé que todos los elementos accesibles se podían lograr a través de HTML nativo, pero hasta ahora no puedo encontrar ninguna diferencia entre mi marcado HTML y los 2 ejemplos anteriores, por lo que esto me hace pensar que esto solo se puede lograr a través de JS.