1

I meet an issue when implementing accessibility features.

I tried to set keyboard focus on a button using the approach:

document.getElementById('123').focus()

But, it doesn't work. The element didn't get focused. Can I get some help? Thanks!

JS Fiddle: https://jsfiddle.net/dp5x7rbq/

Beauty Of Salvation In Christ
  • 13
  • 1
  • 13
kevinzf
  • 163
  • 12
  • 3
    It is working fine, add `button:focus { background: red }` as CSS and you will see the effect. – Idrizi.A Sep 09 '22 at 07:49
  • @kevinzf it seems you are missing the point. The button element gets the focus as expected but the way you want that focus to show off depends on the css rule you decide to apply explicitely. You were suggested to use `background: red` but you could use any style you prefer just changing the css properties in that rule addressed by the selector `button:focus` – Diego D Sep 09 '22 at 08:10
  • usually the focus affects the border so you could use something like this: `button:focus{ border-color: #86b7fe;outline: 0;box-shadow: 0 0 0 .15rem rgba(13,110,253,.25); }` but that's an arbitrary choice – Diego D Sep 09 '22 at 08:13
  • by the way to give some credit, if you press TAB instead of using js to give focus, it gets showed somehow even with no css rule. I didn't notice that before. Maybe this https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible could be of help? It's the first time I realize that – Diego D Sep 09 '22 at 08:18
  • And here: https://stackoverflow.com/questions/31402576/enable-focus-only-on-keyboard-use-or-tab-press I found some more info about the strange behaviour of browsers when styling elements having focus – Diego D Sep 09 '22 at 08:24

4 Answers4

1

Actually, setting focus on the button already works in your example. You can verify which element has focus by checking document.activeElement.

The confusion is about the display or styling of the button’s focus state, which usually is a focus ring.

Make focus visible

Modern browser use :focus-visible pseudo-class to style elements that have focus. That selector takes into account whether the user should see focus or not, for example because they used the keyboard to set focus.

Since you are setting focus programmatically, that browser’s styling does not apply when the button has focus. You need to style the :focus pseudo-class yourself.

#btn123:focus {
  outline: 1px dotted #212121;
  outline: 5px auto -webkit-focus-ring-color;
}

See What is the default style of the blue focus outline in Chrome?

Use a valid ID

On a side note, the value 123 for an ID is invalid:

[…] an id must contain at least one character and may not contain any space characters.

See What are valid values for the id attribute in HTML?

Andy
  • 4,783
  • 2
  • 26
  • 51
0

It is working, just add to css:

button:focus{
  color: red;
}

To see the change

deepdows
  • 138
  • 1
  • 4
0

As others mentioned, the button indeed retrieves the focus. Besides adding styling to verify this, you can also move the alert to the first button and press space or enter after pressing the right button:

<button type="button" id="123" onclick="alert()"> Find out how</button>
<button type="button" onclick="foo()"> click me to focus on left button</button>
Laurens
  • 125
  • 7
-1

You can focus on button or element using addEventListener in javascript as blow example

document.getElementById("123_id").addEventListener("focus", focusFunction);
function focusFunction(){
    //Write your script here
    console.log('Focused');
    document.getElementById("123_id").style.backgroundColor = "red";
}
<html>
    <head>
        <title>Focus Test</title>
    </head>
    <body>
        <button id="123_id">Hello Button</button>
    </body>                   
</html>
Siddharth Rathod
  • 634
  • 1
  • 7
  • 21
  • This does not at all set focus as requested in the question, but instead reacts to focus being set. – Andy Sep 09 '22 at 11:30