Opened 7 years ago

Last modified 2 years ago

#14734 assigned feature

a11yclick event for DOM elements

Reported by: Paul Christopher Owned by:
Priority: undecided Milestone: 1.15
Component: Events Version: 1.7.1
Keywords: Cc:
Blocked By: Blocking:

Description

Description So as to faciliate the rapid development of accesible rich internet applications, providing an "a11yclick" event like

on(node, "a11yclick", handle);

for native DOM elements should expand in the background to

on(node, "click", handle);

on(node, "keypress", function(e){
  if(e.keyCode == keys.ENTER) {
     handle();
  }
});

Discussion From the point of view of accessibility, simple click events are not of much use. There must be ways to trigger an action by mouse and keyboard. Rarely are there cases in which only a "click" event is used (although the use of click-events only is a widespread phenomena in the internet). In most cases you have to set up both handlers, for click and keypress (if you want to do it correctly, as the webstandards say). The Dojo toolkit should support the programmer in this task. a11yclick should expand in the background always to a click and keypress handler.

Change History (7)

comment:1 Changed 7 years ago by bill

Component: GeneralEvents
Owner: set to Kris Zyp

This is already supported in the latest code:

require(["dojo/on", "dijit/_OnDijitClickMixin"],
function(on, _OnDijitClickMixin){
     on(node, _OnDijitClickMixin.a11yclick, handle);
})

Notes:

  • Unfortunately the 1.7 release didn't export the a11yclick event handler, but it's there in trunk.
  • Note that by design on() only uses strings for W3C standard events. Extension events are represented as functions.
  • The actual code in _OnDijitClickMixin.js is more complicated than you listed above, to deal with cases where the focus shifts between keydown and keyup due to an event handler.

Anyway, I'm not averse to moving this code (or any of the dijit library functions) into core, so I'll pass this ticket on to Kris.

comment:2 Changed 7 years ago by bill

PS: probably if the feature is moved to core, or even exposed in dijit in a more modern way, the code should be modified to support event delegation. So the /input|button/i.test(node.nodeName) test needs to be done on evt.target instead, and done per-event rather than at connect time.

See also #13785. I'm going to do work on ondijitclick for that ticket, although I think I will handle it differently than the above suggestion because widget users are expecting widgets like Button to emit "click" events not "a11yclick" events.

comment:3 Changed 7 years ago by bill

In [27937]:

Modify ondijitclick to convert keyboard ENTER/SPACE key events into actual click events, so that the click events bubble, and apps can catch the events on an ancestor node, using on(wrapperNode, "click", ...).

The other option was to tell apps to do on(wrapperNode, _OnDijitClick.a11yclick, ...), but I worry that's confusing, given the name of the existing event dijit.form.Button.onClick(), and so I worry that apps will end up doing on(wrapperNode, "click", ...), and thus being non-accessible.

For longer term, I'd like to convert a lot of the current clickable <span> and <div> nodes into <button> nodes, thus avoiding the need for ondijitclick altogether. However, that can't be done until we desupport IE6/IE7 (due to glitches they have rendering <button>'s), and also can't be done for cases like ComboButton and Menu where for formatting reasons the clickable nodes need to be <td> nodes.

Finally, there's a subtle bug both before and after this checkin that an app can't call evt.preventDefault() on a button's keypress/keydown event in order to stop the click event from being generated and stop the form from submitting. Probably that won't be an issue in practice because (to support mouse users) apps would instead call evt.preventDefault() on the click event.

Refs #13785, #14734 !strict.

comment:4 Changed 7 years ago by Paul Christopher

This ticket might be related to http://bugs.dojotoolkit.org/ticket/15097

comment:5 Changed 3 years ago by dylan

Milestone: tbd1.12
Owner: Kris Zyp deleted
Status: newassigned

Consider for 1.12, or close as patchwelcome?

comment:6 Changed 3 years ago by bill

It's just a question of moving dijit/a11yclick.js to dojo/, and adding some automated tests.

comment:7 Changed 2 years ago by dylan

Milestone: 1.131.15

Ticket planning... move current 1.13 tickets out to 1.15 to make it easier to move tickets into the 1.13 milestone.

Note: See TracTickets for help on using tickets.