When you programmatically focus a <button> inside another button’s click handler (triggered by mouse click), the second button receives focus logically, but its visual focus indicator is not rendered, until the user presses a key like space or tab.

Keyboard activation (Space/Enter) triggers focus navigation rules that do show the focus ring.

That’s why pressing Space on "Focus on first button" will programmatically focus the first button and show its outline.

You can simulate a keyboard-like focus indication by temporarily adding a CSS class:

JS:
elementSet.buttonFocusOnButton.onclick = () => {
elementSet.buttonToFocusOn.focus();
elementSet.buttonToFocusOn.classList.add('force-focus');
setTimeout(() => {
elementSet.buttonToFocusOn.classList.remove('force-focus');
}, 200); // remove if you want persistent highlight
};
CSS:
button.force-focus {
outline: 2px solid blue; /* or match system highlight */
}