Обработка фокуса клавиатуры при табуляции на динамически заполняемом контенте

Содержание

Вопрос или проблема
Ответ или решение
Объяснение:
Заключение:

Вопрос или проблема

У меня есть список блог-постов с кнопкой “Загрузить еще”. Для улучшения доступности я хотел бы изменить позиционирование клавиатурного фокуса после добавления новых постов, чтобы вместо того, чтобы пропускать элементы ниже списка постов, при нажатии клавиши Tab после загрузки дополнительных постов фокус перемещался на первый пост в новых загруженных постах.

Я думал, что можно получить последний article в списке, когда нажата кнопка “Загрузить еще”, а затем установить фокус на ссылку внутри него после загрузки дополнительных постов. Таким образом, когда пользователь снова нажимает Tab, фокус переместится на следующий пост в списке (четвертый пост в моем примере). Это не работает, я предполагаю, потому что весь HTML контейнера постов заменяется. Есть ли способ это сделать, учитывая, что весь HTML заполняется динамически каждый раз, когда нажимается кнопка “Загрузить еще”?

let additionalPosts = `
  <article>
    <a href="#">
      <h3>Четвертый пост</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </a>
  </article>
  <article>
    <a href="#">
      <h3>Пятый пост</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </a>
  </article>
  <article>
    <a href="#">
      <h3>Шестой пост</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </a>
  </article>
`;


$(function() {
  $('.load-more').click(function() {
    const $lastPost = $('.post-container article').last();
    //console.log($lastPost);
    $('.post-container').html($('.post-container').html() + additionalPosts);
    $('a', $lastPost).focus();
    $(this).hide();
  });
});

.post-container {
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
  margin-bottom:3rem;
}

article {
  max-width:33%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<h1>Список постов</h1>
<div class="post-container">
  <article>
    <a href="#">
      <h3>Первый пост</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </a>
  </article>
  <article>
    <a href="#">
      <h3>Второй пост</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </a>
  </article>
  <article>
    <a href="#">
      <h3>Третий пост</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </a>
  </article>
</div>

<button class="load-more" href="#">Загрузить еще</button>

<div>
  <h3>Некоторые дополнительные ссылки</h3>
  <a href="#">Еще одна ссылка</a>
  <a href="#">Еще одна ссылка</a>
  <a href="#">Еще одна ссылка</a>
</div>

Ответ или решение

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

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

Сохраните текущее количество постов перед загрузкой новых.
Добавьте новые посты и затем установите фокус на первый новый пост.

Вот исправленный код с объяснениями:

let additionalPosts = `
  <article>
    <a href="#">
      <h3>Четвёртый пост</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </a>
  </article>
  <article>
    <a href="#">
      <h3>Пятый пост</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </a>
  </article>
  <article>
    <a href="#">
      <h3>Шестой пост</h3>
      <p>Lorem ipsum dolor sit amet</p>
    </a>
  </article>
`;

$(function() {
  $('.load-more').click(function() {
    // Получаем общее количество постов до загрузки новых
    const initialPostCount = $('.post-container article').length;

    // Загрузка новых постов
    $('.post-container').append(additionalPosts);

    // Фокус на первый новый пост
    const $newPost = $('.post-container article').eq(initialPostCount);
    $('a', $newPost).focus();

    // Скрываем кнопку "Загрузить больше"
    $(this).hide();
  });
});

Объяснение:

Сохранение исходного количества постов: const initialPostCount = $('.post-container article').length; сохраняет текущее количество статей в контейнере до добавления новых. Это необходимо для того, чтобы правильно идентифицировать новые посты.
Добавление новых постов: $('.post-container').append(additionalPosts); добавляет новые посты в контейнер вместо замены всего HTML, что позволяет сохранить предыдущие посты.
Установка фокуса на первый новый пост: const $newPost = $('.post-container article').eq(initialPostCount); выбирает первый из только что добавленных постов, и затем $('a', $newPost).focus(); устанавливает фокус на ссылку этого поста.

Заключение:

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