Skip to main content

Aeon Default Web Pages v6.0.23 — Update Guide

For institutions updating customized Aeon web pages from v6.0.17

warning

These web pages require Aeon Web DLL v6.0.2.0 or later. The <#ASSET> tag used for local JavaScript and CSS files is only supported in v6.0.2.0+. Update your Web DLL before deploying these pages.

This release includes a Bootstrap v4 → v5 upgrade, Content Security Policy (CSP) compliance changes, accessibility improvements, and security updates to bundled JavaScript libraries.

Table of Contents​

  1. Library References (include_head.html)
  2. New Files to Deploy
  3. Removed Files
  4. Bootstrap v4 → v5 Class Name Changes
  5. Navigation & Dropdown Markup Changes
  6. Data Attribute Changes
  7. Data Repeaters Converted to Lists
  8. Data Row Template Changes
  9. Inline Scripts Externalized (CSP Compliance)
  10. Payment Template Changes
  11. Captcha Template Changes
  12. Copyright & Footer Changes
  13. Status Line Moved Inside Main Content
  14. Researcher Tags Modal Update
  15. CSS Changes (aeon.css)
  16. Accessibility Improvements
  17. Other Fixes

1. Library References (include_head.html)​

include_head.html has been updated for Content Security Policy (CSP) support. The <#ASSET> tag is the new Aeon DLL tag for loading local CSS and JavaScript files. When the Aeon DLL renders a page, <#ASSET> adds a file-content hash to each local file it loads, so the browser can confirm the file has not been changed before running the script or applying the stylesheet. That file-integrity check is what CSP needs from local assets.

Two kinds of changes happened in this file. First, five libraries that used to load from public CDNs — bootstrap.min.css, bootstrap.min.js, popper.min.js, moment-with-locales.min.js, and moment-timezone-with-data.min.js — now load from local copies that ship with v6.0.23. Those local files are listed in Section 2. Second, every other local CSS and JS reference in the file — datepicker.min.css, aeon.min.css, custom.css, print.min.css, cookieconsent.min.css, atlasUtility.min.js, custom.js, webAlerts.min.js, cookieconsent.min.js, and atlasCookieConsent.js — was switched from a plain <link> or <script> tag to an <#ASSET> tag. The files themselves and their paths did not change; only the tag wrapping them did. Both kinds of change are visible in the before/after below.

A new <#ASSET src="js/skip-to-content.min.js" /> line was also added at the bottom of the file. jQuery and FontAwesome still load from their CDNs as before, with the same integrity hashes they have always had — <#ASSET> only works on files bundled with your Aeon install.

Before:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/datepicker.min.css"/>
<link rel="stylesheet" href="css/aeon.min.css" media="screen">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/print.min.css" media="print">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
      integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/cookieconsent.min.css" />

<script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="js/atlasUtility.min.js"></script>
<script src="js/custom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"
        integrity="sha256-VrmtNHAdGzjNsUNtWYG55xxE9xDTz4gF63x/prKXKH0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.21/moment-timezone-with-data.min.js"
        integrity="sha256-VX6SyoDzanqBxHY3YQyaYB/R7t5TpgjF4ZvotrViKAY=" crossorigin="anonymous"></script>
<script src="js/webAlerts.min.js"></script>
<script src="js/cookieconsent.min.js" data-cfasync="false"></script>
<script src="js/atlasCookieConsent.js"></script>

After:

<#ASSET src="css/bootstrap.min.css" />
<#ASSET src="css/datepicker.min.css" />
<#ASSET src="css/aeon.min.css" media="screen" />
<#ASSET src="css/custom.css" />
<#ASSET src="css/print.min.css" media="print" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
      integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<#ASSET src="css/cookieconsent.min.css" />

<script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<#ASSET src="js/popper.min.js" />
<#ASSET src="js/bootstrap.min.js" />
<#ASSET src="js/atlasUtility.min.js" />
<#ASSET src="js/custom.js" />
<#ASSET src="js/moment-with-locales.min.js" />
<#ASSET src="js/moment-timezone-with-data.min.js" />
<#ASSET src="js/webAlerts.min.js" />
<#ASSET src="js/cookieconsent.min.js" data-cfasync="false" />
<#ASSET src="js/atlasCookieConsent.js" />
<#ASSET src="js/skip-to-content.min.js" />

In include_head_request.html, all script references converted from <script> tags to <#ASSET> tags:

Before:

<script type="text/javascript" src="js/schedule-review-toggle.min.js"></script>
<script type="text/javascript" src="js/switchRequestForm.min.js"></script>
<script type="text/javascript" src="js/lang/en-US.min.js"></script>
<script type="text/javascript" src="js/datepicker.min.js"></script>
<script type="text/javascript" src="js/scheduled-date.min.js"></script>

After:

<#ASSET src="js/schedule-review-toggle.min.js" />
<#ASSET src="js/switchRequestForm.min.js" />
<#ASSET src="js/lang/en-US.min.js" />
<#ASSET src="js/datepicker.min.js" />
<#ASSET src="js/scheduled-date.min.js" />
note

Both minified (.min.js) and non-minified (.js) versions of each bundled JavaScript file are included in the release package. The default <#ASSET> tags reference the minified versions.

note

The bundled JavaScript utility files (atlasUtility.js, webAlerts.js, datepicker.js, etc.) have been updated to maintain backwards compatibility with Bootstrap 4 during migration. Simply overwrite these files with the updated versions.

Logon.html (special case)​

Logon.html is a standalone page with its own hard-coded <head> — it does not use include_head.html. The Aeon <#ASSET> template tag is not supported on Logon.html, so its library references continue to use plain <link> and <script> tags rather than <#ASSET> tags.

The same library updates applied to include_head.html were applied to Logon.html's embedded references:

  • Moved from CDN to local: Bootstrap CSS (css/bootstrap.min.css), Bootstrap JavaScript (js/bootstrap.min.js), Popper (js/popper.min.js)
  • Updated, still on the CDN: FontAwesome (bumped from v5.0.13 to v5.2.0, with a matching integrity hash update)
  • Unchanged: jQuery (still on the CDN)

Logon.html also gained a <script src="js/skip-to-content.min.js"></script> reference at the bottom of <body>, and the inline onclick="$('#content').focus();" was removed from the skip-to-content link in the page's hard-coded <header>.

If you maintain a customized Logon.html, mirror these changes in your version. Use plain <link> and <script> tags — do not switch to <#ASSET>.

2. New Files to Deploy​

These files are included in the release package and must be present in your WebPages directory.

Libraries (local copies replacing CDN references)​

FileDescription
css/bootstrap.min.cssBootstrap v5.3.8 stylesheet
js/bootstrap.min.jsBootstrap v5.3.8 JavaScript
js/popper.min.jsPopper.js positioning library (required by Bootstrap v5)
js/moment-with-locales.min.jsMoment.js with locale support (security update)
js/moment-timezone-with-data.min.jsMoment Timezone (security update)

Externalized scripts (previously inline in HTML templates)​

Each script ships in both minified (.min.js) and non-minified (.js) forms; both must be deployed. The default <#ASSET> tags reference the minified versions.

FileDescription
js/skip-to-content.jsAccessibility skip-to-content link handler
js/billing-charges.jsBilling summary total calculations
js/billing-detail-toggle.jsBilling total section visibility toggle
js/ead-form-init.jsEAD submission form initialization
js/form-submit-disabled.jsDisabled field handling on form submit
js/logon-register.jsRegister form submission handler
js/logout-redirect.jsLogout page redirect
js/mtcaptcha-init.jsMTCaptcha initialization
js/order-approvals.jsOrder approval checkbox and total management
js/order-estimates.jsOrder estimate checkbox and total management
js/payment-authorize.jsAuthorize.net payment processing
js/payment-authorize-accept-hosted.jsAuthorize.net Accept Hosted processing
js/payment-cybersource.jsCyberSource payment processing
js/payment-payeezy.jsPayeezy payment processing
js/payment-paypal.jsPayPal payment processing
js/payment-summary.jsPayment page summary total display
js/payment-touchnet.jsTouchNet payment processing
js/recaptcha-submit.jsreCAPTCHA form submission callback
js/researcher-tags.jsResearcher tag AJAX management
js/review-requests-toggle.jsAppointment scheduling field visibility

New include file​

FileDescription
include_copyright.htmlAtlas copyright text (replaces <#COPYRIGHT> tag)

3. Removed Files​

FileReason
FeatureSpecificPages/Sagepay/CreditCardPayment.htmlSagePay provider permanently retired
WebPages/include_menu.htmlRedundant; pages now include nav and footer directly

4. Bootstrap v4 → v5 Class Name Changes​

These replacements apply across all HTML pages. If your custom.css targets any of these old class names, update your selectors.

Form fields: form-group → field-wrapper, add form-label​

Before:

<div class="form-group col-md-8">
    <label for="ItemTitle">

After:

<div class="field-wrapper col-md-8">
    <label class="form-label" for="ItemTitle">

Select elements: custom-select → form-select​

Before:

<select class="custom-select mr-sm-2" id="AppointmentLength">

After:

<select class="form-select me-sm-2" id="AppointmentLength">

Checkboxes/radios: custom-control → form-check​

Before:

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="...">
    <label class="custom-control-label" for="...">

After:

<div class="form-check">
    <input type="checkbox" class="form-check-input" id="...">
    <label class="form-check-label" for="...">

Spacing and float utilities​

BeforeAfter
ml-automs-auto
mr-autome-auto
ml-1, ml-3ms-1, ms-3
mr-1me-1
float-rightfloat-end
float-leftfloat-start
text-righttext-end
text-lefttext-start

Before:

<div class="ml-auto">
    <button class="btn btn-primary btn-md switchButton switch-request-form float-right"

After:

<div class="ms-auto">
    <button class="btn btn-primary btn-md switchButton switch-request-form float-end"

Badges: badge-primary badge-pill → text-bg-primary rounded-pill​

Before:

<span class="badge badge-primary badge-pill">

After:

<span class="badge text-bg-primary rounded-pill">

Typography: font-weight-bold → fw-bold​

Before:

<div class="col-sm-8 field-label font-weight-bold">Balance Due</div>

After:

<div class="col-sm-8 field-label fw-bold">Balance Due</div>

Buttons: btn-block → d-block w-100​

Before:

<button class="btn btn-primary btn-block">Pay Now</button>

After:

<button class="btn btn-primary d-block w-100">Pay Now</button>

Screen reader class: sr-only → visually-hidden​

Before:

<span class="sr-only">A calendar is available below.</span>

After:

<span class="visually-hidden">A calendar is available below to view date availability and aid selection.</span>

Before:

<button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
</button>

After:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

Input groups: input-group-append removed​

Bootstrap v5 removed the input-group-append and input-group-prepend helper classes. Append/prepend elements no longer need a wrapper class.

Before:

<div class="input-group">
    <input class="form-control" id="ScheduledDate" name="ScheduledDate" type="text">
    <div id="datePickerButton" class="input-group-append btn btn-outline-secondary"></div>
</div>

After:

<div class="input-group">
    <input class="form-control" id="ScheduledDate" name="ScheduledDate" type="text">
    <div id="datePickerButton" class="btn btn-outline-secondary"></div>
</div>

form-inline removed​

Bootstrap v5 removed the form-inline class. Inline form layouts now use flexbox utilities directly.

Before (ViewSearchResults.html):

<div class="form-inline m-0">
    <input id="SearchCriteria" class="form-control mr-1" ...>
    <input class="btn btn-primary" type="submit" ...>
</div>

After:

<div class="d-flex flex-column flex-sm-row align-items-sm-center gap-0 gap-sm-1 m-0">
    <input id="SearchCriteria" class="form-control w-auto" ...>
    <input class="btn btn-primary align-self-start align-self-sm-center" type="submit" ...>
</div>

If your customized pages use form-inline, replace it with equivalent flexbox utilities.

5. Navigation & Dropdown Markup Changes​

Dropdown toggles changed from <a> tags to <button> elements, and aria-haspopup="true" was removed from them — it was an incorrect ARIA usage that did not match the dropdown's behavior. Dropdown menus converted from <div> to semantic <ul>/<li> structure.

Before:

<a class="nav-link dropdown-toggle" href="#" id="navbarNewRequest"
   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   <span aria-hidden="true" class="fas fa-book"></span> New Requests
</a>
<div class="dropdown-menu" aria-labelledby="navbarNewRequest">
  <a class="dropdown-item" href="...">Default Request</a>
  <a class="dropdown-item" href="...">Monograph Request</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="...">Photoduplication Request</a>
</div>

After:

<button class="nav-link dropdown-toggle" type="button" id="navbarNewRequest"
        data-bs-toggle="dropdown" aria-expanded="false">
   <span aria-hidden="true" class="fas fa-book"></span> New Requests
</button>
<ul class="dropdown-menu" aria-labelledby="navbarNewRequest">
  <li><a class="dropdown-item" href="...">Default Request</a></li>
  <li><a class="dropdown-item" href="...">Monograph Request</a></li>
  <li aria-hidden="true"><hr class="dropdown-divider"></li>
  <li><a class="dropdown-item" href="...">Photoduplication Request</a></li>
</ul>

The "Logged in as" item also changed:

Before:

<a class="dropdown-item disabled" type="text">
    <span class="far fa-id-badge"></span> Logged in as <#PARAM name="Username">
</a>

After:

<li><div class="dropdown-item-text">
    <span class="far fa-id-badge"></span> Logged in as <#PARAM name="Username">
</div></li>

The same menu structure change (<div> → <ul>/<li>) and aria-haspopup removal apply to the action-menu dropdowns inside the DataRow templates: DataRow_DefaultRequest.html, DataRow_DefaultActivity.html, DataRow_ElectronicDelivery.html, DataRow_OrderBilling.html, DataRow_OrderEstimate.html, DataRow_ReviewRequest.html, and DataRow_DefaultAppointment.html. The toggle element in those templates was already a <button> in v6.0.17, so no element change is needed there.

6. Data Attribute Changes​

All Bootstrap JavaScript data attributes updated to the data-bs-* namespace:

BeforeAfter
data-toggledata-bs-toggle
data-targetdata-bs-target
data-dismissdata-bs-dismiss

Before:

<button data-toggle="collapse" data-target="#collapseSection">

After:

<button data-bs-toggle="collapse" data-bs-target="#collapseSection">

7. Data Repeaters Converted to Lists​

All view pages that display repeating data rows now use semantic <ul> lists with role="list". If you have customized any view page, wrap your data repeaters accordingly.

Before:

<#DATAREPEATER name="ViewAppointmentRequests"
               TemplateFile="templates/DataRow_DefaultRequest.html"
               noDataAction="<div class='no-data-message'>No requests are associated with this appointment</div>"
               orderby="TransactionNumber DESC">

After:

<ul class="list-unstyled m-0" role="list">
    <#DATAREPEATER name="ViewAppointmentRequests"
                   TemplateFile="templates/DataRow_DefaultRequest.html"
                   noDataAction="<li class='no-data-message'>No requests are associated with this appointment</li>"
                   orderby="TransactionNumber DESC">
</ul>

Note that noDataAction messages also changed from <div> to <li>.

Affected pages: ViewAllRequests, ViewActivities, ViewActivity, ViewAppointments, ViewOrderApprovals, ViewOrderEstimates, ViewCancelledRequests, ViewOutstandingRequests, ViewRequestHistory, ViewRequestsByTag, ViewSearchResults, ViewUserReviewRequests, ViewElectronicDelivery, ViewElectronicDeliveryUndelete, ViewDefaultDetailed, ViewDetailedInformation, ViewCancelledDetailedInformation, ViewCheckedOutDetailedInformation, DetailedInformation, CreditCardPayment, and their Appointment Scheduling variants.

Note that on DetailedInformation.html, both the billing details and notes data repeaters were individually wrapped in <ul> elements with role="list". The ViewUserReviewRequests.html saved-requests wrapper was converted from a <span> to a <ul id="saved-requests" class="new-line list-unstyled m-0" role="list">.

8. Data Row Template Changes​

Data row templates changed their root element from <div> to <li> to match the new list wrapper.

Before:

<div class="card" id="transaction<#DATAROW field='TransactionNumber'>">
  ...
</div>

After:

<li class="card" id="transaction<#DATAROW field='TransactionNumber'>">
  ...
</li>

Affected templates: DataRow_DefaultRequest, DataRow_DefaultActivity, DataRow_DefaultNote, DataRow_ElectronicDelivery, DataRow_CreditCardOrder, DataRow_OrderBilling, DataRow_OrderEstimate, DataRow_BillingDetail, DataRow_ReviewRequest, and DataRow_DefaultAppointment.

9. Inline Scripts Externalized (CSP Compliance)​

All inline <script> blocks and inline event handlers (onclick, onsubmit, etc.) have been extracted to external JavaScript files loaded via <#ASSET> tags. Additionally, existing <script src="..."> references on individual pages (e.g., ArchivalRequest.html, EADRequest.html, SiteMap.html, ViewSearchResults.html, ViewUserReviewRequests.html, and the photoduplication request pages) have been converted from <script> tags to <#ASSET> tags for Subresource Integrity (SRI) support. These changes are required for Content Security Policy (CSP) compliance.

One exception: Logon.html is a standalone static HTML page served outside the DLL template pipeline, so <#ASSET> processing does not run on it. Its local <script src="js/..."> tags for popper.min.js, bootstrap.min.js, cookieconsent.min.js, atlasCookieConsent.js, webAlerts.min.js, and skip-to-content.min.js are intentionally left as plain <script src> references.

Example (external script tag conversion):

Before:

<script type="text/javascript" src="js/ArchivalRequest.min.js"></script>

After:

<#ASSET src="js/ArchivalRequest.min.js" />

If you have customized pages that contain inline scripts, you will need to externalize them as well. Below is guidance for doing this manually.

How inline scripts were externalized​

Simple case — inline <script> block with no server-side tags:

Move the script body to an external .js file and replace the <script> block with an <#ASSET> tag.

Before:

<script>
    $(document).ready(function() {
        var total = 0;
        $('[data-totalCharge]').each(function() {
            total += Number($(this).attr('data-totalCharge'));
        });
        $('#summaryTotalCharges').text(total.toFixed(2));
    });
</script>

After:

<#ASSET src="js/payment-summary.js" />

Inline event handlers:

Remove the handler attribute and add the equivalent behavior in an external JS file.

Before:

<a href="#content" accesskey="S" onclick="$('#content').focus();" class="offscreen">Skip to Main Content</a>

After:

<a href="#content" accesskey="S" class="offscreen">Skip to Main Content</a>

(Focus handling moved to js/skip-to-content.js)

Handling scripts that contain DLL template tags​

Scripts that reference Aeon DLL template tags (<#PARAM>, <#CUSTOMIZATION>, <#DLL>, <#USER>, etc.) cannot be moved directly to external .js files. The DLL only processes these tokens inside HTML files, not inside .js files.

The solution is to pass the server-side values into HTML using data-* attributes on a config element, then read them from JavaScript.

Before:

<script type="text/javascript">
    $(document).ready(function(){
        $("#cancel").click(function() {
            window.location.replace("<#DLL queryFields=false>?action=10&form=10");
        });
    });
</script>

After (config div + external JS):

<div id="payment-config"
     data-cancel-url="<#DLL queryFields=false>?action=10&form=10"></div>
<#ASSET src="js/payment-authorize.js" />

In the external JS file, read the config values:

document.addEventListener("DOMContentLoaded", function() {
    var config = document.getElementById("payment-config");
    var cancelUrl = config.getAttribute("data-cancel-url");
    // ... use cancelUrl in your logic ...
});
note

If your inline script contains any <#...> tags, you must move those values to data-* attributes in HTML and read them from the external JS file using getAttribute().

Common inline handler patterns and their replacements​

Inline HandlerReplacement Pattern
onclick="$('#content').focus();"External skip-to-content.js with event listener
onclick="RegisterForm.submit(); return false;"Add id="register-link" to element, handle click in external JS
onsubmit="...removeAttr('disabled')..."Add data-enable-disabled-on-submit attribute to form, handle in external JS
onclick="ToggleCheckBoxes('FormName', true)"Add data-form-name and data-check-all attributes, handle in external JS

Tips for manual extraction​

  • Wrap external scripts in DOMContentLoaded — When moving inline scripts that were inside the page body, wrap them in document.addEventListener("DOMContentLoaded", function() { ... }) to ensure the DOM is ready.
  • Preserve load order — If one script depends on a global variable or function set by another, ensure the <#ASSET> tags appear in the correct order. The order of <#ASSET> tags determines load sequence.
  • Test thoroughly after extraction — Pay special attention to form submission, field state changes (enabled/disabled), redirects, and AJAX calls. These are the most common areas where extraction can introduce issues.
  • Check for onchange handlers — Generic onchange handlers don't have a standard replacement pattern. You'll need to manually create an external JS file that attaches the equivalent behavior using addEventListener.
  • Dead code — If you find calls to showheader() or showtree() in inline scripts, these are legacy functions that no longer exist. They can be safely removed.

10. Payment Template Changes​

All payment form inline JavaScript has been extracted to external files. Configuration data is now passed via data-* attributes on a config element.

Both .js and .min.js variants of each payment script ship in js/. The template <#ASSET> references in templates/payment/ load the .min.js variant by default; the .js filenames listed in the table below denote the script family, not the specific file the template loads.

All payment providers migrated:

TemplateNew JS File
include_payment_form_authorize.net.htmljs/payment-authorize.js
include_payment_form_authorize.net_accept_hosted.htmljs/payment-authorize-accept-hosted.js
include_payment_form_cybersource.htmljs/payment-cybersource.js
include_payment_form_payeezy.htmljs/payment-payeezy.js
include_payment_form_paypal.htmljs/payment-paypal.js
include_payment_form_touchnet.htmljs/payment-touchnet.js

If you have customized payment templates with your own inline scripts, follow the guidance in Section 9 — particularly the section on handling scripts with DLL template tags. Payment scripts commonly reference <#PARAM>, <#DLL>, and <#CUSTOMIZATION> tags that must be moved to data-* attributes.

warning

Test payment flows thoroughly after updating. Verify form submission, redirect handling, and token generation with your payment provider.

11. Captcha Template Changes​

Captcha inline scripts have been externalized. External captcha provider scripts (Google reCAPTCHA, hCaptcha, MTCaptcha) retain their <script> tags because they are dynamically versioned by the provider and cannot use static integrity hashes.

Before (include_recaptcha_v2_invisible.html):

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
    function onSubmit(token) {
        var form = document.getElementById("registration-form");
        var submitButton = document.getElementById("SubmitButton");
        // ... submission logic ...
        submitButton.click();
    }
</script>

After:

<!-- SRI exception: Google reCAPTCHA scripts are dynamically versioned by the provider
     and cannot use a static integrity hash. -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<#ASSET src="js/recaptcha-submit.min.js" />

Before (include_mtcaptcha.html):

<script>
    var mtcaptchaConfig = {
      "sitekey": "<#CUSTOMIZATION name=CaptchaSiteId />"
    };
    (function(){var mt_service = document.createElement('script');...})();
</script>

After:

<!-- SRI exception: mtcaptcha scripts are dynamically versioned by the provider
     and cannot use a static integrity hash. -->
<div id="mtcaptcha-config" data-sitekey="<#CUSTOMIZATION name=CaptchaSiteId />"></div>
<#ASSET src="js/mtcaptcha-init.min.js" />

Note how the MTCaptcha example uses the config div + data-* attribute pattern to pass the <#CUSTOMIZATION> value to the external JS file.

12. Copyright & Footer Changes​

The <#COPYRIGHT> server tag has been replaced with a hardcoded include file.

Before (include_footer.html):

<div><#COPYRIGHT></div>

After:

<div><#INCLUDE filename="include_copyright.html"></div>

The new include_copyright.html file contains:

&copy; 2026 <a href="https://www.atlas-sys.com">Atlas Systems, Inc.</a> All Rights Reserved.

The copyright year has been updated from 2024 to 2026, and the Atlas Systems URL scheme updated from http:// to https://. If you have hardcoded copyright text anywhere else (for example, Logon.html), update both values accordingly.

In addition, the hardcoded Logon.html footer (which does not use the copyright include) had its "Powered by Aeon" text converted into a link pointing to the About page:

Before:

<div>Powered by Aeon</div>

After:

<div>Powered by <a href="aeon.dll?Action=10&amp;Form=1">Aeon</a></div>

13. Status Line Moved Inside Main Content​

On pages where <#STATUS> previously lived outside the <main> element, it has been moved inside. Two v6.0.17 patterns were affected: pages that pulled in the now-removed include_menu.html wrapper (which injected statusLine before <main>), and standalone pages that had their own inline <div id="statusLine" class="container"><#STATUS></div> block sitting outside <main>. Pages that already had statusLine inside <main> in v6.0.17 are unchanged. In every affected page, the statusLine div also drops its class="container" because it now inherits layout from the enclosing <div class="container"> wrapper.

Before (pages that used include_menu.html):

<#INCLUDE filename="include_menu.html">

After:

<#INCLUDE filename="include_nav.html">
<div class="container">
    <main id="content" aria-label="Content">
        <div id="statusLine"><#STATUS></div>

Before (standalone pages with inline outside-<main> statusLine, example from NewPassword.html):

<div id="statusLine" class="container">
    <#STATUS>
</div>
<div class="container">
    <main id="content" aria-label="Content">

After:

<div class="container">
    <main id="content" aria-label="Content">
        <div id="statusLine"><#STATUS></div>

The standalone pages affected by this second pattern are Blocked.html, DisavowedUsername.html, ForgotPassword.html, NewPassword.html, and NewUserRegistration.html.

If you have customized one of the affected pages listed above, verify that <div id="statusLine"><#STATUS></div> now sits inside <main id="content"> and that the statusLine div no longer carries the container class.

14. Researcher Tags Modal Update​

The researcher tags modal (include_ResearcherTagsUpdate.html) has been updated with Bootstrap v5 markup, and its inline JavaScript (~57 lines) has been extracted to js/researcher-tags.js.

Both js/researcher-tags.js and js/researcher-tags.min.js ship in js/. include_ResearcherTagsUpdate.html references the .min.js variant by default.

Before:

<button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
</button>
<!-- ... -->
<div class="form-group">
    <label for="researcher-tags-input">
<!-- ... -->
<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button>
<!-- ... -->
<script>
    // ~57 lines of inline JavaScript
</script>

After:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<!-- ... -->
<div class="field-wrapper">
    <label class="form-label" for="researcher-tags-input">
<!-- ... -->
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
<!-- ... -->
<#ASSET src="js/researcher-tags.min.js" />

15. CSS Changes (aeon.css)​

Because aeon.css received an extensive number of changes for the Bootstrap 5 migration, it is strongly recommended to overwrite aeon.css with the updated version.

If you have customized aeon.css directly, or if your custom.css overrides target rules defined in aeon.css, review the changes below for reference.

Button styles now use CSS variables​

Direct CSS property overrides on buttons may no longer work. Use CSS variables instead.

Before:

.btn-primary {
    background-color: #08415c;
    color: #fff;
}
.btn-primary:hover {
    background-color: #52b3d9;
    color: #05171f;
}

After:

.btn-primary {
    --bs-btn-bg: #08415c;
    --bs-btn-color: #fff;
}
.btn-primary:hover {
    --bs-btn-hover-bg: #52b3d9;
    --bs-btn-hover-color: #05171f;
}

If your custom.css overrides button colors, update to use the variable syntax:

/* Old way (may not work) */
.btn-primary { background-color: #990000; }

/* New way */
.btn-primary { --bs-btn-bg: #990000; }

Focus ring selectors updated​

Before:

button:focus,
.btn:focus,
.btn:not(:disabled):not(.disabled).active:focus,
.btn:not(:disabled):not(.disabled):active:focus,
.show>.btn.dropdown-toggle:focus,
.form-control:focus,
.custom-select:focus,
.custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
    outline: 2px transparent solid;
}

After:

button:focus,
.btn:focus,
.btn:not(:disabled):not(.disabled).active:focus,
.btn:not(:disabled):not(.disabled):active:focus,
.btn-close:focus,
.btn.show:focus,
.navbar-toggler:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
    outline: 2px transparent solid;
}

Focus ring coverage was expanded to include .btn-close, .btn.show, and .navbar-toggler; the .show>.btn.dropdown-toggle selector was replaced with .btn.show; and the Bootstrap 4 form-control selectors (.custom-select, .custom-control-input) were replaced with their Bootstrap 5 equivalents (.form-select, .form-check-input). The matching input:not(...) Safari-fallback selector list was updated the same way. A new .nav-link:focus rule was also added to match the hyperlink focus ring.

Before:

.dropdown-menu > .dropdown-item.btn-light { ... }

After:

.dropdown-menu > li > .dropdown-item.btn-light { ... }

New container and column gutter system​

Before: v6.0.17 had no explicit gutter overrides — Bootstrap 4 defaults applied.

After:

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl,
.row,
.col:not(.row > *),
[class*="col-"]:not(.row > *) {
  --bs-gutter-x: 1.875rem;
}

:where(.col):not(.row > *),
:where([class*="col-"]):not(.row > *) {
  --col-padding-left: calc(var(--bs-gutter-x) * .5);
  --col-padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: var(--col-padding-left);
  padding-right: var(--col-padding-right);
}

@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1140px;
  }
}

These rules preserve Bootstrap 4's 1.875rem gutter width and 1140px max container width at the XL+ breakpoint, so layouts stay visually consistent after the upgrade. They also introduce --col-padding-left / --col-padding-right custom properties that individual elements (like .logon-field) can override without rewriting the whole padding declaration.

New root CSS variables​

A new comment block has been added at the top of aeon.css explaining Bootstrap 5's CSS custom-properties system (--bs-* variables) and how they cascade. New top-level CSS variables have also been added:

:root {
  --bs-border-radius: .25rem;
  --bs-link-hover-color: #0056b3;
}

Other CSS changes​

The remaining changes are grouped below. Overwriting aeon.css is still the recommended upgrade path; this list exists to help if you maintain a customized aeon.css or target these rules from custom.css.

Heading and typography

  • Heading selectors extended so that .h1/.h2/.h3/.h4 class forms match their tag counterparts (e.g., h1, .h1 { ... })
  • New size rules added for h3, .h3 (1.75rem) and h4, .h4 (1.5rem)

Buttons

  • All direct background-color/color declarations on .btn-primary, .btn-secondary, their :hover states, .btn-primary:disabled, .btn-outline-secondary, .btn-outline-secondary:hover, .btn-alert, and .btn-alert:hover have been converted to the Bootstrap 5 --bs-btn-bg / --bs-btn-color / --bs-btn-hover-bg / --bs-btn-hover-color / --bs-btn-disabled-bg / --bs-btn-disabled-color custom properties
  • New .btn-link { --bs-btn-color: #08415c; } rule to keep link buttons matching the primary theme color
  • New .btn:focus override that re-applies var(--bs-btn-bg) / var(--bs-btn-color) to keep focused buttons looking consistent
  • .btn-link:hover / .btn-link:focus now explicitly set text-decoration: underline
  • .btn-link was added to the a.btn { text-decoration: none; } rule
  • .btn-primary:focus, .btn-secondary:focus, .btn-light:focus were added to the existing border rule so focused buttons keep their 1px outline
  • .atlas-accordion .btn now includes padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x) to work with Bootstrap 5's padding variables
  • The .btn-secondary:hover grouping was split apart so button-hover variables can apply only to buttons
  • a:not([href]):not([tabindex]) disabled-color rules changed from direct color values to --bs-btn-disabled-color

Links and navigation

  • a:hover now sets color: var(--bs-link-hover-color) in addition to the existing text-decoration: none
  • a:focus, .nav-link:focus share the focus ring (previously a:focus, a:focus-visible)
  • nav li → nav .navbar-nav > li (more specific selector to avoid styling nested lists)
  • nav li a rule also applies to .navbar-nav .nav-link so the <button>-based dropdown toggles get the correct font
  • New .nav-link.dropdown-toggle[type="button"] reset required because Section 5 converts dropdown toggles from <a> to <button>
  • .dropdown-item rule extended to also apply to the new .dropdown-item-text class, and both now set --bs-dropdown-item-padding-x: 1.5rem
  • New nav .dropdown-item-text { font-family: 'Open Sans', sans-serif; }

Forms

  • .form-control border-color selector list updated to Bootstrap 5 equivalents
  • .custom-switch .custom-control-label::after rule removed and replaced by .form-switch .form-check-input:not(:checked)
  • New .form-control[readonly] { background-color: var(--bs-secondary-bg); opacity: 1; }
  • New .field-wrapper { margin-bottom: 1rem; } — replaces the default bottom margin Bootstrap 4 provided via .form-group
  • .logon-field rewritten to use --col-padding-left / --col-padding-right custom properties

Data repeater lists and tables

  • New ul .list-group-item color rule
  • New ul.list-unstyled color rules for data-repeater <ul> wrappers
  • New .list-group, .list-group-item variable overrides
  • New .list-group-item:first-child and .list-group-item:last-child rules to restore rounded corners
  • New div.table table rules that re-style Bootstrap 5 tables back toward the v4 look

Cards, modals, alerts, badges

  • New .card, .card-body:not(.card .card-body) block defines card spacing variables
  • New .modal-content { --bs-modal-border-radius: .3rem; }
  • New .alert block defines alert padding variables
  • Badge rule changed from .badge-primary { background-color: #08415c; } to .badge.text-bg-primary { --bs-primary-rgb: 8, 65, 92; }

Collapse and accessibility

  • New .collapsing { height: auto; overflow: visible; transition: none; } rule to prevent visual glitch during data-repeater transitions
  • a.offscreen:focus → a.offscreen:focus-visible

Datepicker

  • New .date-picker .prev-but span, .date-picker .next-but span { font-weight: normal; }
  • New .date-picker .prev-but.fd-disabled span, .date-picker .next-but.fd-disabled span { cursor: default; }
  • .date-picker table's invalid border-radius: .25 rem (stray space) corrected to border-radius: .25rem

EAD content

  • .EADSection, .EADRequest, and .c01–.c12 rules had declarations reordered alphabetically and missing trailing semicolons added — no behavior change

Print stylesheet (print.css)

  • Updated with matching selector changes (.custom-select → .form-select) and a new .field-wrapper { margin-bottom: 1rem; } rule

16. Accessibility Improvements​

These improvements are included in the updated default files. If you have customized the affected files, incorporate these changes.

Datepicker​

  • Calendar table now has role="grid" for screen reader identification.
  • Navigation buttons (prev/next month/year, Today) now have role="button" and aria-disabled when visually disabled.
  • Disabled and out-of-range date cells include aria-disabled="true" and screen-reader-only explanatory text.
  • Day-of-week column headers provide full day names to screen readers while displaying abbreviations visually.
  • Datepicker button includes an aria-expanded attribute that tracks the calendar open/close state.
  • The calendar drag feature has been disabled because it is not keyboard accessible.
  • Overwrite js/datepicker.js and js/datepicker.min.js with the updated versions.
  • The language file js/lang/en-US.js has a new "Out of range date:" title entry (index 14). Overwrite js/lang/en-US.js and js/lang/en-US.min.js with the updated versions. If you maintain a customized language file, add the new entry manually.

Web Alerts​

  • The web alerts container now acts as an ARIA landmark region. js/webAlerts.js applies role="region" and aria-label="Announcements" to the #webAlerts container at runtime whenever alerts are present.
  • A new data-ariaLabel attribute on the container lets you customize the label without editing JavaScript.

Before (include_nav.html):

<div class="container" id="webAlerts">

After:

<div class="container" id="webAlerts" data-ariaLabel="Announcements">
  • When a modal-style web alert is open, js/webAlerts.js now adds aria-hidden="true" to every direct child of <body> except .alerts-bar and .modal-backdrop.
  • Overwrite js/webAlerts.js and js/webAlerts.min.js with the updated versions.
  • Pressing the Escape key dismisses the cookie consent modal.
  • The "Got it" accept button receives focus automatically when the modal appears.
  • After a keyboard-initiated dismissal, focus moves to the skip-to-content link.
  • Overwrite js/atlasCookieConsent.js with the updated version.
  • On the logon pages, the "Forgot Password?" and "First Time Users" links are now wrapped in a <div role="navigation" aria-label="Account creation and password reset"> landmark.

Before (Logon.html):

<div class="forgot-password-link">
    <a href="aeon.dll?Action=10&amp;Form=84">
        <span aria-hidden="true" class="fas fa-question-circle"></span>  Forgot Password?
    </a>
</div>
<div class="first-time-link">
    <a href="aeon.dll?Action=10&amp;Form=79">
        <span aria-hidden="true" class="fas fa-user-plus"></span>  First Time Users
    </a>
</div>

After:

<div role="navigation" aria-label="Account creation and password reset">
    <div class="forgot-password-link">
        <a href="aeon.dll?Action=10&amp;Form=84">
            <span aria-hidden="true" class="fas fa-question-circle"></span>  Forgot Password?
        </a>
    </div>
    <div class="first-time-link">
        <a href="aeon.dll?Action=10&amp;Form=79">
            <span aria-hidden="true" class="fas fa-user-plus"></span>  First Time Users
        </a>
    </div>
</div>

The same wrapper has been added to Logon2.html.

Forms​

  • The search filter radios on ViewSearchResults.html are now exposed as a proper ARIA radio group with role="radiogroup" and aria-labelledby.
  • On ChangePassword.html, the CurrentPassword field is now required.
  • On Logon.html, Logon2.html, and ForgotPassword.html, the username field is now marked autocomplete="off".
  • Account-management forms (ChangeUserInformation.html, NewUserRegistration.html, NewAuthRegistration.html, and ExpiredUsers.html) now carry HTML5 autocomplete attributes on user, contact, and address fields to support browser autofill and meet WCAG 1.3.5.

Page Structure​

  • The aria-label on the Actions button group inside the activity datarow now correctly reads "Actions for Activity …" and references the activity Id instead of TransactionNumber.

Before (templates/DataRow_DefaultActivity.html):

<div class="btn-group" role="group" aria-label="Actions for Request <#DATAROW field='TransactionNumber'>">

After:

<div class="btn-group" role="group" aria-label="Actions for Activity <#DATAROW field='Id'>">

Appointment Scheduling​

  • After a successful appointment creation, appointments.js now explicitly focuses the "Schedule New Appointment" toggle button and then collapses the creation panel. Overwrite FeaturePages/AppointmentScheduling/js/appointments.js and appointments.min.js with the updated versions.
  • The visually-hidden #calendarNote help text has been expanded. Applies to include_appointment_info.html, include_appointment_info_ead.html, include_appointment_info_no_site.html, ViewAppointments.html, and EditAppointment.html in FeaturePages/AppointmentScheduling/.

Before:

<span id="calendarNote" class="sr-only">A calendar is available below.</span>

After:

<span id="calendarNote" class="visually-hidden">A calendar is available below to view date availability and aid selection.</span>

17. Other Fixes​

Appointment scheduler removal robustness​

appointments.js (and its minified counterpart appointments.min.js) in FeaturePages/AppointmentScheduling/js/ has been updated so that it no longer throws JavaScript console errors on ViewAppointments.html when the appointment scheduler markup has been removed from the page. Overwrite appointments.js and appointments.min.js with the updated versions.