Блог

Я использую fancytree selectMode 3 таким образом, чтобы родительский элемент также получал флажок, а конечный пользователь знал о состоянии навигации (508 вещь). Проблема, с которой я сталкиваюсь при выделении узла с помощью навигации по клавиатуре: если в папке есть 2 или более дочерних элемента, цвет выделения остается неизменным во время навигации по клавиатуре и затрудняет определение того, на каком узле в данный момент находится пользователь.
См. скриншот ниже:

Ссылка на Codepen:
https://codepen.io/cksachdev/pen/YMxqGO?editors=1011

Фрагмент кода из codepen:

 keydown: function(event, data) {
    switch (event.which) {
      case 32: // [space]
        data.node.toggleSelected();
        break;
      case 13: // [enter]
        data.node.toggleSelected();
        break;
      case 40:
      case 38:
      case 37:
      case 39:
        // Change the background to show a different highlight
        // highlightNode(data);
        break;
    }
  }
});

function highlightNode(data) {
  var node = data.node;
  if (node.data) {
    var $span = jQuery(node.span);
    $span
      .find("span.fancytree-title")
      .text(node.title)
      .css({
        background: "red"
      });
  }
}
  

Я попытался установить цвет выделения, определив клавиши со стрелками влево, вправо, вверх и вниз на клавиатуре, но не дает желаемого результата. Фон применяется после посещения узла с помощью навигации с клавиатуры.

Я попытался найти событие before, чтобы я мог получить ссылку как на предыдущий узел, так и на следующий узел, а затем сбросить стиль на предыдущем узле и применить новый стиль следующего узла.

Любые предложения.

Я бы предложил просто добавить пользовательское правило CSS, например:

 .fancytree-plain span.fancytree-active span.fancytree-title,
.fancytree-plain.fancytree-treefocus.fancytree-container span.fancytree-active pan.fancytree-title{
    background-color: #0d0;
    border-color: #080;
}
  

(Что касается раздела 508: Fancytree уже поддерживает WAI-ARIA.)