Cannot focus button using tab key navigation on Safari

Question

can you please tell me why focus not going to button or not indicating that focus is on button while using TABS in safari browser.

In chrome it is working fine. the problem is on SAFARI browser.

here is my code https://codesandbox.io/s/charming-paper-k7bg3?file=/src/styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

/* .js-focus-visible :focus:not(.focus-visible) {
  outline: 0;
} */

button:focus,
a:focus {
  outline-offset: 2px;
  outline-width: 2px !important;
  outline-style: dotted !important;
  outline-color: currentColor;
}

.App button:focus,
.App a:focus {
  outline: none !important;
}
.App button:focus-visible,
.App a:focus-visible {
  outline-offset: 2px;
  outline-width: 2px !important;
  outline-style: dotted !important;
  outline-color: currentColor;
}

.js-focus-visible :focus:not(.focus-visible) {
  outline: none !important;
}

/*
  Optionally: Define a strong focus indicator for keyboard focus.
  If you choose to skip this step then the browser's default focus
  indicator will be displayed instead.
*/
.js-focus-visible .focus-visible:focus-visible {
  outline-offset: 2px;
  outline-width: 2px !important;
  outline-style: dotted !important;
  outline-color: currentColor;
}

Set to reproduce.

Focus to First input field then press TAB two times focus should go to button . In chrome it is going .But is safari It is not going why ?

I have already did below answer not working ?

Does this answer your question? [Safari ignoring tabindex](https://stackoverflow.com/questions/1848390/safari-ignoring-tabindex) — Martin, Jun 09 '21 at 10:38
no https://codesandbox.io/s/charming-paper-k7bg3?file=/src/styles.css — user944513, Jun 09 '21 at 10:39
@Martin i already did the given steps .. are you ablw to see focus o button — user944513, Jun 09 '21 at 10:40
And your elements certainly all have a non-negative tab-index attribute set? — Martin, Jun 10 '21 at 06:50

score 8 · Answer 1 · edited Nov 29 '22 at 12:46

8

Because Mac (and Safari) both default to only allowing you to tab into text boxes and lists.

However there is an accessibility setting to enable Full Keyboard Access.

macOS Ventura

This is under System Settings > Accessibility > Keyboard (under the Motor heading).

Older macOS versions

Most likely Catalina or before:

Note for posterity that Safari > Settings > Advanced (including in Ventura) has a Press Tab to highlight each item on a webpage, though that is not required to make the button in the provided code sandbox selectable.

Source: https://www.scottohara.me/blog/2014/10/03/link-tabbing-firefox-osx.html

edited Nov 29 '22 at 12:46

pzrq

1,626
1
18
24

answered Jun 09 '21 at 10:00

dave

62,300
5
72
93

I did this steps are you able to see `buttons` focus – user944513 Jun 09 '21 at 10:03
I have already did above steps .but not highlighing – user944513 Jun 09 '21 at 10:04
something wrong in CSS . most important thing is I am not to change this thing `button:focus, a:focus { outline-offset: 2px; outline-width: 2px !important; outline-style: dotted !important; outline-color: currentColor; }` I can override but changed – user944513 Jun 09 '21 at 10:07

score 0 · Answer 2 · answered Jun 09 '21 at 09:57

0

Safari has not enabled tabindex by default.

See this thread: Safari ignoring tabindex

answered Jun 09 '21 at 09:57

Habibullah Rezaie

197
1
7

Cannot focus button using tab key navigation on Safari

2 Answers2

macOS Ventura

Older macOS versions

Linked