CODEWITHSUNDEEP
htmlfocusaccessibilitytabindex
Jordan H
Jordan H

Reputation: 55675

Don't focus div with tabindex when user clicked element

I added tabindex="0" to add the ability for users to tab to this div and use the keyboard to interact with it. Upon click or hitting enter/space when it's active, a popup div is presented. The focus style it applies to the div upon hitting tab is fine, but I noticed when users click on the div to activate it, the focus style is applied to it at that time as well. If they hold the mouse down the focus style is applied to it.

How can I only provide a visual focus for this div when the user tabbed to it, but don't show the focus when the user clicked on it?

I am currently removing focus via .blur() when it's activated but there is still a flash of this focus style and it's always visible while the user is holding the mouse down.

A similar interface that exhibits the desired behavior is the Pages app on iCloud.com. You can tab to focus the different icons in the toolbar, then when you tab to your name and hit return/space, a popup appears and the focus on your name is removed. At that point the name text color changes to a darker gray. If you clicked on your name instead of using the keyboard, you never see the focus that is applied to your name, you only see the text color change when the popup is presented.

Upvotes: 2

Views: 5266

Answers (3)

Gadmer
Gadmer

Reputation: 71

I have used the focus-visible css selector to apply different styles for keyboard focus and mouse click.

The way I implemented it is like this:

.your-element's-classname:focus:not(:focus-visible) {  outline: none; }

When you focus it with the keyboard you will see the browser's focus styling or the custom styling you have made for your element, and when you click it you will see no styling because I have applied outline:none which removes the outline created by the browser's focus styling.

You can find more information in Mozilla's focus-visible docs and Chromium's browser focus article.

Upvotes: 1

Martin Borisov
Martin Borisov

Reputation: 11

A custom control, such as a custom element button, can use :focus-visible to selectively apply a focus indicator only on keyboard-focus.

:focus-visible is what you are looking for

Upvotes: 1

unobf
unobf

Reputation: 7244

For focusable elements, you should always use tabindex="0" (See "Keyboard Navigation Between Components (The Tab Sequence)") so that the focus happens in the correct DOM order - otherwise the tabindex itself can lead to additional usability/accessibility problems.

If you want it to be focusable, then you definitely want the focus outline to appear when the user clicks it too because click events can be triggered by assistive technology that acts like a keyboard and you want sighted users to be able to see where they are at all times.

One solution is to use outline: 0 for the :focus and :active pseudo-classes and then use your own background images to present the different looks you want.

A second solution, which should only be used in the case of a popup that does not have a visible close button, but is dismissed by clicking outside of the popup or by pressing a keyboard command, is to detect the use of the mouse and then blur the element so as to remove the focus outline.

Upvotes: 1

Related Questions