Distinguish selected state and hover state

[Mu-An Chiou]

Currently hovered/focused items and selected items both have the aria-selected=true, which makes it hard to tell which is already selected, and which is to be selected.

Perhaps aria-current? https://www.w3.org/TR/wai-aria-1.1/#h-note-38

In some use cases for widgets that support aria-selected, current and selected can have different meanings and can both be used within the same set of elements. For example, aria-current="page" can be used in a navigation tree to indicate which page is currently displayed, while aria-selected="true" indicates which page will be displayed if the user activates the treeitem.

Notes:

• We might need to consider if there's a difference in semantics when the menu is not used in a navigation context.
• Do not apply when item is menuitemcheckbox (when multiple selection is possible).

cc @github/web-systems

[Mu-An Chiou]

Apologies I realized this is a js-navigation-item problem, not a <details-menu> problem.

Select menu + Navigation container ✖️

• to be selected = :hover = keyboard focus .navigation-focus = aria-selected
• selected = .selected = aria-selected

Details menu ✔️

• to be selected = :hover = keyboard focus :focus
• selected = aria-selected