nav-right у CSS — застарілий перехід фокуса праворуч

HTML

<div class="pad">
    <button id="b1">Кнопка 1</button>
    <button id="b2">Кнопка 2</button>
    <button id="b3">Кнопка 3</button>
    <button id="b4">Кнопка 4</button>
</div>

CSS

.pad {
    position: relative;
    height: 200px;
}

button {
    position: absolute;
}

button#b1 { top: 10%; left: 25%; nav-index: 1; nav-right: #b2; nav-left: #b4; nav-down: #b2; nav-up: #b4; }
button#b2 { top: 40%; left: 50%; nav-index: 2; nav-right: #b3; nav-left: #b1; nav-down: #b3; nav-up: #b1; }
button#b3 { top: 70%; left: 25%; nav-index: 3; nav-right: #b4; nav-left: #b2; nav-down: #b4; nav-up: #b2; }
button#b4 { top: 40%; left: 0;   nav-index: 4; nav-right: #b1; nav-left: #b3; nav-down: #b1; nav-up: #b3; }

HTML

<h4 class="cap">1. Як це мало б працювати — і не працює</h4>
<div class="bar dead">
    <button id="d1">Один</button><button id="d2">Два</button><button id="d3">Три</button>
</div>
<p class="note">Кнопкам задано <code>nav-right</code> і <code>nav-left</code>.
    Клацніть «Один» і натисніть стрілку вправо — фокус не зрушить.</p>

<h4 class="cap">2. Те саме на рухомому tabindex</h4>
<div class="bar live" id="live" role="toolbar">
    <button tabindex="0">Один</button><button tabindex="-1">Два</button><button tabindex="-1">Три</button>
</div>
<p class="note" id="stan">Клацніть «Один» і тисніть ← →.</p>

<table id="report">
    <thead><tr><th>оголошення</th><th>переглядач приймає?</th></tr></thead>
    <tbody></tbody>
</table>

CSS

.bar {
    display: flex;
    gap: 8px;
    max-width: 560px;
    margin-bottom: 6px;
    padding: 10px 14px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.bar button {
    padding: 6px 14px;
    border: 1px solid #b9c6d8;
    border-radius: 4px;
    background: #fff;
    font: inherit;
}

.bar button:focus-visible,
.bar button:focus {
    outline: 3px solid #3a9a4f;
    outline-offset: 2px;
}

/* ці чотири рядки не роблять НІЧОГО — вони тут як експонат */
.dead #d1 { nav-right: #d2; nav-left: #d3; }
.dead #d2 { nav-right: #d3; nav-left: #d1; }
.dead #d3 { nav-right: #d1; nav-left: #d2; }

.dead {
    border-color: #d64545;
    background: #fdeeee;
}

.live {
    border-color: #3a9a4f;
    background: #edf9ef;
}

table {
    margin-top: 14px;
    border-collapse: collapse;
    font-size: .88rem;
}

th,
td {
    padding: 4px 9px;
    border: 1px solid #b9c6d8;
    text-align: left;
}

th {
    background: #eef4ff;
}

.cap {
    margin: 22px 0 8px;
    font-size: 1rem;
    color: #5a6472;
}

.note {
    max-width: 560px;
    color: #5a6472;
    font-size: .9em;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
}

JS

// 1. Чи приймає переглядач родину nav-* узагалі
const PEREVIRKY = [
    ['nav-right: #b2', CSS.supports('nav-right', '#b2')],
    ['nav-left: #b2', CSS.supports('nav-left', '#b2')],
    ['nav-up: #b2', CSS.supports('nav-up', '#b2')],
    ['nav-down: #b2', CSS.supports('nav-down', '#b2')],
    ['nav-index: 1', CSS.supports('nav-index', '1')],
    ['spatial-navigation-contain: contain', CSS.supports('spatial-navigation-contain', 'contain')],
];

const tbody = document.querySelector('#report tbody');
for (const [zapys, ok] of PEREVIRKY) {
    const row = tbody.insertRow();
    row.insertCell().textContent = zapys;
    row.insertCell().textContent = ok ? 'так' : 'ні';
    console.log(zapys, '->', ok); // → ні для всіх шести
}

// навіть присвоєння скриптом не лишає сліду
const probnyj = document.createElement('div');
probnyj.style.setProperty('nav-right', '#d2');
console.log('після setProperty атрибут style =', probnyj.getAttribute('style')); // → null

// 2. Робоча заміна: рухомий tabindex + обробка стрілок
const panel = document.getElementById('live');
const knopky = [...panel.querySelectorAll('button')];
const stan = document.getElementById('stan');

panel.addEventListener('keydown', (e) => {
    const krok = e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0;
    if (krok === 0) {
        return;
    }
    e.preventDefault(); // ⚠️ інакше стрілка ще й прогорне сторінку

    const zaraz = knopky.indexOf(document.activeElement);
    const nastupna = (zaraz + krok + knopky.length) % knopky.length;

    knopky.forEach((b, i) => { b.tabIndex = i === nastupna ? 0 : -1; });
    knopky[nastupna].focus();

    stan.textContent = 'Фокус на кнопці «' + knopky[nastupna].textContent + '»';
    console.log('стрілка', e.key, '-> фокус на', knopky[nastupna].textContent);
});

HTML

<p>Увага! Ця властивість підтримується лише браузером Opera 11.5-12, в усіх інших браузерах (навіть пізніших версіях Opera) вона не працює!</p>

<hr>

<div class="wrapper">
  <button id="b1">Button 1</button>
  <button id="b2">Button 2</button>
  <button id="b3">Button 3</button>
  <button id="b4">Button 4</button>
</div>

CSS

body {
  line-height: 1.5;
  font-size: 18px;
  color: #444;
  font-family: sans-serif;
}

button {
    position: absolute;
}

button#b1 {
    top: 25%; left: 45%;
    nav-index: 1;
    nav-right: #b2; nav-left: #b4;
    nav-down: #b2; nav-up: #b4;
}

button#b2 {
    top: 45%; left: 75%;
    nav-index: 2;
    nav-right: #b3; nav-left: #b1;
    nav-down: #b3; nav-up: #b1;
}

button#b3 {
    top: 75%; left: 45%;
    nav-index: 3;
    nav-right: #b4; nav-left: #b2;
    nav-down: #b4; nav-up: #b2;
}

button#b4 {
    top: 45%; left: 15%;
    nav-index: 4;
    nav-right: #b1; nav-left: #b3;
    nav-down: #b1; nav-up: #b3;
}