Focus management в SPA

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

Основные принципы фокус-менеджмента

Фокус в DOM определяется элементом, который в данный момент готов принимать пользовательский ввод. В SPA фокус может теряться при динамическом изменении контента, что особенно критично для:

форм и интерактивных элементов,
модальных окон,
динамических списков и таблиц.

Ключевые задачи управления фокусом:

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

Организация фокуса в Backbone.View

Backbone.js строит интерфейс вокруг View, которые управляют отображением и событиями элементов DOM. Управление фокусом интегрируется через:

Events hash — для обработки клавиатурных событий.
Методы render() и remove() — для корректного восстановления фокуса при обновлении DOM.
Custom methods — для явной установки фокуса.

Пример базовой структуры:

var FormView = Backbone.View.extend({
  tagName: 'form',
  
  events: {
    'keydown input': 'handleKeyDown'
  },

  render: function() {
    this.$el.html('<input type="text" class="name"/><input type="text" class="email"/>');
    this.setInitialFocus();
    return this;
  },

  setInitialFocus: function() {
    this.$('.name').focus();
  },

  handleKeyDown: function(e) {
    if (e.key === 'Enter') {
      this.focusNextField(e.target);
    }
  },

  focusNextField: function(current) {
    var fields = this.$('input');
    var index = fields.index(current);
    if (index + 1 < fields.length) {
      fields.eq(index + 1).focus();
    }
  }
});

В этом примере:

setInitialFocus устанавливает фокус на первый элемент формы при рендеринге.
handleKeyDown обрабатывает клавишу Enter для перемещения фокуса.
Использование this.$() обеспечивает работу с DOM внутри конкретного View без глобальных селекторов.

Управление фокусом при динамическом контенте

SPA часто динамически подгружает и заменяет контент, поэтому необходимо отслеживать моменты, когда элементы появляются в DOM:

Использование колбэков после рендеринга:

render: function() {
  this.$el.html(this.template());
  this.afterRender();
  return this;
},

afterRender: function() {
  var firstInput = this.$('input').first();
  if (firstInput.length) {
    firstInput.focus();
  }
}

Интеграция с коллекциями Backbone.Collection:

var ListView = Backbone.View.extend({
  initialize: function() {
    this.listenTo(this.collection, 'add remove reset', this.render);
  },

  render: function() {
    this.$el.empty();
    this.collection.each(function(model) {
      this.$el.append('<div tabindex="0">' + model.get('name') + '</div>');
    }, this);
    this.setFocusOnFirstItem();
    return this;
  },

  setFocusOnFirstItem: function() {
    this.$('div').first().focus();
  }
});

Здесь после каждой модификации коллекции фокус автоматически перемещается на первый элемент списка.

Работа с модальными окнами

Модальные окна требуют строгого контроля фокуса, чтобы пользователь не терял ориентацию:

Trap focus — удерживание фокуса внутри модального окна.
Return focus — восстановление фокуса на элемент, с которого было открыто модальное окно.

Пример:

var ModalView = Backbone.View.extend({
  events: {
    'keydown': 'trapFocus'
  },

  open: function(triggerElement) {
    this.$el.show();
    this.triggerElement = triggerElement;
    this.$el.find('[tabindex]').first().focus();
  },

  trapFocus: function(e) {
    var focusable = this.$el.find('[tabindex]');
    var first = focusable.first()[0];
    var last = focusable.last()[0];

    if (e.key === 'Tab') {
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault();
        last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    }
  },

  close: function() {
    this.$el.hide();
    if (this.triggerElement) {
      this.triggerElement.focus();
    }
  }
});

Особенности реализации:

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

Совмещение Backbone.js и accessibility best practices

Для полной доступности SPA необходимо учитывать:

ARIA-атрибуты: aria-modal, aria-labelledby, aria-hidden.
Логика tab order: корректная последовательность элементов.
Обработка клавиатурных событий: Enter, Esc, Tab для навигации.

Backbone.js позволяет встроить эти практики через методы View и события модели, обеспечивая реактивное обновление интерфейса и предсказуемое управление фокусом.