Here's my codesandbox link: https://codesandbox.io/s/accessible-menu-ejzte

I have a menu that pops up when you click on a button. It's functional, but I am noticing that it's different from examples I find online.

Menu.tsx is just a ul with children:

    <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 is an li with buttons in it:

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>
);

However, when I look at other websites, their menus behave differently from mine:

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

I noticed these differences:

1. The 1st menu item is automatically focused on when you open the menu by tabbing to the button and pressing Enter
2. If the menu is open and you press Esc, the menu closes and the button is focused

Does this functionality come from Javascript? Or is it default behavior for menus that are built correctly?

I thought accessible elements were all achievable through native HTML, but so far I can't find any differences between my HTML markup and the 2 examples above, so this makes me think that this can only be achieved through JS.