Jaco Skin Extra Javascript

Accessibility Javascript

%STARTATTACH{"jsAccessibility.js" comment="Saved on %DATE%" }%
jQuery(function($) {
  // Add aria-current attribute to current page (last) in breadcrumbs.
  $('nav a.foswikiCurrentTopicLink').attr('aria-current', 'true');
  $('div.natWebMenuContents > ul > li.hasSubMenu > a').on( 'focus', function() {
     console.log('menu has focus');
     $( this ).attr('aria-expanded','true');;
  });
  $('div.natWebMenuContents > ul > li.hasSubMenu > a').on( 'focusout', function() {
     console.log('menu lost focus');
     $( this ).attr('aria-expanded','false');
  });
  $('.natWebMenu a').attr('tabindex','0').attr('role','link');
  // Hide menus with esc key
  $(document).keyup(function(e) {
    if ( e.keyCode == 27 || e.keyCode == 37 ) { // escape or left key
      //  console.log('Esc key pressed');
        var element = $('div.natWebMenuContents ul li.hasSubMenu ul'),
            menuElement = $('div.natWebMenuContents ul li.hasSubMenu');       
        if (element.is(':visible')) {
          //  console.log('menu item open');
            element.hide();
            menuElement.attr('aria-expanded', 'false');
        }
    }
  });
  // natPanelToggle states
  $('div.natUserAction.natPanelToggle a').attr("aria-label", "Toggle content").attr("aria-expanded", "false");
  $('div.natUserAction.natPanelToggle a').click( function() {
    if ( $( this ).parent('div.natPanelToggle').hasClass( "open" ) ) {
      $(this).attr("aria-expanded", "false");
    } else {
      $(this).attr("aria-expanded", "true");
      window.setTimeout(function (){$('input#username').focus(); }, 500); 
    }
  });
  // Hide links inside twisty elements having href="#"
  $('div.twistyPlugin a[href="#"]').prop("href", "javascript:void(0)").attr("aria-label", "Toggle content");
  // Add aria-expanded to Twisty elements - with buttons
  $("div.twistyPlugin span[style*='display:none'] a.responsiveText").attr("aria-expanded", "true");
  $("div.twistyPlugin span[style*='display:inline'] a.responsiveText, div.twistyPlugin span[style*='display:block'] a.responsiveText, div.twistyPlugin span[style=''] a.responsiveText").attr("aria-expanded", "false");
  // Add aria-expanded to Twisty elements - without BUTTON
  $("div.twistyPlugin span[style*='display:none'][class~='twistyTrigger']:not('.twistyStartShow') > a").attr("aria-expanded", "true");
  $("div.twistyPlugin span.twistyTrigger[style*='display: inline']:not('.twistyStartShow') > a, div.twistyPlugin span.twistyTrigger[style*='display: block']:not('.twistyStartShow'), div.twistyPlugin span.twistyTrigger[style='']:not('.twistyStartShow') > a").attr("aria-expanded", "false");
  $("div.twistyPlugin span[style*='display:none'][class~='twistyStartShow'] > a").attr("aria-expanded", "false");
  $("div.twistyPlugin span[style*='display:inline'][class~='twistyStartShow'] > a, div.twistyPlugin span[style*='display:block'][class~='twistyStartShow'] > a, div.twistyPlugin span[style=''][class~='twistyStartShow'] > a").attr("aria-expanded", "true");
   // Hide extra links in twisties with buttons from tab order
  $("div.twistyPlugin span.twistyTrigger a.jqInitedButton").siblings('a').css('display','none'); 
  // Trigger accept cookie on enter key
  $('#body').on('keyup', function (e) {
    var key = e.which;
    if(key == 13 && $('div.natCookieInfo').length) {
        // console.log("Enter");
        $('#natCookieInfoOK').click();
        return false;
    } else if (key == 13) {
        $('div.natTopRightContents div.natUserAction a').click();
        return false;
    }    
   });
   $('a#loginBtn').click( function() { 
     // console.log('login buttin clicked'); 
       window.setTimeout(function (){$('input#username').focus(); }, 500);
   }); 
   $('a.natScrollTop').click( function() {
      window.setTimeout(function (){$('#PageTop').focus(); }, 500);
   });
   // Replace default mobile menu with custom one
   $("div.natWebMenu select[id!='mobilemenu']").livequery(function(){   
       $(this).replaceWith( $( "#mobilemenu" ) );  
   });
   $('#mobilemenu').change( function() {
    location.href = $(this).val();
   }); 
  // Add aria-expanded attributes to active menu items.
  // Select all elements with the class 'hasSubMenu'
  let $tbs = document.querySelectorAll(".hasSubMenu");
  // Iterate over each submenu item
  $tbs.forEach(tb => {
    // Find the toggle link within the submenu
    let toggleLink = tb.querySelector("a.sf-with-ul");    
    // Create a new MutationObserver to watch for attribute changes
    const observer = new MutationObserver((mutations) => {
        console.log("changed mutation");        
        // Check if the submenu has the 'sfHover' class
        if(tb.classList.contains("sfHover")){
            console.log("has sf hover");
            // Set aria-expanded to true if the submenu is hovered
            toggleLink.setAttribute("aria-expanded", "true");
        } else {
            // Set aria-expanded to false if the submenu is not hovered
            toggleLink.setAttribute("aria-expanded", "false");
        }
    });   
    // Start observing the submenu for attribute changes
    observer.observe(tb, {attributes: true});
  });
});
%ENDATTACH%