Re: Officially suggested keyboard interaction for sub-menu items in the "navigation"?

On Sun, Jul 29, 2012 at 4:03 AM, Ramón Corominas
<listas@ramoncorominas.com>wrote:

> Hi, Ian and all.
>
>  As defined in the spec, when opening such a sub-menu, vendors should
>> "places focus on the first menu item".
>
>  > (...)
> > Maybe that's fine for assistive technologies to automatically focus
> > the first sub-menu item, but that is likely to confuse mouse users.
> > For the navigation, the first sub-menu item shouldn't get focused
> > before mouse users move their mouse cursor onto it.
>
> It is fine for keyboard users (and not only AT users). You don't have to
> move the focus to the first sub-item for mouse users (remember you are
> under the "keyboard interaction" section).
>
> Regards,
> Ramón.
>

Hi Ramón. Thanks for clarifying this issue! That makes sense.


On Sun, Jul 29, 2012 at 4:07 AM, Ramón Corominas
<listas@ramoncorominas.com>wrote:

>
>  And the spec also said:
>>
>  "When a menu is open and focus is on a menu item in that open menu, then
>> Enter or Space invokes that menu action (which may be to open a submenu)."
>> That obviously can't be applied on "navigation" items because hit Enter key
>> on a "navigation" item will usually take users to another page.
>>
>
> And what is the problem with that? If the action of the menu item is to
> take users to another page, that is exactly what they would expect to
> happen.
>

Let's take the following code for example. When the focus is on the "About"
menu item, should hitting Enter key toggle the sub-menu or take users to
about.html ?

<nav role="navigation">
    <ul role="menubar">
        <li role="presentation"><a href="index.html"
role="menuitem">Home</a></li>
        <li role="presentation">
            <a href="about.html" role="menuitem"
aria-haspopup="true">About</a>
            <ul role="menu">
                <li role="presentation"><a href="our-company.html"
role="menuitem">Our company</a></li>
                <li role="presentation"><a href="our-team.html"
role="menuitem">Our team</a></li>
                <li role="presentation"><a href="our-location.html"
role="menuitem">Our location</a></li>
            </ul>
        </li>
        <li role="presentation"><a href="contact.html"
role="menuitem">Contact</a></li>
    </ul>
</nav>


Sincerely,
Ian Yang