focus to span

HTML

<div>
    <span id="foo" role="checkbox" class="span1" aria-checked="true" tabindex="0">
        <img src="checked.gif" role="presentation" alt="" />
        Добавить декоративную корзину с фруктами
    </span>
</div>
<div>
    <span id="bar" class="span2" role="checkbox" aria-checked="true" >
        <img src="checked.gif" role="presentation" alt="" />
        Добавить поющую телеграмму
    </span>
</div>
<div>
    <span role="checkbox" aria-checked="false" tabindex="0">
        <img src="unchecked.gif" role="presentation" alt="" />
        С предоплатой
    </span>
</div>
<button id="btn-1">Focus to "foo"</button>
<button id="btn-2">Focus to "bar"</button>

JavaScript

const $foo = document.getElementById('foo');
const $bar = document.getElementById('bar');

const $btn1 = document.getElementById('btn-1');
const $btn2 = document.getElementById('btn-2');

$btn1.addEventListener('click', () => {
	$foo.focus();
});

$btn2.addEventListener('click', () => {
	$bar.focus();
});