We Keep Coding

Automatically check access by keyboard

We are trying to automatically check our web-application for accessibility. We are therefore looking for ways to automatically check if a certain DOM-Element having an onclick event or beeing an interactive element by definition (like a link, button, checkbox or similar) is accessible by keyboard (e.g. by pressing the TAB key multiple times).
Is there a good standard JS solution (or library) for this? If not, any hints on how this could be achieved in JS?
To simplify things, the solution would also work for us, if the elements that need to be accessible by keyboard must be known (e.g. by a list of CSS selectors).

Selenium click event does not trigger angularjs event

I have this page where an angularjs modal-content popup, in there i fill up some fields and click save. After save is initiated, popup should dissapear an event should happen and so on.
My selenium test does all that perfectly except that when it clicks on the save button, popup dissapears but no event is triggered or saved so when i open up the window again everything is empty. I've tried stuff that i know with selenium and it still doesn't work. Can anyone help me out here?
This is the save button:
<button class="save-button" data-ng-click="onSettingsSave()" ng-hide="readOnlyMode || !canSave()">Save</button>
Stuff i've tried:
var saveButton = driver.FindElement(By.CssSelector("button.save-button"));
saveButton.Click();
var saveButton = driver.FindElement(By.XPath(saveXpath));
saveButton.SendKeys(Keys.Enter);
((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].focus();",saveButton);
((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].click();",saveButton );

Try force clicking the element using pure JS:
driver.execute_script("arguments[0].click();", yourElement)

You can't use $ as a shortcut for document.querySelector in a script like that.
driver.ExecuteScript("document.querySelector('#base_element_id div input').click()");
Also this probably won't trigger an onClick in react / angular

Like the OP I have tried everything I can think of to get Selenium to trigger client side javascript events. I've seen some posts across the web of people having partial success where it randomly works; in my case it never works.
Selenium does successfully trigger the browsers primary click action, be it checking a checkbox or pressing a button, but it does not trigger any attached client side javascript events.
Both the native element.Click() method in selenium, and the abstracted ExecuteScript with arguments method of clicking as suggested by #csaladenes have the same result.
The only solution I have found so far is to use pure JS through that same ExecuteScript method; basically avoid the overload with params selenium can embed.
driver.ExecuteScript("$('#base_element_id div input').click()");
In my case I am using the JQuery that is already on my page to make locating the element easier, but any form of truly pure JS should do the same thing.
EDIT:
After some additional testing, it turns out that my "fix" really did nothing. However, performing the same click more than once did cause the client side events to fire.
In my case I am checking a checkbox, so I needed to perform the click 3 times to leave it in the correct state and still have the client side events run.
This is very odd, and definitely needs some more work to figure out where the issue is at that makes this necessary.
Edit 2:
I think I have finally found a solution, and at least partial answer, that does not make me cringe.
It seems as though Selenium has an issue where sometimes it "loses" the focus of the browser. Considering how consistent and repeatable my issue is I don't think focus is the only problem in my case, however the solution works pretty well.
I was able to get the immediate parent of my checkbox, which was a div element, click that first to return focus to the page, then click the checkbox. After that sequence of events the client side events worked correctly.

HTML simulate textarea with div container

I want to create a little WYSIWYG editor.
The idea:
First I want to add the feature to write and change text. So I add an onClick and onKeyBoard Listener to my div container. When I click the div I set a varaible named "focused" to true. When an key event is fired I check if focused is true. In case focus is false nothing will happen else the new charater will be added on the cursor's position.
My questions:
Is this the right way? I tried to check how other editors handle the text input but I wasnt able to get it.
In case this is the right way - how can I simulate a blinking cursor. In a textarea the cursor will blink but who about a div container? The cursor will hide immideatly after clicking.

I'm assuming you're doing this for fun/practice. If you're doing this for professional reason then I HIGHLY recommend you don't reinvent the wheel and use something like Ckeditor, tinyMCE or YUI.
That being said; you need to look into event handling. Specifically, for your question about focusing, you can look here. The way you're describing (setting a variable to true/false) seems like it is going to just run into problems. If you use the standard events attribute (as opposed to setting a "focus" variable onclick) you should define functions to execute and then set them as an onfocus/onblur attribute for the element you're listening to.
That is if you aren't using a javacript library like mootools, jquery, extJS, etc. If you're using one of those they likely have their own way of handling events, so you should search their respective documentation for how to implement event handlers.
One more note; you really should be using a textarea over a div (unless I'm misunderstanding and you just want to do something when a user focuses on your div). If you're using javascript only to completely reinvent a texteditor from a div; then your web page will not function without javascript. If you keep the text area; users could still type information in and you still get the benefit of grabbing text contents for form submits but using divs means your web page will just be rendered useless without javascript.

Why use buttons & forms for submitting a piece of data, when just icon image with onclick handling function may work as well?

Why use buttons within form for submitting a piece of data (such as for favorite-ing an question here on SO), when simply icon image with on-click JS handler function may work as well ?
Here the buttons I am referring to are like 'Vote-up' buttons, or 'Favorite a question' buttons on stack overflow. & not the Submit an answer button for which I would defintiely use forms and buttons.
I would like to simply put the icon images in place of my 'vote up' or 'favrorite' buttons and attach a click event handling function which would update my server via ajax. The reason being this reduces & cleans-up my markup
EDIT :
I guess most of the biggest sites today like fb/ twitter etc are relying on JS & as I have just noticed they dont provide a alternate way for some of the most basic features like liking a post when javascript is disabled. I obviously dont need to go beyond those users. Thus by limiting myself to JS enabled users I think I would be quite OK.

The vote-up & favorite button are anchor tags on stackoverflow (or I don't see what you're talking about!).
Also, I think it is better to use forms so that it degrades gracefully without JS.

I'd use an ajax post request for that, definitely. I think you're right. Use $.ajax or the shortcut $.post on the click event for the image. A loading effect is also important in terms of UX.

Why use buttons within form for submitting a piece of data (such as for favorite-ing an question here on SO), when simply icon image with on-click JS handler function may work as well ?
It might work. It might not work. HTML is solid and reliable. Build on things that work and don't fall foul of the Gawker problem

best practices for designing a page with lots of events

So I have a grid on a page that displays tablular data, with a checkbox by each row.
So in this situation, when a checkbox is clicked, allot of things will react on the page potentially.
Also, if a button is clicked, again allot of things will potentially react on the page.
So say if someone checks a checkbox, the row should be highlighted, there is a toolbar that will show/hide buttons, etc.
If someone were to click on the toolbar directly, again things similar to when the checkbox was clicked will react.
So what I want to do is this, whenever a checkbox is clicked, or whenever a toolbar button is clicked, I want to 'announce' to anyone who is listening that this event occurred.
I can then, based on the source of the event, react in a similar or different manner.
how to best go about designing things like this?

I think you want to look into using the Observer Pattern. Basically, interested parties subscribe or listen for an event on a publisher, and when the event occurs, the source notifies all the listeners of it.

two things come to mind:
1. event delegation (you don't want to bind to each input on the grid)
look at this link to a great way of doing this while also maintaining a clean code:
by ben nadel
2. using custom events, or even better - use this pub/sub plugin
i have a large grid like this in my app that evolved over time, and manually binding to each input + responding in different ways caused the code to be a "bit" ugly,
It's great that you now where you are going and prepare up front

You could try YUI Custom Events. This allow you to fire off your own "event" which listeners can hear.

I like how it works with jquery, since you can bind an event to many
elements at once.
$("input[type=checkbox]").click(function(e){
alert(e.currentTarget.id);
});
This code would make all checkboxes alert their name. Of course, by using css classes,
you could bind a subset of all checkboxes to create an action.
$("input[type=checkbox].cssClass").click(function(e){
someOtherFunction(e.currentTarget);
});