<h1 id="current-focus">
  <span>Current focus: </span>
  <span id="current-focus-element"></span>
</h1>

<div>
  <button id="a">
    A:focus
  </button>
  <button id="b">
    B:focus-visible
  </button>
</div>
<div>
  <button id="focus-a">Focus A</button>
  <button id="focus-b">Focus B</button>
</div>
#a:focus {
  outline: 2px solid blue;
}

#b:focus-visible {
  outline: 2px solid red;
}
  
document.getElementById('focus-a').addEventListener('click', () => {
  document.getElementById('a').focus()
})

document.getElementById('focus-b').addEventListener('click', () => {
  document.getElementById('b').focus({ focusVisible: true })
})

document.addEventListener('focus', () => {
  const currentFocus = document.activeElement
  const currentFocusElement = document.getElementById('current-focus-element')
  currentFocusElement.textContent = currentFocus.id
}, true)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.