Opened 12 years ago

Closed 12 years ago

Last modified 12 years ago

#2788 closed defect (fixed)

Implement Dijit Menu keyboard and mouse behavior

Reported by: simonjb Owned by: simonjb
Priority: high Milestone: 0.9beta
Component: Accessibility Version: 0.4.2
Keywords: Cc:
Blocked By: Blocking:

Description

Implement the Dijit Menu keyboard and mouse behavior as outlined in http://dojotoolkit.org/node/632

Attachments (5)

Menu.diff (3.8 KB) - added by simonjb 12 years ago.
Menu.2.diff (4.5 KB) - added by simonjb 12 years ago.
Menu.3.diff (8.2 KB) - added by simonjb 12 years ago.
Menu.4.diff (19.1 KB) - added by simonjb 12 years ago.
Menu.5.diff (4.3 KB) - added by simonjb 12 years ago.

Download all attachments as: .zip

Change History (17)

comment:1 Changed 12 years ago by simonjb

Status: newassigned

Changed 12 years ago by simonjb

Attachment: Menu.diff added

comment:2 Changed 12 years ago by simonjb

Attached a patch that implements:

  • Pressing escape with focus on a top level menu item closes the menu and returns focus to the previously focused item on the page (where focus was when the menu was invoked)
  • Pressing escape or left arrow with focus on a submenu item closes the submenu and returns focus to the parent menu item
  • Tabbing out of the menu component will close any open menus and return focus to the previously focused item on the page (where focus was before the menu was invoked)
  • Mouse over an menu item sets focus to that item
  • When a menu item which has focus and has a submenu open loses focus(because the mouse was moved over an adjacent menu item) the submenu closes
  • Clicking out of the menu component will close any open menus. Focus will be set by the browser based on where the user clicks

Notes:

  • On Windows, Shift-F10 does not behave the same as pressing the context menu keyboard key (typically located to the right of the space bar): the context menu key behaves as expected (oncontextmenu is fired), however on both Firefox and Internet Explorer shift-F10 causes the browser the process the key press as well as firing oncontextmenu. In Firefox, pressing shift-F10 followed by down arrow causes the window's menu (Restore, Move, Size, and so on) to open and receive focus. In Internet Explorer 7, pressing shift-F10 followed by down arrow causes the File menu to open and receive focus. I believe that we can stop the browser processing shift-F10 if we use keyup/keydown but there may be a better alternative.
  • The PopupManager is not correctly disconnecting event listeners whenever a menu is closed. Whenever the menu is opened for the first time there is 1 event listener, the second time 2 events listeners, the third time 3, and so on. The multiple event listeners result in events being processed multiple times. For example, whenever the menu is opened for the second time a down arrow will move down 2 items instead of 1. There have been some changes to the new 0.9 Dojo core and this issue may be fixed when we port Menu to the new core.
  • The FocusManager was not correctly recording the current focus when a menu was opened. I made a change to PopupManager._open(): I changed the call to beforeTopOpen() from beforeTopOpen(widget) to beforeTopOpen(null, widget). Is this the right fix?

To do:

  • Disabled menu items receive focus but have no action when enter or left/right arrow is pressed
  • With focus on a submenu item, moving the mouse out of the submenu returns focus to the parent menu item but the submenu remains open

Changed 12 years ago by simonjb

Attachment: Menu.2.diff added

comment:3 Changed 12 years ago by simonjb

Ported the patch over to the new dojo 0.9 core and attached.

Outstanding issues:

  • Some problems in Container.js have been observed (patch available at #2893)
  • Shift-F10
  • Multiple event listeners still persisting
  • Space key does not activate a menu item

To do:

  • Disabled menu items receive focus but have no action when enter or left/right arrow is pressed
  • With focus on a submenu item, moving the mouse out of the submenu returns focus to the parent menu item but the submenu remains open

comment:4 Changed 12 years ago by simonjb

I think I've fixed the multiple event listeners persisting: #2894

comment:5 Changed 12 years ago by bill

(In [8374]) Implement Dijit Menu keyboard and mouse behavior. Still a few outstanding issues (see bug #2788). Patch by Simon Bates (CLA on file). Refs #2788.

comment:6 Changed 12 years ago by Becky Gibson

Milestone: 0.90.9M2

comment:7 Changed 12 years ago by simonjb

Scott has committed a changeset [8425] addressing shift-f10.

Changed 12 years ago by simonjb

Attachment: Menu.3.diff added

comment:8 Changed 12 years ago by simonjb

Uploaded latest patch:

  • highlight was overloaded:
    • in MenuItem: _highlightItem() just changes styles
    • in PopupMenu: _highlightOption() called MenuItem.onHover() which closed submenus, set focus, and started an onhover timer
    • in PopupMenu: _highlighted_option recorded the currently highlighted option
  • I changed to:
    • in MenuItem: _highlightItem() still styles
    • in PopupMenu: _highlightOption() has been renamed to _selectNextItem()
    • in PopupMenu: _highlighted_option has been renamed to _selectedItem
  • Refactored MenuItem.onHover(), placing the code common to keyboard and mouse control in MenuItem._selectItem(). So, highlight now refers just to presentation and selection refers to the larger task of choosing which menu item to interact with
  • Menu.close() now closes any open submenus
  • Space now activates menu items
  • The submenu timer now only runs when an item is hovered with the mouse (not the keyboard)
  • When a submenu is opened via the mouse no items are selected
  • disabled menu items now work
  • TAB now closes all open menus and submenus rather than just the current submenu
  • Tested on:
    • IE6 and IE7
    • FF
  • Issues on Safari
    • control-clicking in a text box brings up the Mac OS X context menu (control-clicking on the page background opens the Dojo menu)
    • Esc closes all menus not just the current submenu
  • Issues on Webkit nightly May 7
    • sometimes crashes

comment:9 Changed 12 years ago by bill

Resolution: fixed
Status: assignedclosed

(In [8621]) Fixes #2788: Implement Dijit Menu keyboard and mouse behavior. There are a bunch of changes here; see the bug for details.

Patch by Simon Bates (CLA on file)

Changed 12 years ago by simonjb

Attachment: Menu.4.diff added

comment:10 Changed 12 years ago by simonjb

Posted latest Menu patch. Changes:

  • Added ARIA roles and states: menu, menuitem, disabled, haspopup
  • Updated the test_Menu.html page to reflect the new keyboard and mouse behavior
  • Fixed a bug when you clicked on the trigger for an open submenu when there was an item highlighted in the submenu: the selection would cycle through the items as you clicked

I've tested the ARIA roles and states with FF on WindowEyes and JAWS. It works very nicely with WindowEyes, however there are some issues with JAWS. I've been exploring with Aaron Leventhal.

Changed 12 years ago by simonjb

Attachment: Menu.5.diff added

comment:11 Changed 12 years ago by simonjb

Uploaded a patch (Menu.5.diff) which addresses some recent menu regressions:

  • onclick now works again
  • ARIA "menu" role added back to the table element
  • LEFT_ARROW no longer closes the menu when it is pressed with no submenus open
  • the first item is now focused when a menu or submenu is opened (added a call to onOpen to PopupManager)
  • focus/blur now works on IE (the menthods were renamed to _focus() and _blur(): IE was not calling the methods when they were called focus() and blur())
  • the submenu timer is now only started whenever an item is given focus by mouse (not by keyboard)
  • added a test for an existing submenu timer before creating another one: I was seeing behaviour where multiple timers were being created and the _openSubmenu could be called whenver the focused item was nolonger one with a submenu (causing errors)

Also added a small bug fix for RIGHT_ARROW inside a submenu: key is no longer propagated up to parent.

comment:12 Changed 12 years ago by bill

(In [8726]) Fix a bunch of bugs w/my recent refactor of menu. Patch from Simon Bates (CLA on file) Refs #2788 (this is Menu5.diff).

Note: See TracTickets for help on using tickets.