Opened 12 years ago

Closed 8 years ago

#8709 closed enhancement (fixed)

Button: visual feedback absent when pressing via keyboard.

Reported by: Joseph Scheuhammer Owned by: bill
Priority: high Milestone: 1.9
Component: Dijit - LnF Version: 1.2.3
Keywords: Cc: Becky Gibson
Blocked By: Blocking:


This is purely a visual feedback issue.

Using ".../dijit/tests/form/test_Button.html" as an example, if the mouse is used to press a button, the styles change to show the button as first depressed and then released.

If either a SPACE or ENTER/RETURN keystroke is used, the button does not change its appearance. The behaviour is as expected in that the correct handlers are executed.

This is unlike native buttons where the pressed/released appearance is the same when using either the mouse or keyboard to activate the button.

Change History (6)

comment:1 Changed 12 years ago by Joseph Scheuhammer

Looking at _FormWidget.js, the method used to style pressed/released is _setStateClass(). Specifically, _onMouse() sets the _active state to 'true' for onmousedown, and then calls _setStateClass().

Something similar needs to be done for SPACE and/or ENTER. It's not clear how to wire this up, though.

comment:2 Changed 12 years ago by bill

I've thought about this too.... maybe handle keydown and keyup, similar to mousedown and mouseup, although typicially people don't hold down the space/enter keys for any length of time.

comment:3 Changed 12 years ago by bill

Component: DijitDijit - LnF

comment:4 Changed 12 years ago by bill

Milestone: tbdfuture

comment:5 Changed 8 years ago by bill

Milestone: future1.9
Owner: set to bill
Status: newassigned

comment:6 Changed 8 years ago by bill

Resolution: fixed
Status: assignedclosed

In [30807]:

Make _CssStateMixin use dojo/touch events rather than "touchstart" and "touchend" so that (in particular the active state) will work on Surface. Fixes #16823.

Also add new press and release synthetic events to dijit/a11yclick, representing either mousedown/mouseup, touchstart/touchend, or keydown/keyup corresponding to a click event. Use new dijit/a11yclick events in _CssStateMixin to provide visual feedback during keyboard "clicks". For non-IE platforms this moves the listener from the capturing phase to the bubbling phase, which seems to be working OK (especially considering that IE's worked this way from the beginning), but there might be some stopPropagation() calls somewhere the need to be removed. Fixes #8709 !strict.

This is also in preparation to convert Tree to use dijit/a11yclick. Refs #16819.

Note: See TracTickets for help on using tickets.