либо он имел в виду hotkeys/shortcuts для навигации

это будет многостраничное приложение, и на каждой страничке будет свой интерфейс для пользователя с селектами и инпутами и не везде они похожи((
таб-индексами пробовал - как-то все сложно получается

Ну это вообще звучит просто. document add event listener keydown и вызов нужных функций

Что именно сложно?

как бы да,
но что -то он уж очень большой получается и мног ифов, мне это не нравится

Я не очень понял, что нужно)

упростить ))

Упростить что? Какой кейс? Навигация по странице по элементам должна быть почти бесплатно

Навигация между страницами по шорткату – смотря что, если это вкладки, то какой-то шорткат, который включает следующую вкладку, я дальше могу придумывать, что у вас в продукте)

может быть много разных кейсов. например, при открытой модалке ты захочешь дизейблить дефолтные хоткеи и создавать новые, специфичные именно для модалки. поэтому имхо лучше все таки написать/заюзать хелпер для этого, нежели постоянно лепить document add event listener

Может быть) Поэтому обычно проясняют задачу перед тем как предложить решение)

я  начинающий разработчик, по этому прошу  снисхождения))
в общем задача такая:
есть панель навигации , содержит 8 елементов (ссылки на страницы)
на каждой странице свой интерфейс (могут быть списки, select-ы, input-ы) , каждая страница может состоять из 2-х (минимум) блоков в которых есть свои списки/селекты/инпуты
осуществлять навигацию нужно при помощи стрелок вверх/низ право\лево esc enter

так и сделал

всмысле: добавил один обработчик событий, который слушает клавиши и в зависимости от того в каком блоке находистя текущий фокус, обрабатывает нужную логику.
но пртиложение только пишется а количество ифов, в этом слушателе, уже вызывает легкий конфуз((

кто-то подскажет пожалуйста, использую react-leaflet карту, у меня есть список с адресами, по нажатию на адрес у меня должно было создавать маркер и переносить центр карты на него.

// Карта
<MapContainer center={[lat, lon]} zoom={16} }}>
        <TileLayer attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
        <Marker position={[lat, lon]} />
</MapContainer>
// Список адресов
{dataAddress.map((value, index) => {
      if (value) { 
          return <li ><button onClick={() => this.addMarker(value.NAME_STREET + ' ' + value.House)} >{value.NAME_STREET + ', ' + value.House}</button></li>}
})}
// Создание маркера по нажатию на кнопку с адресом
addMarker = async (address) => {
        try {
            const response = await api.get(`https://nominatim.openstreetmap.org/?addressdetails=1&q=${address}, Київ&format=json&limit=1`);
            if (response.data) {
                this.setState({ lat: response.data[0].lat, lon: response.data[0].lon }); }
        } catch (error) {
            console.log(error)
        }
    }

до обновления пакета работало все ок, после обновления lat и lon по нажатию меняют свои координаты, маркеры создаются, но центр карты не переносится на маркер, почему так? в доке все так как я и сделал

я точно не помню как, но подобную задачу решил при помощи map.flyTo(mapCenter, 14)

Вверх вниз должно делать тоже самое что tab/shift tab? if so, нужно иметь список tabbable элементов, текущий элемент и делать фокус следующему. Можно посмотреть в ally.js

Что должны делать esc enter? С ними пока непонятно какие проблемы и откуда ифы

по esc выполнять отмену ввода или возврат на панель навигации, а enter подтверждает ввод или выбор стр./блока

> подтверждает ввод или выбор стр./блока

звучит как то что по умолчанию делает сабмит формы или нажатие ссылки/кнопки, ничего делать не надо.

На ESC подписываться в конкретных местах и делать что нужно (например фокус панели навигации)

а flyTo есть в react-leaflet?