Using JavaScript to Remove the Skip to Navigation Option

NOTE: Programming changes made through JavaScript and CSS are not supported by the dominKnow support team.

In some cases, your organization may want to create a custom theme and put the navigation at the bottom of the page. If this is done, the Skip to Navigation link that appears when a user is using the keyboard, the link doesn't make sense and can be confusing for keyboard/WCAG users.

While dominKnow | ONE's theme designer is quite flexible, you are not able to turn this option on or off in the Theme Designer options. However, you can take advantage of the "Add JS" option in the theme builder to make these types of changes.

Adding JavaScript to a Theme

Steps:

Edit your desired theme.
Select Add JS.
1. NOTE: If you do not see this option, then it has been disabled by your admin for your user role. There are a variety of permission settings that an Admin (with the right permissions) can turn on and off. They will need to turn this option on to enable you to add JS to a theme.
Paste in the JavaScript.
1. NOTE: Do NOT include tags in your code. The code will automatically be put into script tags within the HTML.
Select OK.
Select Save.
Test your changes.

Code for changing the order of menu items

This sample code is for removing the Skip to Navigation link that appears at the end of the page when using a keyboard to navigate the course.

NOTE: To see this change you need to be using the keyboard to navigate.

const removeSkipNav = () => {
    const el = document.getElementById('skipToNavigationWrapper');
    if (el) el.remove();
  };

  // Run once immediately
  removeSkipNav();

  // Watch for DOM changes
  const observer = new MutationObserver(removeSkipNav);
  observer.observe(document.body, { childList: true, subtree: true });