inconsistent-behavior-among-browsers-when-clicking-on-buttons

4th Sep 2019

I noticed browsers were inconsistent in how they handle a click on

Placeholder for testing tab

The

s are there for us to test tabbing and shift-tabbing easily.

Here’s a Codepen for you if you want to follow along with the tests.

See the Pen
Button and link focus test
by Zell Liew (@zellwk)
on CodePen.

Testing for focus

We can test for focus visually. If the button gets focused, there should be the default visual glow around the button.

We can also test for focus programmatically. In JavaScript, you can get the focused element with document.activeElement. When we click a button, we can log the focused element.

const button = document.querySelector('button')
button.addEventListener('click', event => {
  console.log('Click:', document.activeElement)
})

Note: If you’re using Chrome, you can use the Live Expression tool (so there’s no need to log document.activeElement).

Testing for keypress

Here, we can add a keydown event listener to the document. Here, we want to log what element triggered the event. We can tell the element with event.target.

document.addEventListener('keydown', event => {
  console.log(`Keydown:`, event.target)
})

Testing for Tab and Shift-tab

After clicking on a button, does Tab go to the next focusable element? If it goes to the next focusable element, that element should receive a focus outline.

Likewise, does Shift Tab goes to the previous focusable element? If it goes to the previous focusable element, that element should receive a focus outline too.

I did not log document.activeElement because the focus glow is enough.

Results

Safari (Mac)

When you click on a button in Safari (12.1.1), the button does not get focus. The document gets focus instead. We know this because:

  1. There’s no focus glow on the button.
  2. document.activeElement points to .
In Safari, document gets focused when you click on a button

Since gets focus, any further keypress originates from the .

Next keypress originate from the document.

Tabbing into the next element works as expected. The next element gets focus.

Tabbing into the next element works as expected.

Shift Tab doesn’t work as I expected. I expect the previous element to get focus, but

Leave a Reply

Your email address will not be published. Required fields are marked *