Focusable buttons

HTML

<button data-focusable="true">Button 1</button>
<button data-focusable="true">Button 2</button>
<button data-focusable="false">Button 3</button>
<button data-focusable="true">Button 4</button>
<button data-focusable="false">Button 5</button>
<button data-focusable="false">Button 6</button>
<button data-focusable="true">Button 7</button>

CSS

button:focus {
  outline: 2px solid green;
}
button[data-focusable="true"] {
  color: green;
}
button[data-focusable="false"] {
  color: red;
}

JavaScript

var focusOn = document.querySelectorAll('[data-focusable]')[0];

const setFocus = (targetName) => {
    if (targetName.getAttribute('data-focusable') === 'true') {
        targetName.focus({
            preventScroll: true
        });
        ['focusout', 'blur'].forEach((eventName) => {
            targetName.addEventListener(eventName, (event) => {
              focusOn = event.target;
                if (focusOn.getAttribute('data-focusable') === 'true') {
                    setTimeout(() => {
                        focusOn.focus({
                            preventScroll: true
                        });
                    }, 1000);
                } else {
                    event.target.focus({
                        preventScroll: true
                    });
                }
            });
        });
    }
}

setFocus(focusOn);