Select Menu improvements

[simurai]

Here some follow-up improvements/tweaks that got discovered while using the .SelectMenu on dotcom: https://github.com/github/design-systems/issues/666

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://primer-css-git-select-menu-improvements.primer.now.sh

[simurai]

Original comment by @muan https://github.com/github/github/pull/116285#discussion_r322834653

We shouldn't use <menu> as it has poor support across browsers. It provides no semantic value in all major browsers while expecting only <li> children. This introduces unnecessary markup constraint and breaks the experience for screen reader users. (See reports in firefox, webkit, chrome).
Also, <details-menu> already sets role=menu on itself if that's what we are looking for.

Initially I thought using <menu> is a good way to make it easier to read the markup. So that you see where the SelectMenu-list "starts" and "ends". This PR changes the documentation to use <div>s instead.

[simurai]

When switching tabs, the text "jumps" by 1px:

In this PR it gets fixed by permanently adding a transparent border and then only change the border-color when a tab is selected.

[shawnbot]

Nice, thanks! Let's include this in #887.