1

I am using fancytree selectMode 3 such that the parent element also gets a checkbox and end user is aware of navigation state(508 thing). The issue I am facing with Highlight of node using Keyboard Navigation, if there are 2 or more children in a folder, the highlight color remains the same during keyboard navigation and makes it difficult to identify user is currently at which node.
Refer to screenshot below: enter image description here

Codepen link:
https://codepen.io/cksachdev/pen/YMxqGO?editors=1011

Code snippet from 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"
      });
  }
}

I have tried setting the highlight color by detecting the Keyboard left, right, up and down arrow keys, but doesn't gives the desired result. Background gets applied after visiting the node using keyboard navigation.

I have tried to find a before event, such that I can get reference to both the previous node and next node and then reset the style on previous node and apply the new style of next node.

Any suggestions.

Chetan Sachdev
  • 738
  • 1
  • 12
  • 31

1 Answers1

0

I would suggest to simply add a custom CSS rule, e.g.:

.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;
}

(Concerning Section 508: Fancytree already supports WAI-ARIA.)

mar10
  • 14,320
  • 5
  • 39
  • 64
  • Thx mar10. When selectMode is 3, the background color remains the same, hence it makes it difficult to identify user is on which node, so this need to be on hover like event. – Chetan Sachdev Apr 15 '19 at 21:46