MagicBullet v3.0.0

/*!

  Radancy MagicBullet: Accessibility Patch

  Contributor(s):
  Michael "Spell" Spellacy

*/

import { observeComponent, bindComponents } from "./util/observe-component.js";
import { runSafely } from "./util/run-safely.js";

import { fixA11y } from "./patch/a11y.js";
import { fixAdvancedSearchForm } from "./patch/advanced-search-form.js";
import { fixAltAttribute } from "./patch/alt-attribute.js";
import { fixAppliedFilter } from "./patch/applied-filter.js";
import { fixCookieManagement } from "./patch/cookie-management.js";
import { fixCMS } from "./patch/cms.js";
import { fixDataForm } from "./patch/data-form.js";
import { fixGlobalDisclosure } from "./patch/global-disclosure.js";
import { fixIframeElement } from "./patch/iframe-element.js";
import { fixKeywordSearch } from "./patch/keyword-search.js";
import { fixInputElements } from "./patch/input-elements.js";
import { fixMindReaderInput } from "./patch/mind-reader-input.js";
import { fixMindReaderList } from "./patch/mind-reader-list.js";
import { fixHeader } from "./patch/header.js";
import { fixJobDescription } from "./patch/job-description.js";
import { fixJobLocation } from "./patch/job-location.js";
import { fixJobMap } from "./patch/job-map.js";
import { fixSaveJobButton } from "./patch/save-job-button.js";
import { fixSavedJobsLink } from "./patch/saved-jobs-link.js";
import { fixSearchForm } from "./patch/search-form.js";
import { fixSearchFilters } from "./patch/search-filters.js";
import { fixSearchResults } from "./patch/search-results.js";
import { fixSearchSort } from "./patch/search-sort.js";
import { fixSearchPagination } from "./patch/search-pagination.js";
import { fixSitemap } from "./patch/sitemap.js";
import { fixSocialShare } from "./patch/social-share.js";
import { fixPrivacyNotice } from "./patch/privacy-notice.js";

// Note: The language pack is imported like any other module (see the patch/ files), so the browser has run it, and
// every label is set, before this file runs. No loader or callback needed.

console.log("%cMagicBullet%cv3.0.0", "background: #2d2d2d; color: #fff; padding: 6px 10px; border-radius: 16px 0 0 16px; font-weight: 600;" , "background: #6e00ee; color: #fff; padding: 6px 10px; border-radius: 0 16px 16px 0; font-weight: 600;");

const bodyNode = document.body;

// Add A11y hook for implementation team. May come in handy. Or not.

bodyNode.classList.add("magicbullet-a11y");

// Add global aria-live to pass messages to when needed.

const existingLiveRegion = document.querySelector("#magicbullet-message");

if(!existingLiveRegion) {

  const liveRegion = document.createElement("div");

  liveRegion.classList.add("magicbullet-visually-hidden");
  liveRegion.setAttribute("id", "magicbullet-message");
  liveRegion.setAttribute("aria-live", "polite");
  bodyNode.append(liveRegion);

}

// Architecture: Each component fix owns a MutationObserver scoped to its own container (see initComponentPatch()
// and observeComponent()), so a change in one component only re-runs that component's fix. The one page-wide
// observer below handles the two jobs that have no single container: running the sitewide fixes (images, iframes,
// checkboxes, disclosures, save job buttons) and discovering component containers added or replaced after load.

const pageNode = document.querySelector("#page") || bodyNode;

const pageConfig = { childList: true, subtree: true };

// Fix: Some components are injected straight into <body>, outside #page (e.g. the cookie consent dialog,
// #system-ialert, and MindReader's result lists). Also watch body's direct children (not its subtree, so busy
// third-party widgets don't trigger runs) so those are found when added, not on the next unrelated #page change.

const bodyChildrenConfig = { childList: true };

function observeSitewide() {

  sitewideObserver.observe(pageNode, pageConfig);

  if (pageNode !== bodyNode) {

    sitewideObserver.observe(bodyNode, bodyChildrenConfig);

  }

}

// Note: The first mutation disconnects the observer and schedules one run after the burst settles. No clearTimeout is
// needed: the callback can't fire again until the timer has run and reconnected the observer. Mutations made while
// disconnected are still covered, since the run scans the whole page.

const sitewideObserver = new MutationObserver(function() {

  sitewideObserver.disconnect();

  setTimeout(function() {

    initDynamicPatch();

    bindComponents();

    observeSitewide();

  }, 1000);

});

initStaticPatch();

initDynamicPatch();

initComponentPatch();

observeSitewide();

// Accessibility Patch: Dynamic (Sitewide)
// Desc: These fixes target elements that can appear anywhere on the page, with no single container to observe.
// They run on page load and again whenever the sitewide observer sees a change under #page.

function initDynamicPatch() {

  runSafely(fixAltAttribute);
  runSafely(fixGlobalDisclosure);
  runSafely(fixIframeElement);
  runSafely(fixInputElements);
  runSafely(fixSaveJobButton);

  console.log("%cMagicBullet%cDynamic Scripts \u2714", "background: #2d2d2d; color: #fff; padding: 6px 10px; border-radius: 16px 0 0 16px; font-weight: 600;" , "background: #228B22; color: #fff; padding: 6px 10px; border-radius: 0 16px 16px 0; font-weight: 600;");

}

// Accessibility Patch: Dynamic (Components)
// Desc: These fixes each target a specific component. Each component instance is fixed once when found, then
// re-fixed by its own observer whenever its container changes. See observeComponent() for the options.

function initComponentPatch() {

  observeComponent(".search-results-options", fixAppliedFilter);
  observeComponent(".data-form", fixDataForm);

  // Note: Observing the input's form so the fix re-runs if the autocomplete popup is added after load.
  // The popup's own contents are watched by the dedicated keywordObserver inside fixKeywordSearch().

  observeComponent(".search-keyword", fixKeywordSearch, { target: function(input) { return input.form || input.parentNode; } });
  observeComponent("input.search-location, input.keyword-category, input.keyword-location, input.keyword-facet", fixMindReaderInput, { target: function(input) { return input.form || input.parentNode; } });

  // Note: The list fix runs immediately (no debounce) so roles and IDs are on the options before the user arrows through them.

  observeComponent(".mindreader-status, #wrapper-sel-city", fixMindReaderList, { debounce: 0 });
  observeComponent("#system-imessage", fixPrivacyNotice);
  observeComponent("[data-selector-name=recentlyviewedjoblist]", fixSavedJobsLink, {

    target: function(jobList) { return jobList.parentNode; },
    config: { childList: true, subtree: true, attributes: true, attributeFilter: ["data-recently-viewed-jobs"] },
    debounce: 0

  });

  observeComponent("#search-filters", fixSearchFilters);

  // Note: #search-results is replaced wholesale on update, so these observe its parent. fixSearchResults and fixSearchSort
  // only bind once per component (they manage their own observer/listener), so they don't need a re-run observer.

  observeComponent("#search-results", fixSearchResults, { observe: false });
  observeComponent("select[data-search-results-sort-enhanced='true']", fixSearchSort, { observe: false });
  observeComponent("#search-results", fixSearchPagination, { target: function(searchResults) { return searchResults.parentNode; } });

  bindComponents();

  console.log("%cMagicBullet%cComponent Scripts ✔", "background: #2d2d2d; color: #fff; padding: 6px 10px; border-radius: 16px 0 0 16px; font-weight: 600;" , "background: #228B22; color: #fff; padding: 6px 10px; border-radius: 0 16px 16px 0; font-weight: 600;");

}

// Accessibility Patch: Static
// Desc: These fixes address issues that occur on page load only.

function initStaticPatch() {

  runSafely(fixA11y);
  runSafely(fixAdvancedSearchForm);
  runSafely(fixCookieManagement);
  runSafely(fixCMS);
  runSafely(fixHeader);
  runSafely(fixJobDescription);
  runSafely(fixJobLocation); 
  runSafely(fixJobMap);
  runSafely(fixSearchForm);
  runSafely(fixSitemap);
  runSafely(fixSocialShare);

  console.log("%cMagicBullet%cStatic Scripts \u2714", "background: #2d2d2d; color: #fff; padding: 6px 10px; border-radius: 16px 0 0 16px; font-weight: 600;" , "background: #228B22; color: #fff; padding: 6px 10px; border-radius: 0 16px 16px 0; font-weight: 600;");

}

/*!

  Radancy MagicBullet: Accessibility Patch

  Contributor(s):
  Michael "Spell" Spellacy

*/

/* Visually Hide Content */

.magicbullet-visually-hidden:not(:focus):not(:active) {
clip: rect(0 0 0 0); 
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap; 
width: 1px;
}

/* Ensure that all placeholder text is contrast friendly. */

::-moz-placeholder {
color: currentColor;
opacity: 1;
}
    
::-webkit-input-placeholder {
color: currentColor;
}

/* 

Create default outline for FireFox. 
This override the rest and normalize CSS and is not a permanent solution, but better than what we have now. 
See https://github.com/radancy-pe/uid-base-gst/issues/155
*/

button:-moz-focusring {
outline-style: auto !important;
}

/* Hide Empty Elements */

h1, h2, h3, h4, h5, h6, label {

    &:empty {
    display: none;
    }

}

/* Access Link */

a.access-link {
outline-color: revert;
outline-offset: 4px;
top: 8px;
z-index: 2147483647 !important;

  &:focus {
  left: 8px;
  }

}

/* Search Location Datalist */

.a11y-search-location {

    .mindreader-results, .mindreader-status, .display-typeahead {
    display: none !important;
    }

    .search-location {
    z-index: 0 !important;
    }

}

/* Mindreader */

.mindreader-results {
padding: 0;

  /* Fix: Always set each autocomplete link to block, so that we can... */

  a {
  display: block;
  padding: .5em 1em;

    /* ... highlight the background, which is not always done. */ 

    &.active {
    background-color: #eee;
    outline: 1px #000 solid;
    outline-offset: -4px;
    }

  }

}

/*  Data Forms */

.data-form {

  .form-field {
    
    &.required {
        
      label {

        /* A11YFORM001 */

        &::after {
        display: none;
        }

        .ico-required-indicator {
        display: inline-block;
        margin-inline-start: 0.5em;
        }

      }

    }

  }

  .data-form__close {
    
    &::after {
    display: none !important;
    }

  }

  .data-form__closeicon {
  display: block;
  pointer-events: none;

    &::after {
    border-radius: 10px;
    color: inherit;
    content: "+";
    display: inline-block;
    font: normal calc(24em/16) / .65em Arial, sans-serif;
    margin: -2px 0 0 10px;
    padding: 4px;
    position: absolute;
    right: 4px;
    text-indent: 0;
    text-shadow: none;
    text-transform: lowercase;
    top: 0;
    transform: rotate(45deg);
    } 

  }

  /* legends do not require an asterick */

  legend {

    &::after {
    display: none;
    }

  }

}

/* removing frameborder */

.grecaptcha-badge {

  iframe {
  border: 0;
  }

}

/* Search Form: Basic */

.search-form {

  .search-location-error, .search-form__location-error {
  outline: 0;

    /* New as of 11/7/2026, add to ACR */
    /* QA is not calling out contrast erros in search message, which are red by default, so we need to force it, also, hide the element if not popultated */

    background-color: contrast-color(black);

    &:empty {
    display: none;
    }

  }

}

/* 

  Since we are removing aria-expanded from various, non-interactive elements, we need to make sure it is not impacting ajax functionality that may look them and keep component open.
  Fortunately, we can use the open class to our advantage. 

*/

.search-filter-list, .search-filters__list {
    
  &.expandable-childlist-open {
  display: block;
  }

}

/* 

  On mobile, when the search filter is open, the entire page can be accidentialy refreshed when scrolling. This is aggrivating, causing user to have open the filers again. 
  Also adding default color to scrollbar as default often not discernable

*/

#search-filters {

  &.open {
  overscroll-behavior: none;
  }

}

/* The typeahead text sometimes interferes with the text being typed, making things illegible. Removing for now as I do not it is absolutely necessary to include. The dropdown should be sufficient. */

.display-typeahead {
display: none;
}

/* The comboxbox on the Job Map page is severaly broken for accessibility. An easier way to address this issue is to always have the <select> present. */

#wrapper-sel-city {
height: auto;

  &[hidden] {
  display: none !important;
  }

}

#sel-city, label[for="sel-city"] {
display: block !important;

  option:first-child {
  display: none;
  }

}

label[for="sel-cityundefined"], .combobox-container {
display: none !important;
}

.keyword-region { 
display: contents;
}

/*

AJD "Back to Navigation" Links
Issue: WAVE is reporting contrast issue due to opacity: 0 on the hyperlinks. To override, we set opacity to 1 or auto and hide the link using clip. Allso ensuring good contrast.

*/

.inPageNav__back-link, .back-to-ajd-nav__a {
background-color: #666;
clip: rect(0, 0, 0, 0);
color: #fff;
opacity: 1;

  &:focus {
  background-color: #666;
  clip: auto;
  }

}

/* Refine Keyword */

#refined-search {

  #add-keyword[disabled], #add-keyword[disabled]:hover, #add-keyword[disabled]:focus, #add-keyword[disabled]:focus-visible {
  background-color: revert !important;
  border-color: revert !important;
  color: revert !important;
  cursor: revert !important;
  pointer-events: revert !important;
  }

}


/* Search Pagination */

/* Fix: Pagination Next and Prev still show hover state when "disabled". This gives false impression that it is interactive. */

.pagination {

  .prev, .next {

    &.disabled {
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    color: #ccc !important;
    cursor: pointer !important; /* Probably do not need this, since href being removed */
    pointer-events: none !important;

      &::after, &::before {
      color: inherit !important;
      } 

    }

  }

}

/* Fix: We appear to be removing the up and down arrow on input[number] because we do not like the way it looks, but this prevents users from understanding how to use the input. The visual que is very important here. */

.pagination-current {
max-inline-size: fit-content !important;
appearance: auto !important;
width: auto !important;
-moz-appearance: auto !important;

  &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {

     -webkit-appearance: auto !important;

  }

}

/* Fix: The AJD header should not be "sticky" under certain conditions as this impacts Reflow, Resize, Focus Obscured, etc. */

@media (height <= 600px) {

  #ajd-header {
  position: relative !important;
  }

}

/* Fix: The keyword-region in job alerts is still present to AT users even though it is not populated with content. To fix, simply hiding with CSS, tho I should check to see if i can do this in the JS instead if thise is a section I am dynamically adding to the DOM */

.keyword-region:not(:has(li)) {
display: none !important;
}