MainWP Dashboard: Code Snippets

Enhanced functionality and user interactions in the MainWP Dashboard through various code snippets.

Keyboard Navigation in the MainWP Dashboard Sidebar

The jQuery script enhances keyboard navigation in the MainWP Dashboard sidebar. It supports navigation with the ‚Enter‘, ‚Escape‘, and arrow keys. The addition of alt+arrow key combinations allows for more precise submenu navigation.

/**
 * MainWP UI: Enhanced Keyboard Navigation in Site Menu Sidebar
 * 
 * Accessibility Enhancements Include:
 * - Sidebar toggling using 'Alt + S' key shortcut.
 * - Item link activation using the 'Enter' key.
 * - Navigation through sidebar items and sub-links using arrow keys.
 * - Submenu-specific navigation using 'Alt' + arrow keys.
 * - Sidebar closing using the 'Escape' key.
 */
$(function() {
  'use strict';

  if (!document.body.classList.contains('mainwp-ui')) return;

  const KEY_S = 83;
  const KEY_ESC = 27;
  const KEY_ENTER = 13;
  const KEY_UP = 38;
  const KEY_DOWN = 40;

  let $content = $('.mainwp-content-wrap');
  let $sidebar = $('#mainwp-sites-menu-sidebar');
  let $mainwpSitesSidebar = $('#mainwp-sites-sidebar');
  let $searchBox = $('#mainwp-sites-menu-filter');
  let $menuItems = $sidebar.find('.mainwp-site-menu-item');

  // Ensure items are keyboard accessible.
  $menuItems.attr('tabindex', 0);

  // Focus the first menu item when down arrow pressed in search box.
  $searchBox.on('keydown', function(event) {
    if (event.which === KEY_DOWN) {
      event.preventDefault();
      $menuItems.filter(':visible').first().focus();
    }
  });

  // Global key event listeners for sidebar interaction.
  $(document).on('keydown', function(event) {
    if (event.altKey && event.which === KEY_S) {
      $mainwpSitesSidebar.click();
    } else if (event.which === KEY_ESC) {
      $content.click();
    }
  });

  // Sidebar item-specific key event listener using delegation.
  $sidebar.on('keydown', '.mainwp-site-menu-item', function(event) {
    let $thisItem = $(this);
    let $links = $thisItem.find('.content a');
    let $visibleItems = $menuItems.filter(':visible');
    let visibleIndex = $visibleItems.index($thisItem);

    let $focusedLink = $links.filter(':focus');
    let linkIndex = $links.index($focusedLink);

    // Alt + Arrow key navigation within submenus
    if (event.altKey) {
      if (event.which === KEY_DOWN) {
        event.preventDefault();
        if ($focusedLink.length === 0 || linkIndex === $links.length - 1) {
          $links.first().focus();
        } else {
          $links.eq(linkIndex + 1).focus();
        }
      } else if (event.which === KEY_UP) {
        event.preventDefault();
        if ($focusedLink.length === 0 || linkIndex === 0) {
          $links.last().focus();
        } else {
          $links.eq(linkIndex - 1).focus();
        }
      }
      return; // Exit function to skip regular arrow key navigation
    }

    // Regular Arrow key navigation
    if (event.which === KEY_DOWN) {
      event.preventDefault();
      if ($focusedLink.length === 0) {
        if ($links.length > 0 && $links.first().is(':visible')) {
          $links.first().focus();
        } else if (visibleIndex < $visibleItems.length - 1) {
          $visibleItems.eq(visibleIndex + 1).focus();
        }
      } else if (linkIndex < $links.length - 1) {
        $links.eq(linkIndex + 1).focus();
      } else if (visibleIndex < $visibleItems.length - 1) {
        $visibleItems.eq(visibleIndex + 1).focus();
      }
    } else if (event.which === KEY_UP) {
      event.preventDefault();
      if ($focusedLink.length > 0 && linkIndex > 0) {
        $links.eq(linkIndex - 1).focus();
      } else {
        // Navigate to either the previous visible main item or the search box
        if (visibleIndex > 0) {
          let $prevItem = $visibleItems.eq(visibleIndex - 1);
          let $prevLinks = $prevItem.find('.content a');
          if ($prevLinks.length > 0 && $prevLinks.last().is(':visible')) {
            $prevLinks.last().focus();
          } else {
            $prevItem.focus();
          }
        } else {
          $searchBox.focus();
        }
      }
    } else if (event.which === KEY_ENTER) {
      $thisItem.find('.title').click();
    }
  });
});

The following earlier version of the script enables arrow key navigation solely within submenus, while main menu items are excluded from this keyboard navigation scheme. This setup, where the tab key navigates through main items and arrow keys are used for submenus, might be more suitable for certain users.

/**
 * MainWP UI: Enhanced Keyboard Navigation in Site Menu Sidebar
 * 
 * Accessibility Enhancements Include:
 * - Sidebar toggling using 'Alt + S' key shortcut.
 * - Item link activation using the 'Enter' key.
 * - Navigation through sidebar sub-links using arrow keys.
 * - Sidebar closing using the 'Escape' key.
 */
$(function() {
  'use strict';

  if (!document.body.classList.contains('mainwp-ui')) return;

  const KEY_S = 83;
  const KEY_ESC = 27;
  const KEY_ENTER = 13;
  const KEY_UP = 38;
  const KEY_DOWN = 40;

  let $content = $('.mainwp-content-wrap');
  let $sidebar = $('#mainwp-sites-menu-sidebar');
  let $mainwpSitesSidebar = $('#mainwp-sites-sidebar');

  // Ensure items are keyboard accessible.
  $sidebar.find('.mainwp-site-menu-item').attr('tabindex', 0);

  // Global key event listeners for sidebar interaction.
  $(document).on('keydown', function(event) {
    // Open sidebar on 'Alt + S' key press.
    if (event.altKey && event.which === KEY_S) {
      $mainwpSitesSidebar.click();
    }
    // Close sidebar on 'Esc' key press.
    else if (event.which === KEY_ESC) {
      $content.click();
    }
  });

  // Sidebar item-specific key event listener using delegation.
  $sidebar.on('keydown', '.mainwp-site-menu-item', function(event) {
    let $thisItem = $(this);
    let $links = $thisItem.find('.content a');

    // Activate item link on 'Enter' key press.
    if (event.which === KEY_ENTER) {
      $thisItem.find('.title').click();
    }

    // Navigate through submenu links on 'Up/Down' arrow key press.
    let $focusedLink = $links.filter(':focus');
    let index = $links.index($focusedLink);

    if (event.which === KEY_DOWN) {
      event.preventDefault();
      if (index === -1 || index === $links.length - 1) {
        $links.first().focus();
      } else {
        $links.eq(index + 1).focus();
      }
    } else if (event.which === KEY_UP) {
      event.preventDefault();
      if (index <= 0) {
        $links.last().focus();
      } else {
        $links.eq(index - 1).focus();
      }
    }
  });
});