Where does a dijit/form/Button get its accessibility features from ?
By accessibily ( hereafter referred to as a11y), I mean you can press the button using the mouse, touch or keyboard( Space and Enter ) keys.
Link to demo code: http://dojo-sandbox.net/public/8225a/1
The answer is quite simple really.
Open up the Button's template file:
https://github.com/dojo/dijit/blob/master/form/templates/Button.html
Notice the dojo-attach-events:
data-dojo-attach-event="ondijitclick:__onClick"
This "event" -
So, what is ondijitclick ?
To understand this, we need to revisit some of the basics.
The _TemplatedMixin processes the HTML template, for attach-points and attach-events, among other things. Well, this is half the truth. This part of the work is done by its base-class the _AttachMixin's _processTemplateNode method. This methods internally uses the _attach method. This is the interesting bit:
This method looks for the phrase "dijitclick" after parsing out the "on"
If it finds one, it pulls in the allyclick module via a require
And in the final step, it attaches an event handler using on.
i.e, in case of the button, it fires the internal _onClick whenever a button is clicked/touched/keyboard pressed via- Space/Enter. So the declarative code in the Button -"ondijitclick" basically converts to
on(node, "a11yclick", _onClick);
This helped me understand that the above line of code was another option instead of using "ondijitclick" in my template file.
I hope that helped demystify some of Dojo's magic.
In a future post I want to explore the internals of the a11yclick module
By accessibily ( hereafter referred to as a11y), I mean you can press the button using the mouse, touch or keyboard( Space and Enter ) keys.
Link to demo code: http://dojo-sandbox.net/public/8225a/1
The answer is quite simple really.
Open up the Button's template file:
https://github.com/dojo/dijit/blob/master/form/templates/Button.html
Notice the dojo-attach-events:
data-dojo-attach-event="ondijitclick:__onClick"
This "event" -
ondijitclick magically gives this behaviour to the node on which its present. But as you can safely assume, 'ondijitclick' is not a native event. So, what is ondijitclick ?
To understand this, we need to revisit some of the basics.
The _TemplatedMixin processes the HTML template, for attach-points and attach-events, among other things. Well, this is half the truth. This part of the work is done by its base-class the _AttachMixin's _processTemplateNode method. This methods internally uses the _attach method. This is the interesting bit:
This method looks for the phrase "dijitclick" after parsing out the "on"
If it finds one, it pulls in the allyclick module via a require
And in the final step, it attaches an event handler using on.
i.e, in case of the button, it fires the internal _onClick whenever a button is clicked/touched/keyboard pressed via- Space/Enter. So the declarative code in the Button -"ondijitclick" basically converts to
on(node, "a11yclick", _onClick);
This helped me understand that the above line of code was another option instead of using "ondijitclick" in my template file.
I hope that helped demystify some of Dojo's magic.
In a future post I want to explore the internals of the a11yclick module
No comments:
Post a Comment