Clicking a Button Causes Me to Stop the Webpage and Click the Button Again

Inconsistent behavior amidst browsers when clicking on buttons

4th Sep 2019

I noticed browsers were inconsistent in how they handle a click on <push>. Some browsers choose to focus on the push button. Some browsers don't.

In this article, I want to testify you my examination and findings. And so, I want to talk about a way to overcome these inconsistencies.

The examination

The test is simple. We're testing what happens when nosotros click on a <button>. Specifically, we want to know if:

Does clicking focus the button?
After clicking, does keypresses originate from the push button?
After clicking, tin can nosotros tab to the adjacent element?
After clicking, can we shift-tab to the previous element?

Here's the HTML nosotros're using for the test:

          <div tabindex="0">Placeholder for testing tab</div> <button>Push button</button> <div tabindex="0">Placeholder for testing tab</div>

The <div>southward are there for us to test tabbing and shift-tabbing easily.

Here's a Codepen for you if you lot desire to follow along with the tests.

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

Testing for focus

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

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

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

Note: If you're using Chrome, you tin can use the Live Expression tool (then in that location's no demand to log document.activeElement).

Testing for keypress

Here, we can add a keydown event listener to the document. Here, we want to log what chemical 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 side by side 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 information technology goes to the previous focusable element, that chemical 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 push in Safari (12.one.1), the button does not get focus. The document gets focus instead. We know this because:

There's no focus glow on the button.
document.activeElement points to <body>.

In Safari, document gets focused when you click on a button

Since <torso> gets focus, any further keypress originates from the <body>.

Next keypress originate from the document.

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

Shift + Tab doesn't work as I expected. I expect the previous chemical element to become focus, just <button> gets focus instead.

Shift tab does not focus on the previous element. It focuses on the button instead.

Firefox (Mac)

When y'all click on a button in Firefox (Nightly 70.0a1), the button does not get focus. The certificate gets focus instead.

In Firefox, document gets focused when you click on a button

Any further keypress originates from the <body>.

Tab does not work every bit expected. When yous press Tab, Firefox focuses on the first chemical element in the document.

Shift + Tab is funny. If <button> is the first thing you clicked on, Firefox focuses on the last focusable element in the document. If yous focused on an element earlier clicking the button, Firefox focuses that element.

The problem with Firefox and buttons date back to Firefox 63 (at least). MDN has a section on this:

MDN's documentation regarding button clicks in Firefox and other browsers.

Firefox (Windows)

When yous click on a push in Firefox (Quantum 68.0.1, Windows version), the button gets focus, simply the focus glow does not testify upwards.

Buttons gets focus but the focus glow does not show up.

Further keypress originates from the <push button>.

Next keypress originate from the button.

Tab works as expected. The next item gets focus.

Shift + Tab works equally expected. The previous item gets focus.

Chrome (Mac)

When you lot click on a push in Chrome (Canary 78.0), the button gets focus. This implementation is dissimilar from Safari and Firefox.

In Chrome, the button gets focus when you click on it.

The next keypress originates from <button>. This is expected since <push> is the focused chemical element.

Next keypress originates from the button

Tab works as expected. The next element gets focus.

Shift + Tab works every bit expected. The previous element gets focus.

Previous element gets focus when you press Shift + Tab

Chrome (Windows)

When you click on a button in Chrome (Chrome 75.0), the push button gets focus.

The button gets focus when you click on it.

The next keypress originates from <button>.

Tab works equally expected. The adjacent element gets focus.

Shift + Tab works equally expected. The previous chemical element gets focus.

Edge (Windows)

When you click on a push in Edge (Edge 17), the button gets focus, only the focus ring did not announced.

The button gets focus when you click on it, but the focus ring did not appear.

The adjacent keypress originates from <button>.

Tab works as expected. The next element gets focus.

Shift + Tab works equally expected. The previous element gets focus.

Summary of the results

We tested for four things across the mutual browsers:

Does clicking focus the button?
After clicking, does keypresses originate from the button?
After clicking, can we tab to the adjacent element?
After clicking, can we shift-tab to the previous element?

Hither are the results in a table course.

Test	Safari	Firefox ()	Firefox (⊞)	Chrome ()	Chrome (⊞)	Edge (⊞)
Focused chemical element	`<body>`	`<body>`	`<button>` (but no focus glow)	`<button>`	`<button>`	`<push>` (simply no focus glow)
Adjacent Keypress from:	`<body>`	`<body>`	`<push>`	`<push button>`	`<button>`	`<button>`
Tab goes to:	Adjacent element	First element in certificate	Adjacent element	Next chemical element	Adjacent element	Next chemical element
Shift + Tab goes to:	`<button>`	Previously focused element (if whatever)	Previous Element	Previous Element	Previous Element	Previous Element

You tin can run across the inconsistencies hither. It's clear as 24-hour interval. The major inconsistencies are:

Firefox on Mac is simply weird. Everything seems wrong.
Some browsers don't focus on the button when they're clicked.
Some browsers don't include a focus glow on the button when they're clicked.

The HTML Spec doesn't land what browsers should exercise after a user clicks on a button. And then no browsers are at fault for the inconsistent behavior.

Here's a potential gear up

I think Chrome's implementation (both Mac and Windows) makes the most sense.

When you click on a push button, focus should be on the button.
Button should have a focus glow.
When you press Tab later clicking a button, the side by side element should go focus.
When you press Shift + Tab after clicking a push, the previous chemical element should become focus.

Notation: If you're the kind of person that hates the default focus style, you tin restyle the focus ring (or you tin can wait for :focus-visible to be widely supported).

There'south a quick fix if y'all want to make the other browsers behave consistently with Chrome's implementation. All you take to do is add this lawmaking at the tiptop of your JavaScript.

          document.addEventListener('click', function (event) {   if (consequence.target.matches('push button')) {     consequence.target.focus()   } })

This lawmaking focuses on the button when you click on it. This too makes sure:

The focus glow appears.
Tab goes to the side by side chemical element.
Shift-Tab goes to the previous chemical element

Of import note: Y'all want to put this code AT THE Top of your JavaScript files. It works because event listeners are chosen in the order they're declared. Focus volition always become to the push first. Y'all can so redirect focus to other elements if you want.

Important annotation #2: I have not tested this code thoroughly with all devices yet. (Simply Mac versions Safari, Firefox, and Chrome). I appreciate information technology if y'all can assist to conduct some tests. Let me know if I'm wrong in any way. Thanks.

In case you were wondering why I did these tests: I realized the inconsistent beliefs when I was writing the Keyboard department for Learn JavaScript. I did these tests because I wanted to teach my students the correct fashion to handle buttons and focus (which is a big role of accessibility!).

If yous enjoyed this article, please support me by sharing this commodity Twitter or buying me a coffee 😉. If you spot a typo, I'd appreciate if you can correct information technology on GitHub. Cheers!

hodgesherach.blogspot.com

Source: https://zellwk.com/blog/inconsistent-button-behavior/