We Keep Coding

When i use VoiceOver of Mac to navigate through the website, focus is remaining at a button and its being there until another button is encountered

When I use VoiceOver of Mac to navigate the website using the keyboard command (cmd+shift+left/right arrows), the focus remains on a button. It is there until another button is encountered. The issue is only in Chrome and Microsoft Edge browsers. The above-mentioned scenario is working well for Safari and Firefox browsers. When a button gets the focus and VoiceOver moves to other text elements, due to the focus of the button, the voiceover is again navigating back to the focused button and iterating through the elements that are already read.
I tried "focusin","focusout" event listeners to set aria-hidden / tabIndex values accordingly. I also tried setting the focus of elements using CSS, making box-shadow:none, outline:none, but that just makes the focus not visible.

Different click event target in Chrome and Firefox

If press mouse button inside input element and drag out to the header before releasing in Chrome we will see header as click event target, but in Firefox we will see input field as event target. What the reason of this differences in event handling and how to implement Firefox behaviour in Chrome.
Also safari in this case doesn't dispatch event.
Interesting thing. This 'incorrect' behaviour can be reproduced in Chrome only if you start click event on input field and drag out to header. If you start from header and finish it on input field you will see expected event target (header).
Tried to do something with poitner-events and eventListener options, but no results.
I've created this simple example for checking this difference.
Here is example of layout where this case can be reproduced.
<div class="header" onclick="handleClick(event)">
<input type="text" class="input" onclick="handleClick(event)">
</div>

Stop Chrome Extension from 'stealing' focus from parent page

My Chrome Extension has a useful toolbar...and of course a popup.
When a user clicks into some websites, the invokes my Extension (by clicking on the toolbar or just click the Extension icon) focus leaves the element on the parent/main page...which can sometimes be undesirable.
Is there a way to stop a Chrome Extension from taking focus? So the cursor remains blinking and/or the main page element stays in focus and a blur event is not triggered?

I took a different approach...since I know which element the user was focused on before clicking my popup or toolbar, I simply put the focus back on that element after my code ran...works beautifully...

iOS - removing an iFrame with focused input element keeps the cursor visible and keyboard open

Open in iOS:
https://jsfiddle.net/rLLvd18q/31/
I have a page hosting an iFrame with an input element. The outer page has a button that removes the iFrame from the DOM. In Safari/Chrome in iOS 9.3.2 (I tested on iPhone 6s) clicking that button while the input is focused, causes the iFrame to be removed, but the cursor stays blinking on screen. Furthermore, the keyboard stays open (clicking keys does nothing). After dismissing the keyboard, clicking anywhere else in the screen causes the keyboard to pop back again.
I have already tried posting a message upon clicking the button from the hosting page to the iFrame upon clicking the button and doing
document.activeElement.blur()
inside the iFrame. Didn't help... I'm running out of ideas...

I've been trying to solve this issue in my project, and I noticed the iframe is NOT the active element. A possible workaround could be focus programmatically the iframe and then blur it.
This works fine for me. I checked the iOS forums and it seems that's an iOS9 webview bug and could be present in iOS10.

Google Chrome Javascript Link Bug

When clicking a link in google chrome the focus event fails to fire. All other browsers fire the focus event for links.
Link
I do not want to attach the event onmousedown, but onfocus.
Anyone have an idea for a workaround.
EDIT:
I would definitely consider this a bug because all other focusable elements trigger focus on click.
Even non focusable elements with a tabindex trigger focus on click in google chrome.
<div tabindex="-1" onfocus="console.log('focus')">div</div>
I can't attach to both click and focus because then onclick, other browsers would call the function twice. I can't detect this functionality because it requires user
interaction, and I won't do user agent string detection, because well its wrong.
Using this html:
Link
Is they any way to invalidate the second onmousedown call to prevent the function being called twice in non google browsers.
EDIT 2:
After some further testing <input type=radio> also fails to call focus in google chrome.
Why in the world is google chrome like this, while Opera, IE and firefox are all okay. What is crazy is that the mobile webkit browser even triggers focus on links when I tried it on my Android device.

That actually works just fine, except that the focus event isn't triggered simply by clicking on the link (try tabbing and you'll see the event firing). I don't think it's a bug, why not just safe guard and use both?

One work around you could do to avoid the double focus events from popping on the working browsers while still getting the focus event to pop on Chrome, is to on a click event check whether anything has focus on the page, and if not, then trigger the focus event.
With jQuery it could be done like this:
$('a').click(function(e){
if(!$('*:focus').length) $(this).trigger('focus');
});
example: http://jsfiddle.net/niklasvh/qmcUt/

You can use small hack:
Link