Javascript конфликтует с функциональностью Bootstrap

Question

Я создаю сайт, содержащий раздел вкладки Bootstrap Nav. Проблема заключается в том, что моя команда разработчиков реализует JavaScript-код доступности, который конфликтует с Bootstrap. Я прикрепляю ссылку на код, показывающий проблему. (Смотри ниже). Которые в основном навигационные вкладки просто не работают. Событие клика не происходит.

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

Сценарий предназначен для того, чтобы позволить посетителям без прочтения использовать считыватели экрана (т. Е. JAWS) для отображения меню и элементов экрана на основе того, что JAWS сообщает им, читая ARIAS и проводя через ROLES.

Javascript выглядит следующим образом:

$(function(){ 
    $('.nav').setup_navigation(); 
}); 
var keyCodeMap = { 
    48:"0", 49:"1", 50:"2", 51:"3", 52:"4", 53:"5", 54:"6", 55:"7", 56:"8", 57:"9", 59:";", 
65:"a", 66:"b", 67:"c", 68:"d", 69:"e", 70:"f", 71:"g", 72:"h", 73:"i", 74:"j", 75:"k", 76:"l", 
77:"m", 78:"n", 79:"o", 80:"p", 81:"q", 82:"r", 83:"s", 84:"t", 85:"u", 86:"v", 87:"w", 88:"x", 89:"y", 90:"z", 
96:"0", 97:"1", 98:"2", 99:"3", 100:"4", 101:"5", 102:"6", 103:"7", 104:"8", 105:"9" 
} 


$.fn.setup_navigation = function(settings) { 
    settings = jQuery.extend({ 
     menuHoverClass: 'main-menu-item', 
    }, settings 
); 

// Add ARIA role to menubar and menu items 
$(this).attr('role', 'menubar').find('li').attr('role', 'menuitem'); 
var top_level_links = $(this).find('> li > a'); 

//// Set tabIndex to -1 so that top_level_links can't receive focus until menu is open 
//$(top_level_links).next('ul') 
//.attr({ 'aria-hidden': 'true', 'role': 'menu' }) 
//.find('a');  


// Adding aria-haspopup for appropriate items 

$(top_level_links).each(function(){ 
    if($(this).next('ul').length > 0) 
     $(this).parent('li').attr('aria-haspopup', 'true'); 
}); 
$(top_level_links).each(function(){ 
    if($(this).next('ul').length > 0) 
     $(this).parent('ul').attr('aria-haspopup', 'true'); 
}); 


$(top_level_links).hover(function(){ 
    $(this).closest('ul') 
     .attr('aria-hidden', 'false') 
     .find('.'+settings.menuHoverClass) 
     .attr('aria-hidden', 'true') 
     .removeClass(settings.menuHoverClass) 
     .find('a') 
     //.attr('tabIndex',-1); 


$(this).next('ul') 
    .attr('aria-hidden', 'false') 
    .addClass(settings.menuHoverClass) 
    .find('a').attr('tabIndex',0); 
}); 


$(top_level_links).focus(function(){ 
    $(this).closest('ul') 
     .attr('aria-hidden', 'false') 
     .find('.'+settings.menuHoverClass) 
     .attr('aria-hidden', 'true') 
     .removeClass(settings.menuHoverClass) 
     .find('a') 
     //.attr('tabIndex',1); 
    $(this).next('ul') 
     .attr('aria-hidden', 'false') 
     .addClass(settings.menuHoverClass) 
     .find('a').attr('tabIndex',0); 
}); 


// Bind arrow keys for navigation 
$(top_level_links).keydown(function(e){ 
    if(e.keyCode == 37) { 
     e.preventDefault(); 
     // This is the first item 
     if($(this).parent('li').prev('li').length == 0) { 
      $(this).parents('ul').find('> li').last().find('a').first().focus(); 
     } else { 
      $(this).parent('li').prev('li').find('a').first().focus(); 
     } 
    } else if(e.keyCode == 38) { 
     e.preventDefault(); 
     if($(this).parent('li').find('ul').length > 0) { 
      $(this).parent('li').find('ul') 
      .attr('aria-hidden', 'false') 
      .addClass(settings.menuHoverClass) 
      .find('a').attr('tabIndex',0) 
      .last().focus(); 
     } 
    } else if(e.keyCode == 39) { 
     e.preventDefault(); 
     // This is the last item 
     if($(this).parent('li').next('li').length == 0) { 
      $(this).parents('ul').find('> li').first().find('a').first().focus(); 
     } else { 
      $(this).parent('li').next('li').find('a').first().focus(); 
     } 
    } else if(e.keyCode == 40) { 
     e.preventDefault(); 
     if($(this).parent('li').find('ul').length > 0) { 
      $(this).parent('li').find('ul') 
      .attr('aria-hidden', 'false') 
      .addClass(settings.menuHoverClass) 
      .find('a').attr('tabIndex',0) 
      .first().focus(); 
     } 
    } else if(e.keyCode == 13 || e.keyCode == 32) { 
    // If submenu is hidden, open it 
    //e.preventDefault(); 
    $(this).parent('li').find('ul[aria-hidden=true]') 
     .attr('aria-hidden', 'false') 
     .addClass(settings.menuHoverClass) 
     .find('a').attr('tabIndex',0) 
     .first().focus(); 
    } else if(e.keyCode == 27) { 
     e.preventDefault(); 
     $('.'+settings.menuHoverClass) 
     .attr('aria-hidden', 'true') 
     .removeClass(settings.menuHoverClass) 
     .find('a') 
     //.attr('tabIndex',-1); 
    } else { 
     $(this).parent('li').find('ul[aria-hidden=false] a').each(function(){ 
      if($(this).text().substring(0,1).toLowerCase() == keyCodeMap[e.keyCode]) { 
      $(this).focus(); 
      return false; 
      } 
     }); 
    } 
}); 

var links = $(top_level_links).parent('li').find('ul').find('a'); 

$(links).keydown(function(e){ 
    if(e.keyCode == 38) { 
     e.preventDefault(); 
     // This is the first item 
     if($(this).parent('li').prev('li').length == 0) { 
      $(this).parents('ul').parents('li').find('a').first().focus(); 
     } else { 
      $(this).parent('li').prev('li').find('a').first().focus(); 
     } 
    } else if(e.keyCode == 40) { 
     e.preventDefault(); 
     if($(this).parent('li').next('li').length == 0) { 
      $(this).parents('ul').parents('li').find('a').first().focus(); 
     } else { 
      $(this).parent('li').next('li').find('a').first().focus(); 
     } 
    } else if(e.keyCode == 27 || e.keyCode == 37) { 
     e.preventDefault(); 
     $(this) 
     .parents('ul').first() 
     .prev('a').focus() 
     .parents('ul').first().find('.'+settings.menuHoverClass) 
     .attr('aria-hidden', 'true') 
     .removeClass(settings.menuHoverClass) 
     .find('a') 
     //.attr('tabIndex',-1); 
    } else if(e.keyCode == 32) { 
     e.preventDefault(); 
     window.location = $(this).attr('href'); 
    } else { 
     var found = false; 
     $(this).parent('li').nextAll('li').find('a').each(function(){ 
      if($(this).text().substring(0,1).toLowerCase() == keyCodeMap[e.keyCode]) { 
       $(this).focus(); 
       found = true; 
       return false; 
      } 
     }); 

     if(!found) { 
      $(this).parent('li').prevAll('li').find('a').each(function(){ 
       if($(this).text().substring(0,1).toLowerCase() == keyCodeMap[e.keyCode]) { 
        $(this).focus(); 
        return false; 
       } 
      }); 
     } 
    } 
}); 


//Hide menu if click or focus occurs outside of navigation 
$(this).find('a').last().keydown(function(e){ 
    if(e.keyCode == 9) { 
     // If the user tabs out of the navigation hide all menus 
     $('.'+settings.menuHoverClass) 
     .attr('aria-hidden', 'true') 
     .removeClass(settings.menuHoverClass) 
     .find('a') 
     //.attr('tabIndex',-1); 
    } 
}); 


$(document).click(function() { 
    $('.' + settings.menuHoverClass).attr('aria-hidden', 'true').removeClass(settings.menuHoverClass).find('a').attr('tabIndex', 0); 
}); 

$(this).click(function(e){ 
    e.stopPropagation(); 
}); 
} 

HTML, находится в ссылке пера прикрепленной ради не загромождать этот вопрос. Кроме того, вы сможете проверить его там лучше.

CODEPEN DEMO HERE

P.S. Кроме того, я использую небольшой аккордеон Bootstrap в одной из вкладок. (Не показано в демонстрации для простоты). Поэтому, если вы думаете об исправлении, которое может глобально исправить всю функциональность Bootstrap, а не только navtabs, я буду признателен еще больше, но я этого не ожидаю.

Заранее спасибо

Answer 1

Проблема с этим обработчиком событий в самом конце кода в CodePen:

$(this).click(function(e){ 
    e.stopPropagation(); 
}); 

Это явным образом предотвращая щелчки на вкладках меню от барботирования до любой другой обработчик события. Вероятно, код закладки Bootstrap связывает свои обработчики событий в верхней части DOM.

Непонятно, каково намерение этого кода; он не комментируется, и это не очевидно, если посмотреть на остальную часть кода. Это может быть просто бесплатное дополнение, и в этом случае оно ошибочно, учитывая природу этого кода.