How to focus one button by default?-CodePudding

I'm having trouble with 2 buttons that each toggles different "div" elements. I want to focus "button 1" by default. How do I do that? Autofocus is not working.
Here's the HTML code

<div >
     <button  data-target="#block-1" autofocus>1</button>
     <button  data-target="#block-2">2</button>
 </div>

Here's the JS code

let $blocks = $(".block-card");

$(".filter-btn").on("click", (e) => {
  let $btn = $(e.target).addClass("active");
  $btn.siblings().removeClass("active");

  let selector = $btn.data("target");
  $blocks.removeClass("active").filter(selector).addClass("active");
});

CodePudding user response：

If autofocus is not working due to browser behavior or styling of other elements, you can still use Javascript to set focus.

Example:

document.querySelector(".filter-btn.active").focus({focusVisible: true});

{focusVisible: true} is optional here and it forces browser to make the focus visible.

There is a jQuery equivalent, but it seems that it does not take the optional config.

Example:

$(".filter-btn.active").focus();

Some CSS can be added to making testing easier.

Example:

button:focus {
  color: crimson;
}

button:focus-visible {
  outline: 2px solid crimson;
  border-radius: 3px;
}

When running the following example, note that the first button should be focused.

Full example: (run it in live with button below)

document.querySelector(".filter-btn.active").focus({focusVisible: true});

button:focus{ color: crimson }

button:focus-visible {
    outline: 2px solid crimson;
    border-radius: 3px;
}

<div >
     <button  data-target="#block-1">1</button>
     <button  data-target="#block-2">2</button>
 </div>

Hope this will help!