Merge pull request 'Update dependency vue to v3.5.41' (#23) from renovate/vue-3.x into main

Reviewed-on: https://tildegit.org/MarkEEaton/Kingsborough-LibGuide/pulls/23

.eslintrc.js

@@ -1,20 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: [
-    'plugin:vue/vue3-essential',
-    'airbnb-base',
-  ],
-  overrides: [],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  plugins: [
-    'vue',
-  ],
-  rules: {
-  },
-};

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .aider*
 .env
+package-lock.json

eslint.config.js

@@ -0,0 +1,20 @@
+import js from "@eslint/js";
+import pluginVue from "eslint-plugin-vue";
+import prettier from "eslint-config-prettier";
+import globals from "globals";
+
+export default [
+  js.configs.recommended,
+  ...pluginVue.configs["flat/essential"],
+  prettier,
+  {
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      globals: {
+        ...globals.browser,
+      },
+    },
+  },
+];
+

groups/home/bootstrap3/Vue3-v.4-css.html

@@ -1,516 +0,0 @@
-<style>
-  :root {
-    --kbccblue: #003466;
-    --kbccorange: #ff4e00;
-    --text: #111;
-  }
-
-  body {
-    color: var(--text);
-    overflow-x: hidden;
-  }
-
-  a,
-  a:hover {
-    text-decoration: none;
-  }
-
-  /* style slide out chat */
-  #lcs_slide_out_button-21944 {
-    font-size: 1.5em;
-  }
-
-  /* style header */
-  #header-div {
-    padding: 30px;
-  }
-
-  /* style the hamburger menu */
-  #hamburger-container {
-    float: left;
-  }
-  #hamburger,
-  #hamburger:active {
-    border: none;
-    outline: none;
-    background-color: #fff;
-    color: var(--kbccblue);
-  }
-  #hamburger-ul > li > .searchmenu {
-    background-color: #fff;
-  }
-  #hamburger-ul {
-    padding: 25px 0;
-  }
-
-  /* have bootstrap dropdowns fade in and out */
-  .dropdown-menu.fade {
-    display: block;
-    opacity: 0;
-    pointer-events: none;
-  }
-  .open > .dropdown-menu.fade {
-    pointer-events: auto;
-    opacity: 1;
-  }
-  .fade {
-    -webkit-transition-duration: 5s; /* Safari */
-    transition-duration: 0.5s;
-  }
-  .dropdown:hover .dropdown-menu {
-    display: block;
-  }
-
-  /* style the login at the top right */
-  #login-div {
-    float: right;
-    padding: 8px 15px 0 0;
-    color: var(--kbccblue);
-    font-size: 1.5em;
-  }
-  #login-text {
-    display: inline-block;
-    vertical-align: -2px;
-  }
-  #login-icon {
-    display: inline-block;
-    margin-left: 5px;
-  }
-
-  /* style alert */
-  #corona-alert {
-    text-align: center;
-    background-color: #faf870;
-    padding: 5px 50px;
-    cursor: pointer;
-  }
-  #corona-alert-text {
-    color: var(--text);
-    font-size: 1.5em;
-  }
-
-  /* style navbar */
-  nav.navbar-default.main-nav-container {
-    background-color: white;
-    border: none;
-    font-size: 1.4em;
-    color: var(--text);
-    border-radius: 0;
-  }
-  .nav .open > a,
-  .nav .open > a:focus,
-  .nav .open > a:hover {
-    background-color: #fff;
-  }
-  .nav > li > a:hover {
-    outline: none;
-  }
-  .navbar-default .navbar-nav > li > a {
-    color: var(--text);
-  }
-  #navbar-center {
-    display: flex;
-    justify-content: left;
-    float: none;
-  }
-  .ga-main-navbar {
-    font-size: 1.3em;
-  }
-  #dropdownMenu1 {
-    border-radius: 0;
-  }
-  a.searchmenu {
-    color: var(--text);
-  }
-  .highlight-menu-item {
-    padding: 5px;
-  }
-  .highlight-menu-item:hover {
-    cursor: pointer;
-  }
-
-  /* style background image */
-  .kbcc-background-image {
-    background: linear-gradient(
-        to bottom,
-        rgba(255, 255, 255, 0.6) 0%,
-        rgba(255, 255, 255, 0.6) 100%
-      ),
-      url("https://libapps.s3.amazonaws.com/accounts/16298/images/library_front_view.jpg");
-    background-position: 50% 71%;
-    padding: 20px 0;
-    border-radius: 5px;
-    background-size: cover;
-    margin: -30px 0 30px 0;
-  }
-
-  /* style jumbotron */
-  .onesearch-jumbotron {
-    text-align: center;
-    margin-top: -40px;
-  }
-  #onesearch-header {
-    font-size: 10em;
-    margin-bottom: 0;
-  }
-  .zero-margin {
-    margin-left: -2px;
-    margin-right: -2px;
-  }
-
-  .zero-margin {
-    margin: -2px;
-  }
-
-  /* add flex so that blue box-shadows line up */
-  #flex-search-form {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-  }
-  .inherit-height-from-flex {
-    height: inherit;
-  }
-
-  /* shadow for the search bar */
-  #blue-border1 {
-    box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue),
-      -5px -5px 0 var(--kbccblue), -5px 5px 0 var(--kbccblue);
-  }
-  #blue-border2 {
-    box-shadow: 0 -5px 0 var(--kbccblue), 0 5px 0 var(--kbccblue);
-  }
-  #blue-border3 {
-    box-shadow: 0 5px 0 var(--kbccblue), 0 -5px 0 var(--kbccblue),
-      5px -5px 0 var(--kbccblue), 5px 5px 0 var(--kbccblue);
-  }
-
-  /* style for nav by the jumbotron */
-  .nav-divs-by-jumbotron {
-    text-align: center;
-    padding: 6px;
-    margin: 6px 0;
-    color: white;
-    background-color: var(--kbccblue);
-    border-radius: 3px;
-  }
-  .nav-divs-by-jumbotron > h2 {
-    font-size: 1.5em;
-    margin-bottom: 4px;
-    margin-top: 4px;
-  }
-  .nav-divs-by-jumbotron:hover {
-    background-color: #444;
-  }
-  #eq_32886 {
-    background-color: var(--kbccblue);
-    border: none;
-  }
-  .nav-divs-by-jumbotron:hover > h2 > #eq_32886,
-  #eq_32886:hover {
-    background-color: #444;
-  }
-  #bookastudyroom {
-    cursor: pointer;
-  }
-
-  /* style link list */
-  .link-list {
-    font-size: 1.7em;
-  }
-
-  /* style the panels with the text content */
-  .panel > .show-panel {
-    background-color: var(--kbccblue);
-    text-align: center;
-  }
-  .hide-body-border {
-    border: none;
-    box-shadow: none;
-  }
-  .glyphicon-panel-title {
-    font-size: 2em;
-  }
-  .content-panel-title {
-    color: white;
-    font-size: 2em;
-  }
-  .content-panel-title > h2 {
-    margin: 7px 0;
-    font-size: 1em;
-  }
-  .panel-heading {
-    padding: 2px;
-  }
-
-  /* style the gallery */
-  .slick-slide img {
-    padding: 2px;
-    max-height: 350px !important;
-    object-fit: contain;
-    margin: 0;
-  }
-  .s-lib-public-side-header {
-    display: none;
-  }
-  .slick-active {
-    outline: 0;
-  }
-
-  /* make the slick arrows bigger; adjust margin and padding around big arrows */
-  .slick-prev:before, .slick-next:before {
-    font-size: 40px !important;
-  }
-  .slick-prev:before {
-    margin-left: -30px;
-  }
-  button.slick-next.slick-arrow, button.slick-prev.slick-arrow {
-    height: 40px !important;
-    width: 40px !important;
-  }
-  button.slick-next.slick-arrow {
-    padding-top: 3px;
-  }
-  button.slick-prev.slick-arrow {
-    padding: 3px;
-    padding-left: 30px;
-  }
-
-  /* style to make all imported boxes floating */
-  .s-lib-box-title {
-    display: none;
-  }
-  .s-lg-box {
-    box-shadow: none !important;
-  }
-  .s-lib-box .s-lib-box-title {
-    display: none;
-  }
-  .s-lib-box {
-    box-shadow: none !important;
-    border: 0 !important;
-  }
-
-  /* style the dropdown menus */
-  .dropdown-margin {
-    padding: 20px 0;
-  }
-  .bigger-fancy-text {
-    font-size: 1.2em;
-    padding: 5px;
-  }
-  .bigger-icon {
-    font-size: 1.5em;
-    margin-right: 8px;
-  }
-  .caret-text {
-    display: inline-block;
-    color: var(--kbccblue);
-    font-weight: bold;
-  }
-  .fancy-caret {
-    display: inline-block;
-    margin-left: 8px;
-    color: var(--kbccblue);
-  }
-  .open > a > .fancy-caret {
-    margin-bottom: -4px;
-    vertical-align: -4px;
-    display: inline-block;
-  }
-  .open > a > .caret-text {
-    vertical-align: -1px;
-  }
-
-  /* style footer */
-  #orange-line {
-    height: 10px;
-    background-color: var(--kbccorange);
-  }
-  #main-blue-footer {
-    background-color: var(--kbccblue);
-    color: white;
-    padding: 30px;
-  }
-  .whiteahrefs a:link,
-  .whiteahrefs a:hover,
-  .whiteahrefs a:visited,
-  .whiteahrefs a:active {
-    color: white;
-  }
-  .whiteahrefs a i {
-    margin: 4px 5px 0 0;
-    font-size: 1.5em;
-  }
-  .whiteahrefs {
-    margin-top: 10px;
-  }
-  #lighthouse-logo > a > img {
-    max-width: 150px;
-  }
-
-  /* media queries */
-
-  @media only screen and (min-width: 1px) {
-    #library-logo {
-      max-width: 100%;
-      max-height: 150px;
-    }
-    nav.navbar-default.main-nav-container {
-      margin-top: -20px;
-    }
-    .form-width {
-      width: 40%;
-    }
-    .nav-by-jumbotron {
-      margin-top: 40px !important;
-    }
-    #main-blue-footer {
-      min-height: 450px;
-    }
-    .library-address {
-      float: left;
-    }
-    #cuny-logo {
-      float: left;
-      clear: both;
-      margin-top: 10px;
-    }
-    .libapps {
-      float: left;
-      clear: left;
-    }
-  }
-
-  @media only screen and (max-width: 768px) {
-    #login-text {
-      display: none;
-    }
-    #defineYourSearch {
-      display: none;
-    }
-  }
-
-  @media only screen and (min-width: 768px) {
-    .nav-by-jumbotron {
-      margin-top: 0 !important;
-    }
-    #lighthouse-logo {
-      display: inline-block;
-      float: left;
-    }
-    #main-blue-footer {
-      min-height: 210px;
-    }
-    .library-address {
-      display: inline-block;
-      margin: -10px 30px;
-      font-size: 1.1em;
-    }
-    #cuny-logo {
-      float: right;
-      clear: none;
-      margin: -10px 0;
-    }
-    .libapps {
-      float: right;
-      clear: both;
-    }
-  }
-
-  @media only screen and (min-width: 1px) and (max-width: 992px) {
-    #hamburger-alternative {
-      display: none;
-    }
-  }
-
-  @media only screen and (min-width: 992px) {
-    #header-div {
-      text-align: center;
-    }
-    #hamburger,
-    #hamburger-ul {
-      display: none;
-    }
-    #library-logo {
-      max-width: 100%;
-      max-height: 350px;
-    }
-    .form-width {
-      width: 340px;
-    }
-  }
-
-  @media only screen and (min-width: 1200px) {
-    #library-logo {
-      margin-top: -3px;
-    }
-  }
-</style>
-
-<!-- scripts to make the Book a Study Room widget run -->
-<script src="https://kbcc-cuny.libcal.com/js/equipment.min.js"></script>
-<script>
-  jQuery(function () {
-    jQuery("#eq_32886, #bookastudyroom").LibCalEquipmentBooking({
-      iid: 5570,
-      gid: 32886,
-      eid: 0,
-      width: 560,
-      height: 680,
-    });
-  });
-</script>
-
-<!-- If browser is pre-ES6, show a warning-->
-<script>
-  window.isES6 = false;
-</script>
-<script>
-  <!-- test ES6 functionality -->
-  // Arrow functions support
-  () => {};
-
-  // Class support
-  class __ES6FeatureDetectionTest {}
-
-  // Object initializer property and method shorthands
-  let es6a = true;
-  let es6b = {
-    es6a,
-    es6c() {
-      return true;
-    },
-    es6d: [1, 2, 3],
-  };
-
-  // Object destructuring
-  let { es6c, es6d } = es6b;
-
-  // Spread operator
-  let es6e = [...es6d, 4];
-
-  // ternary operator
-  let es6f = es6a ? "ternary" : "no ternary";
-
-  // nullish coalescing
-  es6a ??= 10;
-
-  window.isES6 = true;
-</script>
-
-<script type="text/javascript">
-  window.onload = function () {
-    <!-- display the error message if feature detection flags old browser -->
-    if (window.isES6 == false) {
-      document.getElementById("obsolete_browser_alert").innerHTML =
-        '<div class="alert alert-danger" style="text-align: center;"><strong>WARNING! Unsupported browser!</strong><br />It looks like you\'re using an old browser.<br />This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge.<br />If you continue with this browser, many parts of this site will not work and you will see unexpected results.</div>';
-    }
-  };
-</script>
-
-<!-- FontAwesome -->
-<script
-  src="https://kit.fontawesome.com/4c28f38a07.js"
-  crossorigin="anonymous"
-></script>

groups/home/bootstrap3/Vue3-v.4.html

@@ -1,406 +0,0 @@
-<body class="s-lib-public-body">
-  <!-- Google Tag Manager (noscript) -->
-  <noscript>
-    <iframe
-      src="https://www.googletagmanager.com/ns.html?id=GTM-NXHWQX3"
-      height="0"
-      width="0"
-      style="display: none; visibility: hidden"
-    ></iframe>
-  </noscript>
-  <!-- End Google Tag Manager (noscript) -->
-  <!-- BEGIN: content -->
-  <div id="s-lib-public-main" class="s-lib-main container s-lib-side-borders">
-    <div id="s-lg-index-cols">
-      <div id="app1">
-        <!-- vue app1 -->
-        <div class="row">
-          <div id="obsolete_browser_alert"></div>
-          <div class="col-xs-12" id="header-div">
-            <div class="dropdown" id="hamburger-container">
-              <button
-                class="btn btn-default dropdown-toggle"
-                type="button"
-                data-toggle="dropdown"
-                aria-haspopup="true"
-                aria-expanded="true"
-                aria-label="Hamburger Menu"
-                id="hamburger"
-              >
-                <i class="fas fa-bars" style="font-size: 2em"></i>
-              </button>
-              <ul
-                class="dropdown-menu fade"
-                aria-labelledby="hamburger"
-                id="hamburger-ul"
-              >
-                <li>
-                  <a
-                    v-for="item in hamburger"
-                    v-bind:key="item.id"
-                    class="searchmenu"
-                    v-bind:aria-label="item.description"
-                    v-bind:href="item.link"
-                    v-bind:target="item.target_blank"
-                  >
-                    <hamburger-component v-bind:item="item"></hamburger-component>
-                  </a>
-                </li>
-              </ul>
-            </div>
-            <!-- end of hamburger container -->
-            <a
-              href="https://cuny-kb.primo.exlibrisgroup.com/discovery/account?vid=01CUNY_KB:CUNY_KB"
-              id="login-div"
-              aria-labelledby="login-text"
-            >
-              <div id="login-text">Login</div>
-              <div id="login-icon"><i class="fas fa-user"></i></div>
-            </a>
-            <img
-              id="library-logo"
-              class="image-fail"
-              alt="Kibbee Library logo"
-              src="https://libapps.s3.amazonaws.com/accounts/16298/images/xsmall-2.jpg"
-            />
-            <div
-              id="corona-alert"
-              type="button"
-              data-toggle="modal"
-              data-target=".bs-example-modal-sm"
-            >
-              <span id="corona-alert-text"
-                >Starting 9/16, study room keys will need to be checked out at the circulation desk.</span
-              >
-            </div>
-          </div>
-          <!-- end of header div -->
-          <!-- Modal 
-          <div
-            class="modal fade bs-example-modal-sm"
-            tabindex="-1"
-            role="dialog"
-            aria-labelledby="myModalLabel"
-          >
-            <div class="modal-dialog modal-sm" role="document">
-              <div class="modal-content" style="border-radius: 3px">
-                <div class="modal-body">
-                  <button
-                    type="button"
-                    class="close"
-                    data-dismiss="modal"
-                    aria-label="Close"
-                    style="padding: 5px 5px 12px 12px"
-                  >
-                    <span aria-hidden="true">&times;</span>
-                  </button>
-                  <h4 class="modal-title" id="myModalLabel">
-                    Before returning books to another CUNY library, please make
-                    sure you have updated your vaccine information to Cleared4
-                    or checked rules for visiting that campus.
-                  </h4>
-                </div>
-              </div>
-            </div
-          </div> -->
-          <!-- End of modal -->
-        </div>
-        <!-- end of row -->
-        <div class="row" id="hamburger-alternative">
-          <div class="col-xs-12">
-            <navig-component v-bind:navlistofmenus="navlistofmenus"></navig-component>
-          </div>
-          <!-- end of col-xs-12 -->
-        </div>
-        <!--end of row-->
-      </div>
-      <!--end of Vue app1-->
-    </div>
-    <div class="container" style="margin-top: 14px">
-      <div class="row kbcc-background-image">
-        <div class="col-sm-8">
-          <div id="app2">
-            <onesearch-component></onesearch-component>
-          </div><!-- end of Vue app2 -->
-        </div>
-        <div class="col-sm-4">
-          <div class="nav-by-jumbotron">
-            <a class="ga-by-jumbotron ga-by-jumbotron-rooms">
-              <div class="nav-divs-by-jumbotron" id="bookastudyroom">
-                <h2><button id="eq_32886">Book A Study Room</button></h2>
-              </div>
-            </a>
-            <a
-              href="https://library.kbcc.cuny.edu/az.php"
-              class="ga-by-jumbotron ga-by-jumbotron-databases"
-            >
-              <div class="nav-divs-by-jumbotron">
-                <h2>Databases</h2>
-              </div>
-            </a>
-            <a
-              href="https://library.kbcc.cuny.edu/guides"
-              class="ga-by-jumbotron ga-by-jumbotron-guides"
-            >
-              <div class="nav-divs-by-jumbotron">
-                <h2>Research Guides</h2>
-              </div>
-            </a>
-            <a
-              href="https://kbcc-cuny.libanswers.com/faq/357033"
-              class="ga-by-jumbotron ga-by-jumbotron-print"
-            >
-              <div class="nav-divs-by-jumbotron">
-                <h2>How Do I Print?</h2>
-              </div>
-            </a>
-          </div>
-        </div>
-      </div>
-      <div class="row">
-        <div class="col-md-7 col-lg-6">
-          <div class="panel panel-default hide-body-border">
-            <div class="panel-heading show-panel">
-              <span class="panel-title content-panel-title">
-                <h2>Library Links</h2>
-              </span>
-            </div>
-            <div class="panel-body">
-              <div class="row">
-                <div class="col-sm-6">
-                  <ul class="link-list">
-                    <li>
-                      <a
-                        href="https://library.kbcc.cuny.edu/ENGLISH24"
-                        class="ga-library-links"
-                      >
-                        How to Use the Library
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="https://library.kbcc.cuny.edu/ebooks"
-                        class="ga-library-links"
-                      >
-                        Find eTextbooks and eBooks
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="https://library.kbcc.cuny.edu/video"
-                        class="ga-library-links"
-                      >
-                        Streaming Video
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8156195890006129"
-                        class="ga-library-links"
-                      >
-                        Comic Books & Graphic Novels
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-                <div class="col-sm-6">
-                  <ul class="link-list">
-                    <li>
-                      <a
-                        href="http://kbcc.ezproxy.cuny.edu:2048/login?url=http://search.ebscohost.com/login.aspx?authtype=ip,uid&custid=s9000138&profile=ehost&defaultdb=a9h"
-                        target="_blank"
-                        class="ga-library-links"
-                      >
-                        Academic Search Complete
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="http://kbcc.ezproxy.cuny.edu:2048/login?url=https://search.proquest.com/usmajordailies/advanced/news/fromDatabasesLayer?accountid=38336"
-                        target="_blank"
-                        class="ga-library-links"
-                      >
-                        US Newspapers
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="http://www.nytimes.com/passes"
-                        target="_blank"
-                        class="ga-library-links"
-                      >
-                        NY Times Free Pass
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="https://library.kbcc.cuny.edu/newarrivals/leisure"
-                        class="ga-library-links"
-                      >
-                        Leisure Reading Collection
-                      </a>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="panel panel-default hide-body-border">
-            <div class="panel-heading show-panel">
-              <span class="panel-title content-panel-title">
-                <h2>Today's Library Hours</h2>
-              </span>
-            </div>
-            <div class="panel-body">{{content_box_29248590}}</div>
-          </div>
-        </div>
-        <div class="col-md-5 col-lg-6">
-          <div class="panel panel-default hide-body-border">
-            <div class="panel-heading show-panel">
-              <span class="panel-title content-panel-title">
-                <h2>Featured in the Library</h2>
-              </span>
-            </div>
-            <div class="panel-body">{{content_box_25912431}}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="container">
-      <div class="row">
-        <!-- BEGIN: Page Footer -->
-        <div id="orange-line"></div>
-        <div id="main-blue-footer">
-          <div id="lighthouse-logo">
-            <a href="https://www.kbcc.cuny.edu">
-              <img
-                src="https://libapps.s3.amazonaws.com/accounts/16298/images/Orange_Vector_Mac_Building.png"
-                alt="Kingsborough Lighthouse logo"
-                loading="lazy"
-              />
-            </a>
-          </div>
-          <div class="library-address">
-            <div class="whiteahrefs">
-              <strong>Robert J. Kibbee Library</strong><br />
-              2001 Oriental Blvd<br />
-              Brooklyn, NY, 11209<br />
-              <a href="tel:+1-718-368-5632">718-368-5632</a>
-            </div>
-            <div class="whiteahrefs">
-              <a href="https://kbcc-cuny.libwizard.com/f/reference">
-                reference.desk@kbcc.cuny.edu
-              </a>
-              <br />
-              <a
-                aria-label="Twitter"
-                href="https://twitter.com/KBCCLibrary"
-                target="_blank"
-              >
-                <i aria-hidden="true" class="fa-brands fa-x-twitter"></i>
-              </a>
-              <a
-                aria-label="Instagram"
-                href="https://www.instagram.com/kbcclibrary/"
-                target="_blank"
-              >
-                <i aria-hidden="true" class="fab fa-instagram"></i>
-              </a>
-              <a
-                aria-label="Goodreads"
-                href="https://www.goodreads.com/user/show/51717966-kingsborough-library"
-                target="_blank"
-              >
-                <i aria-hidden="true" class="fab fa-goodreads"></i>
-              </a>
-              <a
-                aria-label="TikTok"
-                href="https://www.tiktok.com/@kbcclibrary?lang=en"
-                target="_blank"
-              >
-                <i aria-hidden="true" class="fab fa-tiktok"></i>
-              </a>
-              <a
-                aria-label="YouTube"
-                href="https://www.youtube.com/channel/UCpeJWrnzLXEizw8cMvVp-_Q/videos"
-                target="_blank"
-              >
-                <i aria-hidden="true" class="fab fa-youtube"></i>
-              </a>
-              <a
-                aria-label="Spotify"
-                href="https://open.spotify.com/user/313lfmvr4ezmkb2mhodzd5ubzg4a"
-                target="_blank"
-              >
-                <i aria-hidden="true" class="fab fa-spotify"></i>
-              </a>
-            </div>
-          </div>
-          <div id="cuny-logo">
-            <a href="https://www.cuny.edu" target="_blank">
-              <img
-                src="https://libapps.s3.amazonaws.com/accounts/16298/images/CUNYlogo-white.png"
-                alt="CUNY logo"
-                loading="lazy"
-              />
-            </a>
-          </div>
-          <div class="whiteahrefs libapps">
-            <a
-              href="https://kbcc-cuny.libapps.com/libapps/login.php?site_id=2365"
-            >
-              LibApps
-            </a>
-            |
-            <a
-              href="https://cuny-kb.alma.exlibrisgroup.com/mng/login?auth=SAML"
-            >
-              Alma
-            </a>
-          </div>
-          <div style="height: 10px"></div>
-        </div>
-        <!-- END: Page Footer -->
-      </div>
-    </div>
-  </div>
-
-  <div id="s-lib-alert" title="">
-    <div id="s-lib-alert-content"></div>
-  </div>
-  <div id="s-lib-popover-title" class="hide">
-    <span class="text-info"><strong>title</strong></span>
-    <button
-      type="button"
-      id="popclose"
-      class="close"
-      onclick="jQuery('.s-lib-popover').popover('hide')"
-    >
-      &times;
-    </button>
-  </div>
-  <div id="s-lib-popover-content" class="hide">
-    <i class="fa fa-refresh fa-spin"></i> Loading...
-    <button class="btn btn-default btn-sm popclose" type="button">Close</button>
-  </div>
-  <div id="s-lib-scroll-top" title="Back to Top">
-    <span class="fa-stack fa-lg">
-      <i class="fa fa-square-o fa-stack-2x"></i>
-      <i
-        class="fa fa-angle-double-up fa-stack-1x"
-        style="position: relative; bottom: 2px"
-      ></i>
-    </span>
-  </div>
-
-  <!-- LibChat widget script -->
-  <script src="https://kbcc-cuny.libanswers.com/load_chat.php?hash=f7d1629a91e178fd0f799322e803b6e7"></script>
-
-  <!-- add Vue scripts -->
-  <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> development -->
-  <script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script><!--production -->
-  <script
-    type="text/javascript"
-    src="https://libapps.s3.amazonaws.com/sites/2365/include/main4.js"
-  ></script>
-</body>

groups/home/bootstrap3/Vue3-v.7-css.html

@@ -15,6 +15,37 @@
     text-decoration: none;
   }
 
+  /* Skip link styles (WCAG 2.4.1) */
+  .skip-link {
+    position: absolute;
+    top: -40px;
+    left: 0;
+    background: var(--kbccblue);
+    color: #fff;
+    padding: 8px 16px;
+    z-index: 10000;
+    text-decoration: none;
+    font-weight: bold;
+  }
+  .skip-link:focus {
+    top: 0;
+    outline: 3px solid var(--kbccorange);
+    outline-offset: 2px;
+  }
+
+  /* Screen reader only class for visually hidden content */
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
   /* style slide out chat */
   #lcs_slide_out_button-21944 {
     font-size: 1.5em;
@@ -57,10 +88,18 @@
     -webkit-transition-duration: 5s; /* Safari */
     transition-duration: 0.5s;
   }
-  .dropdown:hover .dropdown-menu {
+  /* Show dropdown on hover AND keyboard focus (WCAG 2.1.1) */
+  .dropdown:hover .dropdown-menu,
+  .dropdown:focus-within .dropdown-menu {
     display: block;
   }
 
+  /* Navigation dropdown keyboard support (WCAG 2.1.1) */
+  .main-nav-dropdown:focus-within > .dropdown-menu.fade {
+    pointer-events: auto;
+    opacity: 1;
+  }
+
   /* style the login at the top right */
   #login-div {
     float: right;
@@ -86,11 +125,18 @@
   .searchmenu:focus-visible,
   .nav-jumbotron-link:focus,
   .nav-jumbotron-link:focus-visible,
+  .ga-by-jumbotron:focus,
+  .ga-by-jumbotron:focus-visible,
+  .ga-library-links:focus,
+  .ga-library-links:focus-visible,
   /* OneSearch widget (central search form) */
   .onesearch-jumbotron input:focus,
   .onesearch-jumbotron input:focus-visible,
   .onesearch-jumbotron button:focus,
-  .onesearch-jumbotron button:focus-visible {
+  .onesearch-jumbotron button:focus-visible,
+  /* Navigation dropdown toggles */
+  .dropdown-toggle:focus,
+  .dropdown-toggle:focus-visible {
     outline: 3px solid #0056b3; /* high-contrast blue */
     outline-offset: 2px;
   }
@@ -116,6 +162,10 @@
     font-size: 1.4em;
     color: var(--text);
     border-radius: 0;
+    padding: 10px 0;
+  }
+  .main-nav-dropdown {
+    margin: 0 8px;
   }
   .nav .open > a,
   .nav .open > a:focus,
@@ -135,6 +185,8 @@
   }
   .ga-main-navbar {
     font-size: 1.3em;
+    background-color: transparent;
+    border: none;
   }
   #dropdownMenu1 {
     border-radius: 0;
@@ -176,6 +228,8 @@
   #onesearch-header {
     font-size: 10em;
     margin-bottom: 0;
+    line-height: 1;
+    padding-top: 30px;
   }
   .form-width {
     width: 100%;
@@ -276,6 +330,13 @@
     font-size: 1.7em;
   }
 
+  /* External link icon styling (WCAG 2.4.4) */
+  .external-link-icon {
+    font-size: 0.7em;
+    margin-left: 4px;
+    vertical-align: middle;
+  }
+
   /* style the panels with the text content */
   .panel > .show-panel {
     background-color: var(--kbccblue);
@@ -580,7 +641,7 @@
     <!-- display the error message if feature detection flags old browser -->
     if (window.isES6 == false) {
       document.getElementById("obsolete_browser_alert").innerHTML =
-        '<div class="alert alert-danger" style="text-align: center;"><strong>WARNING! Unsupported browser!</strong><br />It looks like you\'re using an old browser.<br />This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge.<br />If you continue with this browser, many parts of this site will not work and you will see unexpected results.</div>';
+        '<div class="alert alert-danger" role="alert" style="text-align: center;"><strong>WARNING! Unsupported browser!</strong><br />It looks like you\'re using an old browser.<br />This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge.<br />If you continue with this browser, many parts of this site will not work and you will see unexpected results.</div>';
     }
   };
 </script>

groups/home/bootstrap3/Vue3-v.7.html

@@ -9,8 +9,15 @@
     ></iframe>
   </noscript>
   <!-- End Google Tag Manager (noscript) -->
+
+  <!-- Skip Navigation Link (WCAG 2.4.1) -->
+  <a href="#main-content" class="skip-link">Skip to main content</a>
+
   <!-- BEGIN: content -->
   <div id="s-lib-public-main" class="s-lib-main container s-lib-side-borders">
+    <!-- Visually hidden H1 for proper heading hierarchy (WCAG 1.3.1, 2.4.6) -->
+    <h1 class="sr-only">Robert J. Kibbee Library - Kingsborough Community College</h1>
+
     <div id="s-lg-index-cols">
       <div id="app1">
         <!-- vue app1 -->
@@ -23,11 +30,11 @@
                 type="button"
                 data-toggle="dropdown"
                 aria-haspopup="true"
-                aria-expanded="true"
-                aria-label="Hamburger Menu"
+                aria-expanded="false"
+                aria-label="Main menu"
                 id="hamburger"
               >
-                <i class="fas fa-bars" style="font-size: 2em"></i>
+                <i class="fas fa-bars" aria-hidden="true" style="font-size: 2em"></i>
               </button>
               <ul
                 class="dropdown-menu fade"
@@ -40,7 +47,7 @@
                 >
                   <a
                     class="searchmenu"
-                    v-bind:aria-label="item.description"
+                    v-bind:aria-label="item.description + (item.target_blank ? ' (opens in new tab)' : '')"
                     v-bind:href="item.link"
                     v-bind:target="item.target_blank"
                   >
@@ -53,10 +60,10 @@
             <a
               href="https://cuny-kb.primo.exlibrisgroup.com/discovery/account?vid=01CUNY_KB:CUNY_KB"
               id="login-div"
-              aria-labelledby="login-text"
+              aria-label="Login to your library account"
             >
               <div id="login-text">Login</div>
-              <div id="login-icon"><i class="fas fa-user"></i></div>
+              <div id="login-icon"><i class="fas fa-user" aria-hidden="true"></i></div>
             </a>
             <img
               id="library-logo"
@@ -87,7 +94,7 @@
           </div><!-- end of Vue app2 -->
         </div>
         <div class="col-sm-4">
-          <div class="nav-by-jumbotron">
+          <div class="nav-by-jumbotron" id="main-content">
             <button
               id="eq_32886"
               type="button"
@@ -179,17 +186,21 @@
                         href="http://kbcc.ezproxy.cuny.edu/login?url=https://search.ebscohost.com/login.aspx?authtype=ip,uid&custid=s9000138&profile=ehost&defaultdb=a9h"
                         target="_blank"
                         class="ga-library-links"
+                        aria-label="Academic Search Complete (opens in new tab)"
                       >
                         Academic Search Complete
+                        <i class="fas fa-external-link-alt external-link-icon" aria-hidden="true"></i>
                       </a>
                     </li>
                     <li>
                       <a
-                        href="http://kbcc.ezproxy.cuny.edu:2048/login?url=https://search.proquest.com/usmajordailies/advanced/news/fromDatabasesLayer?accountid=38336"
+                        href="http://kbcc.ezproxy.cuny.edu/login?url=https://search.proquest.com/usmajordailies/advanced/news/fromDatabasesLayer?accountid=38336"
                         target="_blank"
                         class="ga-library-links"
+                        aria-label="US Newspapers (opens in new tab)"
                       >
                         US Newspapers
+                        <i class="fas fa-external-link-alt external-link-icon" aria-hidden="true"></i>
                       </a>
                     </li>
                     <li>
@@ -197,8 +208,10 @@
                         href="http://www.nytimes.com/passes"
                         target="_blank"
                         class="ga-library-links"
+                        aria-label="NY Times Free Pass (opens in new tab)"
                       >
-                        NY Times Free Pass
+                        NY Times Pass
+                        <i class="fas fa-external-link-alt external-link-icon" aria-hidden="true"></i>
                       </a>
                     </li>
                     <li>
@@ -250,35 +263,35 @@
             </div>
             <div class="whiteahrefs">
               <a
-                aria-label="Instagram"
+                aria-label="Instagram (opens in new tab)"
                 href="https://www.instagram.com/kbcclibrary/"
                 target="_blank"
               >
                 <i aria-hidden="true" class="fab fa-instagram"></i>
               </a>
               <a
-                aria-label="Goodreads"
+                aria-label="Goodreads (opens in new tab)"
                 href="https://www.goodreads.com/user/show/51717966-kingsborough-library"
                 target="_blank"
               >
                 <i aria-hidden="true" class="fab fa-goodreads"></i>
               </a>
               <a
-                aria-label="TikTok"
+                aria-label="TikTok (opens in new tab)"
                 href="https://www.tiktok.com/@kbcclibrary?lang=en"
                 target="_blank"
               >
                 <i aria-hidden="true" class="fab fa-tiktok"></i>
               </a>
               <a
-                aria-label="YouTube"
+                aria-label="YouTube (opens in new tab)"
                 href="https://www.youtube.com/channel/UCpeJWrnzLXEizw8cMvVp-_Q/videos"
                 target="_blank"
               >
                 <i aria-hidden="true" class="fab fa-youtube"></i>
               </a>
               <a
-                aria-label="Spotify"
+                aria-label="Spotify (opens in new tab)"
                 href="https://open.spotify.com/user/313lfmvr4ezmkb2mhodzd5ubzg4a"
                 target="_blank"
               >
@@ -287,7 +300,11 @@
             </div>
           </div>
           <div id="cuny-logo">
-            <a href="https://www.cuny.edu" target="_blank">
+            <a
+              href="https://www.cuny.edu"
+              target="_blank"
+              aria-label="CUNY (opens in new tab)"
+            >
               <img
                 src="https://libapps.s3.amazonaws.com/accounts/16298/images/CUNYlogo-white.png"
                 alt="CUNY logo"
@@ -325,16 +342,17 @@
       id="popclose"
       class="close"
       onclick="jQuery('.s-lib-popover').popover('hide')"
+      aria-label="Close popover"
     >
       &times;
     </button>
   </div>
   <div id="s-lib-popover-content" class="hide">
-    <i class="fa fa-refresh fa-spin"></i> Loading...
+    <i class="fa fa-refresh fa-spin" aria-hidden="true"></i> Loading...
     <button class="btn btn-default btn-sm popclose" type="button">Close</button>
   </div>
   <div id="s-lib-scroll-top" title="Back to Top">
-    <span class="fa-stack fa-lg">
+    <span class="fa-stack fa-lg" aria-hidden="true">
       <i class="fa fa-square-o fa-stack-2x"></i>
       <i
         class="fa fa-angle-double-up fa-stack-1x"
@@ -351,6 +369,6 @@
   <script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script><!-- production -->
   <script
     type="text/javascript"
-    src="https://libapps.s3.amazonaws.com/sites/2365/include/main6.js"
+    src="https://libapps.s3.amazonaws.com/sites/2365/include/main7.js"
   ></script>
 </body>

groups/home/bootstrap3/src/main2.js

@@ -1,245 +0,0 @@
-const navComponent = {
-  template:
-    `<a>
-      <a class="dropdown-toggle ga-main-navbar" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-        <div class="caret-text">{{ navkey }}</div>
-        <div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div>
-      </a>
-      <ul class="dropdown-menu fade dropdown-margin">
-        <li>
-          <a v-for="item in navmenu" v-bind:key="item.id" class="searchmenu" v-bind:aria-label="item.description" v-bind:href="item.link" v-bind:target="item.target_blank">
-            <div class="bigger-fancy-text">
-              <i v-bind:class="item.icon" aria-hidden="true"></i>
-              <strong>{{ item.description }}</strong>
-            </div>
-          </a>
-        </li>
-      </ul>
-    </a>`,
-  props: ['navmenu', 'navkey']
-}
-
-const menusComponent = {
-  template:
-  `<div class="bigger-fancy-text">
-    <i v-bind:class="item.icon" aria-hidden="true"></i>
-    <strong>{{ item.description }}</strong>
-  </div>`,
-   props: ['item'] 
-}
-
-const { createApp } = Vue
-
-createApp({
-  components: {
-    'nav-component': navComponent,
-    'menus-component': menusComponent
-  },
-  data() {
-    return {
-      hamburger: [
-        {
-          link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en",
-          icon: "fas fa-search fa-fw bigger-icon",
-          description: "OneSearch",
-          target_blank: "",
-          id: 1
-        },
-        {
-          link: "https://library.kbcc.cuny.edu/az.php",
-          icon: "fas fa-database fa-fw bigger-icon",
-          description: "Databases A to Z",
-          target_blank: "",
-          id: 2
-        },
-        {
-          link: "https://library.kbcc.cuny.edu/guides",
-          icon: "fas fa-telescope fa-fw bigger-icon",
-          description: "Research Guides",
-          target_blank: "",
-          id: 3
-        },
-        {
-          link: "https://library.kbcc.cuny.edu/faq",
-          icon: "fas fa-question-circle fa-fw bigger-icon",
-          description: "FAQ",
-          target_blank: "",
-          id: 4
-        },
-        {
-          link: "https://library.kbcc.cuny.edu/calendar",
-          icon: "fas fa-clock fa-fw bigger-icon",
-          description: "Library Hours",
-          target_blank: "",
-          id: 5
-        },
-        {
-          link: "https://library.kbcc.cuny.edu/sitemap",
-          icon: "fas fa-location-arrow fa-fw bigger-icon",
-          description: "Site Map",
-          target_blank: "",
-          id: 6
-        }
-      ],
-      navListOfMenus: { 
-        "Find It": [
-          {
-            link: "https://library.kbcc.cuny.edu/az.php",
-            icon: "fas fa-database fa-fw bigger-icon",
-            description: "Databases A to Z",
-            target_blank: "",
-            id: 1
-          },
-          {
-            link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch?vid=01CUNY_KB:CUNY_KB&search_scope=all",
-            icon: "fas fa-newspaper fa-fw bigger-icon",
-            description: "Newspaper Search",
-            target_blank: "",
-            id: 2
-          },
-          {
-            link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&tab=CourseReserves&search_scope=CourseReserves",
-            icon: "fas fa-cloud-download-alt fa-fw bigger-icon",
-            description: "Course Reserves",
-            target_blank: "",
-            id: 3
-          },
-          {
-            link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch?vid=01CUNY_KB:CUNY_KB",
-            icon: "fas fa-book fa-fw bigger-icon",
-            description: "Search for Specific Journals",
-            target_blank: "",
-            id: 4
-          },
-          {
-            link: "https://library.kbcc.cuny.edu/academicworks",
-            icon: "fas fa-archive fa-fw bigger-icon",
-            description: "CUNY Academic Works",
-            target_blank: "_blank",
-            id: 5
-          },
-          {
-            link: "https://www.bkstr.com/kingsboroughccstore/home",
-            icon: "fas fa-cash-register fa-fw bigger-icon",
-            description: "KBCC Bookstore",
-            target_blank: "_blank",
-            id: 6
-          }
-        ],
-        "Services": [
-          {
-            link: "http://kbcc.cuny.illiad.oclc.org/illiad/logon.html",
-            icon: "fas fa-books fa-fw bigger-icon",
-            description: "Interlibrary Loan",
-            target_blank: "_blank",
-            id: 1
-          },
-          {
-            link: "https://library.kbcc.cuny.edu/libraryservices/informationliteracy",
-            icon: "fas fa-chalkboard-teacher fa-fw bigger-icon",
-            description: "Book a Library Instruction Session" ,
-            target_blank: "",
-            id: 2
-          },
-          {
-            link: "https://library.kbcc.cuny.edu/mediaservices",
-            icon: "fas fa-photo-video fa-fw bigger-icon",
-            description: "Media Services",
-            target_blank: "",
-            id: 3
-          },
-          {
-            link: "https://kbcc-cuny.libwizard.com/f/bookrequest",
-            icon: "fas fa-shopping-basket fa-fw bigger-icon",
-            description: "Suggest a Book for Purchase",
-            target_blank: "",
-            id: 4
-          },
-          {
-            link: "https://kbcc-cuny.libwizard.com/id/8cdb3f1a787de3c307a8cf5d75cad406",
-            icon: "fas fa-bookmark fa-fw bigger-icon",
-            description: "Suggest an Item to Add to Reserves",
-            target_blank: "",
-            id: 5
-          }
-        ],
-        "About Us": [
-          {
-            link: "https://library.kbcc.cuny.edu/about-us/directory",
-            icon: "fas fa-address-book fa-fw bigger-icon",
-            description: "Faculty & Staff Directory",
-            target_blank: "",
-            id: 1
-          },
-          {
-            link: "https://library.kbcc.cuny.edu/newarrivals",
-            icon: "far fa-mail-bulk fa-fw bigger-icon",
-            description: "New Arrivals",
-            target_blank: "",
-            id: 2
-          },
-          {
-            link: "https://library.kbcc.cuny.edu/about-us/liaisons",
-            icon: "fas fa-theater-masks fa-fw bigger-icon",
-            description: "Subject Liaisons",
-            target_blank: "",
-            id: 3
-          },
-          {
-            link: "https://library.kbcc.cuny.edu/social",
-            icon: "far fa-hashtag fa-fw bigger-icon",
-            description: "Social Media",
-            target_blank: "",
-            id: 4
-          }
-        ],
-        "Location & Hours": [
-          {
-            link: "https://tour.kingsborough.edu/",
-            icon: "fas fa-map-marked-alt fa-fw bigger-icon",
-            description: "Campus Map",
-            target_blank: "",
-            id: 1
-          },
-          {
-            link: "https://library.kbcc.cuny.edu/calendar",
-            icon: "fas fa-clock fa-fw bigger-icon",
-            description: "Library Hours",
-            target_blank: "",
-            id: 2
-          }
-        ],
-        "Help": [
-          {
-            link: "https://library.kbcc.cuny.edu/askalibrarian",
-            icon: "fas fa-book-reader fa-fw bigger-icon",
-            description: "Ask A Librarian",
-            target_blank: "",
-            id: 1
-          },
-          {
-            link: "https://library.kbcc.cuny.edu/faq",
-            icon: "fas fa-question-circle fa-fw bigger-icon",
-            description: "FAQ",
-            target_blank: "",
-            id: 2
-          },
-          {
-            link: "https://library.kbcc.cuny.edu/guides",
-            icon: "fas fa-telescope fa-fw bigger-icon",
-            description: "Research Guides and Tutorials",
-            target_blank: "",
-            id: 3
-          },
-          {
-            link: "https://library.kbcc.cuny.edu/ENGLISH24",
-            icon: "fas fa-question fa-fw bigger-icon",
-            description: "How to Use the Library",
-            target_blank: "",
-            id: 4
-          }
-        ]
-  	  }
-    }
-  }
-}).mount('#app');

groups/home/bootstrap3/src/main4.js

@@ -1,452 +0,0 @@
-const hamburgerComponent = {
-  template: `<div class="bigger-fancy-text">
-    <i v-bind:class="item.icon" aria-hidden="true"></i>
-    <strong>{{ item.description }}</strong>
-  </div>`,
-  props: ["item"],
-};
-
-const navigComponent = {
-  template: `<nav class="navbar navbar-default main-nav-container">
-    <div class="container-fluid">
-      <ul class="nav navbar-nav" id="navbar-center">
-        <li v-for="(navmenu, navkey) in navlistofmenus"
-            v-bind:key="navmenu.id"
-            class="dropdown main-nav-dropdown"
-        >
-          <a>
-            <a class="dropdown-toggle ga-main-navbar"
-               data-toggle="dropdown"
-               role="button"
-               aria-haspopup="true"
-               aria-expanded="false"
-            >
-              <div class="caret-text">{{ navkey }}</div>
-              <div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div>
-            </a>
-            <ul class="dropdown-menu fade dropdown-margin">
-              <li>
-                <a v-for="item in navmenu.data"
-                   v-bind:key="item.id"
-                   class="searchmenu"
-                   v-bind:aria-label="item.description"
-                   v-bind:href="item.link"
-                   v-bind:target="item.target_blank"
-                >
-                  <div class="bigger-fancy-text">
-                    <i v-bind:class="item.icon" aria-hidden="true"></i>
-                    <strong>{{ item.description }}</strong>
-                  </div>
-                </a>
-              </li>
-            </ul>
-          </a>
-        </li>
-      </ul>
-    </div>
-  </nav>`,
-  props: ["navlistofmenus"],
-};
-
-const onesearchComponent = {
-  template: `<form class="form-inline onesearch-jumbotron"
-      name="searchPrimoForm1"
-      ref="oneSearchForm"
-      role="search"
-      method="get"
-      :action="selecteditem.baseUrl"
-      enctype="application/x-www-form-urlencoded; charset=utf-8"
-  >
-    <!-- default is "everything"  option suggested from OLS widget builder -->
-    <div v-if="selecteditem.input" v-html="selecteditem.input"></div>
-    <input name="vid" value="01CUNY_KB:CUNY_KB" type="hidden" />
-    <input name="tab" :value="selecteditem.tab" type="hidden" />
-    <input name="search_scope" :value="selecteditem.searchScope" type="hidden" />
-    <input name="mode" value="basic" type="hidden" />
-    <input name="highlight" value="true" type="hidden" />
-    <input name="displayMode" value="full" type="hidden" />
-    <input name="bulkSize" value="10" type="hidden" />
-    <input name="dum" value="true" type="hidden" />
-    <input name="displayField" value="all" type="hidden" />
-    <input name="pcAvailabiltyMode" value="false" type="hidden" />
-    <input name="query" ref="primoQueryString" type="hidden" />
-    <h1 id="onesearch-header">
-        <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en">
-            <img class="image-fail onesearchsubmit" src="https://libapps.s3.amazonaws.com/accounts/16298/images/onesearch_logo.png" alt="OneSearch" />
-        </a>
-    </h1>
-    <div class="form-group" id="flex-search-form">
-        <div class="dropdown input-group zero-margin" id="blue-border1" ref="blueBorder1">
-            <button class="btn btn-default dropdown-toggle"
-                    type="button"
-                    id="dropdownMenu1"
-                    ref="oneSearchMenu"
-                    data-toggle="dropdown"
-                    aria-haspopup="true"
-                    aria-expanded="true"
-                    aria-label="Define Your Search"
-            >
-                <span id="defineYourSearch">{{ displayeditem }}&nbsp;</span>
-                <span class="caret"></span>
-            </button>
-            <ul class="dropdown-menu fade dropdown-margin" aria-labelledby="dropdownMenu1">
-                <li>
-                    <a v-for="(item, itemName) in materialtype"
-                       :key="item.id"
-                       class="searchmenu"
-                       @click="selectdropdown(item, itemName)"
-                    >
-                        <div class="highlight-menu-item bigger-fancy-text">
-                            <strong>{{ item.fullName }}</strong>
-                        </div>
-                    </a>
-                    <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&lang=en&mode=advanced" class="searchmenu">
-                        <div class="highlight-menu-item bigger-fancy-text">
-                            <strong>Advanced Search</strong>
-                        </div>
-                    </a>
-                </li>
-            </ul>
-        </div>
-        <label class="sr-only" for="primoQueryTemp">Search terms</label>
-        <div class="input-group zero-margin form-width" id="blue-border2">
-            <input class="form-control form-width inherit-height-from-flex"
-                   name="queryTemp"
-                   id="primoQueryTemp"
-                   ref="primoQueryTempString"
-                   type="search"
-                   v-model="searchstring"
-                   :placeholder="placeholderstring"
-             />
-        </div>
-        <div class="input-group zero-margin" id="blue-border3">
-            <input type="submit"
-                   class="btn btn-default form-control onesearchsubmit inherit-height-from-flex"
-                   value="Search"
-                   @click.stop.prevent="submitSearch"
-            />
-        </div>
-    </div>
-</form>`,
-  methods: {
-    selectdropdown(item, itemName) {
-      this.displayeditem = itemName; // swap in current item at the top of the dropdown
-      this.selecteditem = item; // store the data from the dropdown selection
-      this.placeholderstring = "Enter search term here";
-    },
-    submitSearch() {
-      if (this.displayeditem === "Define Your Search") {
-        this.placeholderstring = "Please make a selection";
-        this.searchstring = ""; // remove the search string
-        if (!this.$refs.blueBorder1.classList.contains("open")) {
-          // if the dropdown is not open
-          this.$refs.oneSearchMenu.click(); // open the dropdown
-        }
-      } else {
-        this.$refs.primoQueryString.value = `any,contains,${this.$refs.primoQueryTempString.value.replace(
-          /[,]/g,
-          " "
-        )}`; // vueified OLS widget code
-        this.$refs.oneSearchForm.submit(); // submit the form
-      }
-    },
-  },
-  data() {
-    return {
-      selecteditem: {}, // initialize the data from the dropdown selection
-      searchstring: "", // initialize an empty search string
-      placeholderstring: "Enter search term here", // initialize the placeholder
-      displayeditem: "Define Your Search", // the text displayed a the top of the OneSearch dropdown
-      materialtype: {
-        Books: {
-          fullName: "Books",
-          baseUrl: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search",
-          tab: "Everything",
-          searchScope: "IZ_CI_AW",
-          input:
-            '<input name="facet" value="rtype,include,books" type="hidden" />',
-          id: 1,
-        },
-        Articles: {
-          fullName: "Articles (Peer reviewed)",
-          baseUrl: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search",
-          tab: "Everything",
-          searchScope: "IZ_CI_AW",
-          input:
-            '<input name="mfacet" value="rtype,include,articles,1" type="hidden" /><input name="facet" value="tlevel,include,peer_reviewed" type="hidden" />',
-          id: 2,
-        },
-        Reserves: {
-          fullName: "Course reserves",
-          baseUrl: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search",
-          tab: "CourseReserves",
-          searchScope: "CourseReserves",
-          input: "",
-          id: 3,
-        },
-        Newspapers: {
-          fullName: "Newspapers and Magazines",
-          baseUrl: "https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch",
-          tab: "Everything",
-          searchScope: "IZ_CI_AW",
-          input: "",
-          id: 4,
-        },
-        Journals: {
-          fullName: "Journals",
-          baseUrl: "https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch",
-          tab: "jsearch_slot",
-          searchScope: "IZ_CI_AW",
-          input: "",
-          id: 5,
-        },
-      },
-    };
-  },
-};
-
-const { createApp } = Vue;
-
-const app1 = createApp({
-  components: {
-    "navig-component": navigComponent,
-    "hamburger-component": hamburgerComponent,
-  },
-  data() {
-    return {
-      hamburger: [
-        {
-          link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en",
-          icon: "fas fa-search fa-fw bigger-icon",
-          description: "OneSearch",
-          target_blank: "",
-          id: 1,
-        },
-        {
-          link: "https://library.kbcc.cuny.edu/az.php",
-          icon: "fas fa-database fa-fw bigger-icon",
-          description: "Databases A to Z",
-          target_blank: "",
-          id: 2,
-        },
-        {
-          link: "https://library.kbcc.cuny.edu/guides",
-          icon: "fas fa-telescope fa-fw bigger-icon",
-          description: "Research Guides",
-          target_blank: "",
-          id: 3,
-        },
-        {
-          link: "https://library.kbcc.cuny.edu/faq",
-          icon: "fas fa-question-circle fa-fw bigger-icon",
-          description: "FAQ",
-          target_blank: "",
-          id: 4,
-        },
-        {
-          link: "https://library.kbcc.cuny.edu/calendar",
-          icon: "fas fa-clock fa-fw bigger-icon",
-          description: "Library Hours",
-          target_blank: "",
-          id: 5,
-        },
-        {
-          link: "https://library.kbcc.cuny.edu/sitemap",
-          icon: "fas fa-location-arrow fa-fw bigger-icon",
-          description: "Site Map",
-          target_blank: "",
-          id: 6,
-        },
-      ],
-      navlistofmenus: {
-        "Find It": {
-          id: 1,
-          data: [
-            {
-              link: "https://library.kbcc.cuny.edu/az.php",
-              icon: "fas fa-database fa-fw bigger-icon",
-              description: "Databases A to Z",
-              target_blank: "",
-              id: 1,
-            },
-            {
-              link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch?vid=01CUNY_KB:CUNY_KB&search_scope=all",
-              icon: "fas fa-newspaper fa-fw bigger-icon",
-              description: "Newspaper Search",
-              target_blank: "",
-              id: 2,
-            },
-            {
-              link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&tab=CourseReserves&search_scope=CourseReserves",
-              icon: "fas fa-cloud-download-alt fa-fw bigger-icon",
-              description: "Course Reserves",
-              target_blank: "",
-              id: 3,
-            },
-            {
-              link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch?vid=01CUNY_KB:CUNY_KB",
-              icon: "fas fa-book fa-fw bigger-icon",
-              description: "Search for Specific Journals",
-              target_blank: "",
-              id: 4,
-            },
-            {
-              link: "https://library.kbcc.cuny.edu/academicworks",
-              icon: "fas fa-archive fa-fw bigger-icon",
-              description: "CUNY Academic Works",
-              target_blank: "_blank",
-              id: 5,
-            },
-            {
-              link: "https://kbcc.textbookx.com/institutional/index.php",
-              icon: "fas fa-cash-register fa-fw bigger-icon",
-              description: "KBCC Bookstore",
-              target_blank: "_blank",
-              id: 6,
-            },
-          ],
-        },
-        Services: {
-          id: 2,
-          data: [
-            {
-              link: "https://kbcc-cuny.illiad.oclc.org/illiad/logon.html",
-              icon: "fas fa-books fa-fw bigger-icon",
-              description: "Interlibrary Loan",
-              target_blank: "_blank",
-              id: 1,
-            },
-            {
-              link: "https://library.kbcc.cuny.edu/libraryservices/informationliteracy",
-              icon: "fas fa-chalkboard-teacher fa-fw bigger-icon",
-              description: "Book a Library Instruction Session",
-              target_blank: "",
-              id: 2,
-            },
-            {
-              link: "https://library.kbcc.cuny.edu/mediaservices",
-              icon: "fas fa-photo-video fa-fw bigger-icon",
-              description: "Media Services",
-              target_blank: "",
-              id: 3,
-            },
-            {
-              link: "https://kbcc-cuny.libanswers.com/form?queue_id=6967",
-              icon: "fas fa-shopping-basket fa-fw bigger-icon",
-              description: "Suggest a Book for Purchase",
-              target_blank: "",
-              id: 4,
-            },
-            {
-              link: "https://kbcc-cuny.libwizard.com/id/8cdb3f1a787de3c307a8cf5d75cad406",
-              icon: "fas fa-bookmark fa-fw bigger-icon",
-              description: "Suggest an Item to Add to Reserves",
-              target_blank: "",
-              id: 5,
-            },
-          ],
-        },
-        "About Us": {
-          id: 3,
-          data: [
-            {
-              link: "https://library.kbcc.cuny.edu/about-us/directory",
-              icon: "fas fa-address-book fa-fw bigger-icon",
-              description: "Faculty & Staff Directory",
-              target_blank: "",
-              id: 1,
-            },
-            {
-              link: "https://library.kbcc.cuny.edu/newarrivals",
-              icon: "far fa-mail-bulk fa-fw bigger-icon",
-              description: "New Arrivals",
-              target_blank: "",
-              id: 2,
-            },
-            {
-              link: "https://library.kbcc.cuny.edu/about-us/liaisons",
-              icon: "fas fa-theater-masks fa-fw bigger-icon",
-              description: "Subject Liaisons",
-              target_blank: "",
-              id: 3,
-            },
-            {
-              link: "https://library.kbcc.cuny.edu/social",
-              icon: "far fa-hashtag fa-fw bigger-icon",
-              description: "Social Media",
-              target_blank: "",
-              id: 4,
-            },
-            {
-              link: "https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB",
-              icon: "fa-solid fa-star fa-fw bigger-icon",
-              description: "Featured Collections",
-              target_blank: "",
-              id: 5,
-            },
-          ],
-        },
-        "Location & Hours": {
-          id: 4,
-          data: [
-            {
-              link: "https://tour.kingsborough.edu/",
-              icon: "fas fa-map-marked-alt fa-fw bigger-icon",
-              description: "Campus Map",
-              target_blank: "",
-              id: 1,
-            },
-            {
-              link: "https://library.kbcc.cuny.edu/calendar",
-              icon: "fas fa-clock fa-fw bigger-icon",
-              description: "Library Hours",
-              target_blank: "",
-              id: 2,
-            },
-          ],
-        },
-        Help: {
-          id: 5,
-          data: [
-            {
-              link: "https://library.kbcc.cuny.edu/askalibrarian",
-              icon: "fas fa-book-reader fa-fw bigger-icon",
-              description: "Ask A Librarian",
-              target_blank: "",
-              id: 1,
-            },
-            {
-              link: "https://library.kbcc.cuny.edu/faq",
-              icon: "fas fa-question-circle fa-fw bigger-icon",
-              description: "FAQ",
-              target_blank: "",
-              id: 2,
-            },
-            {
-              link: "https://library.kbcc.cuny.edu/guides",
-              icon: "fas fa-telescope fa-fw bigger-icon",
-              description: "Research Guides and Tutorials",
-              target_blank: "",
-              id: 3,
-            },
-            {
-              link: "https://library.kbcc.cuny.edu/ENGLISH24",
-              icon: "fas fa-question fa-fw bigger-icon",
-              description: "How to Use the Library",
-              target_blank: "",
-              id: 4,
-            },
-          ],
-        },
-      },
-    };
-  },
-});
-app1.mount("#app1");
-
-const app2 = createApp({
-  components: {
-    "onesearch-component": onesearchComponent,
-  },
-});
-app2.mount("#app2");

groups/home/bootstrap3/src/main7.js

@@ -7,48 +7,64 @@ const hamburgerComponent = {
 };
 
 const navigComponent = {
-  template: `<nav class="navbar navbar-default main-nav-container">
+  // Fixed: Removed invalid nested <a> elements (WCAG 4.1.1)
+  // Changed outer <a> to <div> and made dropdown-toggle a <button>
+  template: `<nav class="navbar navbar-default main-nav-container" aria-label="Main navigation">
     <div class="container-fluid">
       <ul class="nav navbar-nav" id="navbar-center">
         <li v-for="(navmenu, navkey) in navlistofmenus"
             v-bind:key="navmenu.id"
             class="dropdown main-nav-dropdown"
         >
-          <a>
-            <a class="dropdown-toggle ga-main-navbar"
-               data-toggle="dropdown"
-               role="button"
-               aria-haspopup="true"
-               aria-expanded="false"
+          <button class="dropdown-toggle ga-main-navbar"
+                  type="button"
+                  data-toggle="dropdown"
+                  aria-haspopup="true"
+                  v-bind:aria-expanded="navmenu.isOpen ? 'true' : 'false'"
+                  @click="toggleDropdown(navmenu)"
+                  @keydown.escape="closeDropdown(navmenu)"
+          >
+            <span class="caret-text">{{ navkey }}</span>
+            <span class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></span>
+          </button>
+          <ul class="dropdown-menu fade dropdown-margin"
+              v-bind:aria-label="navkey + ' submenu'"
+          >
+            <li v-for="item in navmenu.data"
+                v-bind:key="item.id"
             >
-              <div class="caret-text">{{ navkey }}</div>
-              <div class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></div>
-            </a>
-            <ul class="dropdown-menu fade dropdown-margin">
-              <li>
-                <a v-for="item in navmenu.data"
-                   v-bind:key="item.id"
-                   class="searchmenu"
-                   v-bind:aria-label="item.description"
-                   v-bind:href="item.link"
-                   v-bind:target="item.target_blank"
-                >
-                  <div class="bigger-fancy-text">
-                    <i v-bind:class="item.icon" aria-hidden="true"></i>
-                    <strong>{{ item.description }}</strong>
-                  </div>
-                </a>
-              </li>
-            </ul>
-          </a>
+              <a class="searchmenu"
+                 v-bind:aria-label="item.description + (item.target_blank ? ' (opens in new tab)' : '')"
+                 v-bind:href="item.link"
+                 v-bind:target="item.target_blank"
+              >
+                <div class="bigger-fancy-text">
+                  <i v-bind:class="item.icon" aria-hidden="true"></i>
+                  <strong>{{ item.description }}</strong>
+                  <i v-if="item.target_blank" class="fas fa-external-link-alt external-link-icon" aria-hidden="true"></i>
+                </div>
+              </a>
+            </li>
+          </ul>
         </li>
       </ul>
     </div>
   </nav>`,
   props: ["navlistofmenus"],
+  methods: {
+    toggleDropdown(navmenu) {
+      // Toggle the isOpen state for aria-expanded
+      navmenu.isOpen = !navmenu.isOpen;
+    },
+    closeDropdown(navmenu) {
+      navmenu.isOpen = false;
+    }
+  }
 };
 
 const onesearchComponent = {
+  // Fixed: Added autocomplete="off" to search input (WCAG 1.3.5)
+  // Note: autocomplete="off" is appropriate here as this is a library search, not a standard web search
   template: `<form class="form-inline onesearch-jumbotron"
       name="searchPrimoForm1"
       ref="oneSearchForm"
@@ -56,6 +72,7 @@ const onesearchComponent = {
       method="get"
       action="https://cuny-kb.primo.exlibrisgroup.com/discovery/search"
       enctype="application/x-www-form-urlencoded; charset=utf-8"
+      aria-label="Search the library catalog"
   >
     <!-- default is "everything"  option suggested from OLS widget builder -->
     <input name="facet" :value="facet" type="hidden"/>
@@ -71,11 +88,11 @@ const onesearchComponent = {
     <input name="displayField" value="all" type="hidden" />
     <input name="pcAvailabiltyMode" value="false" type="hidden" />
     <input name="query" ref="primoQueryString" type="hidden" />
-    <h1 id="onesearch-header">
+    <div id="onesearch-header">
         <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en">
-            <img class="image-fail onesearchsubmit" src="https://libapps.s3.amazonaws.com/accounts/16298/images/onesearch_logo.png" alt="OneSearch" />
+            <img class="image-fail onesearchsubmit" src="https://d2jv02qf7xgjwx.cloudfront.net/accounts/16298/images/onesearch_logo2.png" alt="OneSearch" />
         </a>
-    </h1>
+    </div>
     <div class="form-group" id="flex-search-form">
         <label class="sr-only" for="primoQueryTemp">Search terms</label>
         <div class="input-group zero-margin form-width" id="blue-border2">
@@ -85,7 +102,9 @@ const onesearchComponent = {
                    ref="primoQueryTempString"
                    type="search"
                    v-model="searchstring"
+                   aria-label="Search terms"
                    placeholder="Enter search term here"
+                   autocomplete="off"
              />
         </div>
         <div class="input-group zero-margin" id="blue-border3">
@@ -96,13 +115,16 @@ const onesearchComponent = {
             />
         </div>
     </div>
-    <div id="radios">
-        <input type="radio" 
+    <fieldset id="radios">
+        <legend class="sr-only">Limit search to</legend>
+
+        <input type="radio"
                name="radio1"
                id="booksradio"
                @click="selectradio('rtype,include,books', '')"
         >
         <label for="booksradio">Books</label>
+
         <div class="radiocontainer">
             <input type="radio"
                    name="radio1"
@@ -111,6 +133,7 @@ const onesearchComponent = {
             >
             <label for="articlesradio">Articles (Peer reviewed)</label>
         </div>
+
         <div class="radiocontainer">
             <input type="radio"
                    name="radio1"
@@ -119,7 +142,7 @@ const onesearchComponent = {
             >
             <label for="everythingradio">Everything</label>
         </div>
-    </div>
+    </fieldset>
     <div id="advanced">
         <strong>
             <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&lang=en&mode=advanced">Advanced</a>
@@ -203,6 +226,7 @@ const app1 = createApp({
       navlistofmenus: {
         "Find It": {
           id: 1,
+          isOpen: false, // Added for dynamic aria-expanded (WCAG 4.1.2)
           data: [
             {
               link: "https://library.kbcc.cuny.edu/az.php",
@@ -250,6 +274,7 @@ const app1 = createApp({
         },
         Services: {
           id: 2,
+          isOpen: false, // Added for dynamic aria-expanded (WCAG 4.1.2)
           data: [
             {
               link: "https://kbcc-cuny.illiad.oclc.org/illiad/logon.html",
@@ -290,6 +315,7 @@ const app1 = createApp({
         },
         "About Us": {
           id: 3,
+          isOpen: false, // Added for dynamic aria-expanded (WCAG 4.1.2)
           data: [
             {
               link: "https://library.kbcc.cuny.edu/about-us/directory",
@@ -330,6 +356,7 @@ const app1 = createApp({
         },
         "Location & Hours": {
           id: 4,
+          isOpen: false, // Added for dynamic aria-expanded (WCAG 4.1.2)
           data: [
             {
               link: "https://tour.kingsborough.edu/",
@@ -349,6 +376,7 @@ const app1 = createApp({
         },
         Help: {
           id: 5,
+          isOpen: false, // Added for dynamic aria-expanded (WCAG 4.1.2)
           data: [
             {
               link: "https://library.kbcc.cuny.edu/askalibrarian",
@@ -383,6 +411,29 @@ const app1 = createApp({
       },
     };
   },
+  mounted() {
+    // Dynamic aria-expanded for hamburger menu (WCAG 4.1.2)
+    const hamburger = document.getElementById('hamburger');
+    const hamburgerContainer = document.getElementById('hamburger-container');
+
+    if (hamburger && hamburgerContainer) {
+      // Update aria-expanded when dropdown opens/closes
+      hamburgerContainer.addEventListener('shown.bs.dropdown', function() {
+        hamburger.setAttribute('aria-expanded', 'true');
+      });
+      hamburgerContainer.addEventListener('hidden.bs.dropdown', function() {
+        hamburger.setAttribute('aria-expanded', 'false');
+      });
+
+      // Fallback for Bootstrap 3 events
+      jQuery(hamburgerContainer).on('show.bs.dropdown', function() {
+        hamburger.setAttribute('aria-expanded', 'true');
+      });
+      jQuery(hamburgerContainer).on('hide.bs.dropdown', function() {
+        hamburger.setAttribute('aria-expanded', 'false');
+      });
+    }
+  }
 });
 app1.mount("#app1");
 

groups/home/bootstrap5/home1.css

@@ -3,11 +3,27 @@
     --kbccblue: #003466;
     --kbccorange: #ff4e00;
     --text: #111;
+    --bg: #fff;
+    --bg-surface: #fff;
+    --hover-dark: #444;
+    --focus-outline: #0056b3;
+    --link-color: black;
+  }
+
+  [data-bs-theme="dark"] {
+    --text: #e0e0e0;
+    --bg: #1a1a2e;
+    --bg-surface: #25253e;
+    --hover-dark: #555;
+    --focus-outline: #ff4e00;
+    --link-color: #ccc;
   }
 
   body {
     color: var(--text);
+    background-color: var(--bg);
     overflow-x: hidden;
+    transition: background-color 0.2s ease, color 0.2s ease;
   }
 
   a,
@@ -15,6 +31,26 @@
     text-decoration: none;
   }
 
+  /* Skip link styles (WCAG 2.4.1) */
+  .skip-link {
+    position: absolute;
+    top: -40px;
+    left: 0;
+    background: var(--kbccblue);
+    color: #fff;
+    padding: 8px 16px;
+    z-index: 10000;
+    text-decoration: none;
+    font-weight: bold;
+  }
+  .skip-link:focus {
+    top: 0;
+    outline: 3px solid var(--kbccorange);
+    outline-offset: 2px;
+  }
+
+  /* visually-hidden is provided natively by Bootstrap 5 */
+
   /* style slide out chat */
   #lcs_slide_out_button-21944 {
     font-size: 1.5em;
@@ -33,11 +69,14 @@
   #hamburger:active {
     border: none;
     outline: none;
-    background-color: #fff;
+    background-color: var(--bg-surface);
     color: var(--kbccblue);
   }
+  #hamburger::after {
+    display: none;
+  }
   #hamburger-ul > li > .searchmenu {
-    background-color: #fff;
+    background-color: var(--bg-surface);
   }
   #hamburger-ul {
     padding: 25px 0;
@@ -48,19 +87,29 @@
     display: block;
     opacity: 0;
     pointer-events: none;
+    position: absolute;
+    top: 100%;
+    margin-top: 0;
+    transition: opacity 0.5s ease, background-color 0.2s ease;
+    -webkit-transition: opacity 0.5s ease, background-color 0.2s ease;
   }
-  .open > .dropdown-menu.fade {
+  .show > .dropdown-menu.fade,
+  .dropdown-menu.fade.show {
     pointer-events: auto;
     opacity: 1;
   }
-  .fade {
-    -webkit-transition-duration: 5s; /* Safari */
-    transition-duration: 0.5s;
-  }
-  .dropdown:hover .dropdown-menu {
+  /* Show dropdown on hover AND keyboard focus (WCAG 2.1.1) */
+  .dropdown:hover .dropdown-menu,
+  .dropdown:focus-within .dropdown-menu {
     display: block;
   }
 
+  /* Navigation dropdown keyboard support (WCAG 2.1.1) */
+  .main-nav-dropdown:focus-within > .dropdown-menu.fade {
+    pointer-events: auto;
+    opacity: 1;
+  }
+
   /* style the login at the top right */
   #login-div {
     float: right;
@@ -77,6 +126,37 @@
     margin-left: 5px;
   }
 
+  [data-bs-theme="dark"] #hamburger,
+  [data-bs-theme="dark"] #hamburger:active {
+    background-color: var(--bg);
+    color: white;
+  }
+
+  [data-bs-theme="dark"] #login-div {
+    color: white;
+  }
+
+  /* Ensure jumbotron links fill full width (prevents shrinking on focus) */
+  a.ga-by-jumbotron {
+    display: block;
+  }
+
+  /* Accessible focus indicators for all interactive elements */
+  a:focus,
+  a:focus-visible,
+  button:focus,
+  button:focus-visible,
+  input:focus,
+  input:focus-visible,
+  select:focus,
+  select:focus-visible,
+  [tabindex]:focus,
+  [tabindex]:focus-visible {
+    outline: 3px solid var(--focus-outline) !important;
+    outline-offset: 2px !important;
+  }
+
+
   /* style alert */
   #hours-content-container {    /* this id comes from the components libguide */
     background-color: var(--kbccblue);
@@ -90,33 +170,65 @@
   #hours-content-container > a {
     color: #fff
   }
+  [data-bs-theme="dark"] #hours-content-container {
+    background-color: var(--kbccblue);
+    color: #fff;
+  }
+  [data-bs-theme="dark"] #hours-content-container > a {
+    color: #fff;
+  }
 
   /* style navbar */
-  nav.navbar-default.main-nav-container {
-    background-color: white;
+  nav.navbar-light.main-nav-container {
+    background-color: var(--bg-surface) !important;
+    background: var(--bg-surface) !important;
     border: none;
     font-size: 1.4em;
     color: var(--text);
     border-radius: 0;
+    padding: 5px 0;
+    margin-left: 12px;
+    margin-right: 12px;
   }
-  .nav .open > a,
-  .nav .open > a:focus,
-  .nav .open > a:hover {
-    background-color: #fff;
+  [data-bs-theme="dark"] nav.navbar-light.main-nav-container {
+    background-color: var(--kbccblue) !important;
+    background: var(--bg) !important;
+    color: white;
+    border-radius: 5px;
+    margin-left: 12px;
+    margin-right: 12px;
+  }
+  [data-bs-theme="dark"] .navbar-light .navbar-nav > li > a,
+  [data-bs-theme="dark"] .caret-text {
+    color: white;
+  }
+  .main-nav-dropdown {
+    margin: 0 8px;
+  }
+  .nav .show > a,
+  .nav .show > a:focus,
+  .nav .show > a:hover {
+    background-color: var(--bg-surface);
   }
   .nav > li > a:hover {
     outline: none;
   }
-  .navbar-default .navbar-nav > li > a {
+  .navbar-light .navbar-nav > li > a {
     color: var(--text);
   }
   #navbar-center {
     display: flex;
+    flex-direction: row;
     justify-content: left;
     float: none;
   }
   .ga-main-navbar {
     font-size: 1.3em;
+    background-color: transparent;
+    border: none;
+  }
+  .ga-main-navbar.dropdown-toggle::after {
+    display: none;
   }
   #dropdownMenu1 {
     border-radius: 0;
@@ -133,17 +245,11 @@
 
   /* style background image */
   .kbcc-background-image {
-    background: linear-gradient(
-        to bottom,
-        rgba(255, 255, 255, 0.6) 0%,
-        rgba(255, 255, 255, 0.6) 100%
-      ),
-      url("https://libapps.s3.amazonaws.com/accounts/16298/images/library_front_view.jpg");
     background-position: 50% 71%;
     padding: 20px 0;
     border-radius: 5px;
     background-size: cover;
-    margin: -30px 0 30px 0;
+    margin: 0 0 30px 0;
   }
 
   /* style jumbotron */
@@ -158,6 +264,8 @@
   #onesearch-header {
     font-size: 10em;
     margin-bottom: 0;
+    line-height: 1;
+    padding-top: 30px;
   }
   .form-width {
     width: 100%;
@@ -177,22 +285,57 @@
   #booksradio, #articlesradio, #everythingradio {
     margin-right: 3px;
   }
+  #radios label {
+    font-weight: bolder;
+  }
+  [data-bs-theme="dark"] #radios label {
+    color: white;
+  }
+  [data-bs-theme="dark"] #radios input[type="radio"] {
+    accent-color: white;
+  }
   #advanced {
     float: right;
     margin-top: 10px;
   }
   #advanced > strong > a {
-    color: black;
+    color: var(--link-color);
   }
   /* add flex so that blue box-shadows line up */
   #flex-search-form {
     display: flex;
     flex-direction: row;
     justify-content: center;
+    margin-bottom: 15px; /* BS3 .form-group provided this; BS5 removed the class */
   }
   .inherit-height-from-flex {
     height: inherit;
   }
+  /* Match BS3 search form sizing */
+  #primoQueryTemp {
+    border-radius: 0;
+  }
+  [data-bs-theme="dark"] #primoQueryTemp {
+    background-color: #fff;
+    color: #111;
+  }
+  [data-bs-theme="dark"] #primoQueryTemp::placeholder {
+    color: #666;
+  }
+  .onesearchsubmit {
+    border-radius: 0;
+    padding: 6px 12px;
+  }
+  [data-bs-theme="dark"] .onesearchsubmit {
+    margin: 1px;
+  }
+  #blue-border2 {
+    flex: 5;
+  }
+  #blue-border3 {
+    flex: 1;
+    padding: 0;
+  }
 
   /* shadow for the search bar */
   #blue-border2 {
@@ -208,6 +351,9 @@
   }
 
   /* style for nav by the jumbotron */
+	.kbcc-background-image > .col-sm-4 {
+		margin-top: 10px;
+	}
   .nav-divs-by-jumbotron {
     text-align: center;
     padding: 6px;
@@ -222,7 +368,7 @@
     margin-top: 4px;
   }
   .nav-divs-by-jumbotron:hover {
-    background-color: #444;
+    background-color: var(--hover-dark);
   }
   #eq_32886 {
     background-color: var(--kbccblue);
@@ -230,19 +376,45 @@
   }
   .nav-divs-by-jumbotron:hover > h2 > #eq_32886,
   #eq_32886:hover {
-    background-color: #444;
+    background-color: var(--hover-dark);
   }
   #bookastudyroom {
     cursor: pointer;
   }
 
+  /* Ensure nav-jumbotron buttons match link width */
+  .nav-jumbotron-link.btn-link {
+    display: block;
+    width: 100%;
+    padding: 0;        /* remove default Bootstrap padding */
+    border: none;      /* ensure no extra border height */
+    background: none;  /* keep background controlled by inner div */
+    text-decoration: none;
+  }
+
+  /* Remove default heading margin for uniform button height */
+  #bookastudyroom-heading {
+    margin: 0px;
+  }
+
   /* style link list */
   .link-list {
     font-size: 1.7em;
   }
 
-  /* style the panels with the text content */
-  .panel > .show-panel {
+  [data-bs-theme="dark"] .link-list a {
+    color: white;
+  }
+
+  /* External link icon styling (WCAG 2.4.4) */
+  .external-link-icon {
+    font-size: 0.7em;
+    margin-left: 4px;
+    vertical-align: middle;
+  }
+
+  /* style the cards with the text content */
+  .card > .show-panel {
     background-color: var(--kbccblue);
     text-align: center;
   }
@@ -250,9 +422,6 @@
     border: none;
     box-shadow: none;
   }
-  .glyphicon-panel-title {
-    font-size: 2em;
-  }
   .content-panel-title {
     color: white;
     font-size: 2em;
@@ -261,7 +430,7 @@
     margin: 7px 0;
     font-size: 1em;
   }
-  .panel-heading {
+  .card-header {
     padding: 2px;
   }
 
@@ -297,6 +466,10 @@
     padding: 3px;
     padding-left: 30px;
   }
+  [data-bs-theme="dark"] .slick-prev:before,
+  [data-bs-theme="dark"] .slick-next:before {
+    color: white;
+  }
 
   /* style to make all imported boxes floating */
   .s-lib-box-title {
@@ -312,6 +485,10 @@
     box-shadow: none !important;
     border: 0 !important;
   }
+  [data-bs-theme="dark"] .s-lib-box,
+  [data-bs-theme="dark"] .s-lg-box {
+    background-color: var(--bg);
+  }
 
   /* style the dropdown menus */
   .dropdown-margin {
@@ -335,17 +512,13 @@
     margin-left: 8px;
     color: var(--kbccorange);
   }
-  .open > a > .fancy-caret {
-    margin-bottom: -4px;
-    vertical-align: -4px;
-    display: inline-block;
-  }
-  .open > a > .caret-text {
-    vertical-align: -1px;
+  button.show > .fancy-caret {
+    position: relative;
+    top: 4px;
   }
 
   /* style footer */
-  #orange-line {
+  .orange-line {
     height: 10px;
     background-color: var(--kbccorange);
   }
@@ -354,6 +527,9 @@
     color: white;
     padding: 30px;
   }
+  [data-bs-theme="dark"] #main-blue-footer {
+    background-color: var(--bg);
+  }
   .whiteahrefs a:link,
   .whiteahrefs a:hover,
   .whiteahrefs a:visited,
@@ -371,6 +547,51 @@
     max-width: 150px;
   }
 
+  /* dark mode toggle button */
+  #theme-toggle {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 9999;
+    background: none;
+    border: 2px solid var(--kbccblue);
+    color: var(--kbccblue);
+    border-radius: 50%;
+    width: 44px;
+    height: 44px;
+    font-size: 1.2em;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+    background-color: var(--bg);
+  }
+  #theme-toggle:hover {
+    background-color: var(--kbccblue);
+    color: #fff;
+  }
+  [data-bs-theme="dark"] #theme-toggle {
+    border-color: #ffc107;
+    color: #ffc107;
+  }
+  [data-bs-theme="dark"] #theme-toggle:hover {
+    background-color: #ffc107;
+    color: #1a1a2e;
+  }
+
+  /* card body dark mode background */
+  .card-body {
+    background-color: var(--bg);
+    transition: background-color 0.2s ease;
+  }
+
+  /* dropdown menu dark mode background */
+  .dropdown-menu {
+    background-color: var(--bg-surface);
+    transition: background-color 0.2s ease;
+  }
+
   /* media queries */
 
   @media only screen and (min-width: 1px) {
@@ -378,7 +599,7 @@
       max-width: 100%;
       max-height: 150px;
     }
-    nav.navbar-default.main-nav-container {
+    nav.navbar-light.main-nav-container {
       margin-top: -20px;
     }
     .nav-by-jumbotron {
@@ -422,6 +643,7 @@
     }
     #radios, #advanced {
       margin-top: -8px;
+      margin-bottom: 50px;
    }
     #defineYourSearch {
       display: none;
@@ -429,6 +651,9 @@
   }
 
   @media only screen and (min-width: 768px) {
+    #flex-search-form {
+      margin-bottom: 0;
+    }
     #radios {
       margin-top: 8px;
     }
@@ -456,6 +681,9 @@
       float: right;
       clear: both;
     }
+    .libapps.whiteahrefs {
+      margin-top: -10px;
+    }
   }
 
   @media only screen and (min-width: 1px) and (max-width: 992px) {
@@ -499,53 +727,6 @@
   });
 </script>
 
-<!-- If browser is pre-ES6, show a warning-->
-<script>
-  window.isES6 = false;
-</script>
-<script>
-  <!-- test ES6 functionality -->
-  // Arrow functions support
-  () => {};
-
-  // Class support
-  class __ES6FeatureDetectionTest {}
-
-  // Object initializer property and method shorthands
-  let es6a = true;
-  let es6b = {
-    es6a,
-    es6c() {
-      return true;
-    },
-    es6d: [1, 2, 3],
-  };
-
-  // Object destructuring
-  let { es6c, es6d } = es6b;
-
-  // Spread operator
-  let es6e = [...es6d, 4];
-
-  // ternary operator
-  let es6f = es6a ? "ternary" : "no ternary";
-
-  // nullish coalescing
-  es6a ??= 10;
-
-  window.isES6 = true;
-</script>
-
-<script type="text/javascript">
-  window.onload = function () {
-    <!-- display the error message if feature detection flags old browser -->
-    if (window.isES6 == false) {
-      document.getElementById("obsolete_browser_alert").innerHTML =
-        '<div class="alert alert-danger" style="text-align: center;"><strong>WARNING! Unsupported browser!</strong><br />It looks like you\'re using an old browser.<br />This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge.<br />If you continue with this browser, many parts of this site will not work and you will see unexpected results.</div>';
-    }
-  };
-</script>
-
 <!-- FontAwesome -->
 <script
   src="https://kit.fontawesome.com/4c28f38a07.js"

groups/home/bootstrap5/home1.html

@@ -1,23 +1,15 @@
 <body class="s-lib-public-body">
-  <style>
-    /* Accessible focus indicators for primary navigation elements */
-    #hamburger:focus,
-    #hamburger:focus-visible,
-    #login-div:focus,
-    #login-div:focus-visible,
-    .searchmenu:focus,
-    .searchmenu:focus-visible,
-    .nav-jumbotron-link:focus,
-    .nav-jumbotron-link:focus-visible,
-    /* OneSearch widget (central search form) */
-    .onesearch-jumbotron input:focus,
-    .onesearch-jumbotron input:focus-visible,
-    .onesearch-jumbotron button:focus,
-    .onesearch-jumbotron button:focus-visible {
-      outline: 3px solid #0056b3; /* high-contrast blue */
-      outline-offset: 2px;
-    }
-  </style>
+  <script>
+    // Prevent flash of wrong theme by applying saved/OS preference immediately
+    (function() {
+      var stored = localStorage.getItem("kbcc-theme");
+      var prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+      var isDark = stored ? stored === "dark" : prefersDark;
+      if (isDark) {
+        document.body.setAttribute("data-bs-theme", "dark");
+      }
+    })();
+  </script>
   <!-- Google Tag Manager (noscript) -->
   <noscript>
     <iframe
@@ -28,25 +20,32 @@
     ></iframe>
   </noscript>
   <!-- End Google Tag Manager (noscript) -->
+
+  <!-- Skip Navigation Link (WCAG 2.4.1) -->
+  <a href="#main-content" class="skip-link">Skip to main content</a>
+
   <!-- BEGIN: content -->
   <div id="s-lib-public-main" class="s-lib-main container s-lib-side-borders">
+    <!-- Visually hidden H1 for proper heading hierarchy (WCAG 1.3.1, 2.4.6) -->
+    <h1 class="visually-hidden">Robert J. Kibbee Library - Kingsborough Community College</h1>
+
     <div id="s-lg-index-cols">
       <div id="app1">
         <!-- vue app1 -->
         <div class="row">
           <div id="obsolete_browser_alert"></div>
-          <div class="col-xs-12" id="header-div">
+          <div class="col-12" id="header-div">
             <div class="dropdown" id="hamburger-container">
               <button
-                class="btn btn-default dropdown-toggle"
+                class="btn btn-secondary dropdown-toggle"
                 type="button"
-                data-toggle="dropdown"
+                data-bs-toggle="dropdown"
                 aria-haspopup="true"
-                aria-expanded="true"
-                aria-label="Hamburger Menu"
+                aria-expanded="false"
+                aria-label="Main menu"
                 id="hamburger"
               >
-                <i class="fas fa-bars" style="font-size: 2em"></i>
+                <i class="fas fa-bars" aria-hidden="true" style="font-size: 2em"></i>
               </button>
               <ul
                 class="dropdown-menu fade"
@@ -58,10 +57,11 @@
                   v-bind:key="item.id"
                 >
                   <a
-                    class="searchmenu"
-                    v-bind:aria-label="item.description"
+                    class="dropdown-item searchmenu"
+                    v-bind:aria-label="item.description + (item.target_blank ? ' (opens in new tab)' : '')"
                     v-bind:href="item.link"
                     v-bind:target="item.target_blank"
+                    v-bind:rel="item.target_blank ? 'noopener noreferrer' : null"
                   >
                     <hamburger-component v-bind:item="item"></hamburger-component>
                   </a>
@@ -72,24 +72,29 @@
             <a
               href="https://cuny-kb.primo.exlibrisgroup.com/discovery/account?vid=01CUNY_KB:CUNY_KB"
               id="login-div"
-              aria-labelledby="login-text"
+              aria-label="Login to your library account"
             >
               <div id="login-text">Login</div>
-              <div id="login-icon"><i class="fas fa-user"></i></div>
+              <div id="login-icon"><i class="fas fa-user" aria-hidden="true"></i></div>
             </a>
             <img
               id="library-logo"
               class="image-fail"
               alt="Kibbee Library logo"
               src="https://libapps.s3.amazonaws.com/accounts/16298/images/xsmall-2.jpg"
+              data-light-src="https://libapps.s3.amazonaws.com/accounts/16298/images/xsmall-2.jpg"
+              data-dark-src="https://d2jv02qf7xgjwx.cloudfront.net/accounts/16298/images/Kibbee_library_logo_inverted2.jpg"
             />
-            {{content_box_33471502}}
+            <!-- v-pre: LibGuides injects this content box server-side; this element sits
+                 inside the #app1 Vue root, so v-pre stops Vue from compiling the box's
+                 HTML as a template (prevents client-side template injection). -->
+            <div v-pre>{{content_box_33471502}}</div>
           </div>
           <!-- end of header div -->
         </div>
         <!-- end of row -->
         <div class="row" id="hamburger-alternative">
-          <div class="col-xs-12">
+          <div class="col-12">
             <navig-component v-bind:navlistofmenus="navlistofmenus"></navig-component>
           </div>
           <!-- end of col-xs-12 -->
@@ -99,7 +104,7 @@
       <!--end of Vue app1-->
     </div>
     <div class="container" style="margin-top: 14px">
-      <div class="row kbcc-background-image">
+      <div class="row kbcc-background-image tab-pane active" id="main-content" tabindex="-1">
         <div class="col-sm-8">
           <div id="app2" style="clear: both;">
             <onesearch-component></onesearch-component>
@@ -107,17 +112,17 @@
         </div>
         <div class="col-sm-4">
           <div class="nav-by-jumbotron">
-            <a
+            <button
               id="eq_32886"
-              href="#"
-              class="ga-by-jumbotron ga-by-jumbotron-rooms nav-jumbotron-link"
+              type="button"
+              class="ga-by-jumbotron ga-by-jumbotron-rooms nav-jumbotron-link btn-link"
+              style="display:block;width:100%;"
               aria-label="Book A Study Room"
-              role="button"
             >
               <div class="nav-divs-by-jumbotron" id="bookastudyroom">
-                <h2>Book A Study Room</h2>
+                <h2 id="bookastudyroom-heading">Book A Study Room</h2>
               </div>
-            </a>
+            </button>
             <a
               href="https://library.kbcc.cuny.edu/az.php"
               class="ga-by-jumbotron ga-by-jumbotron-databases"
@@ -147,32 +152,32 @@
       </div>
       <div class="row">
         <div class="col-md-7 col-lg-6">
-          <div class="panel panel-default hide-body-border">
-            <div class="panel-heading show-panel">
-              <span class="panel-title content-panel-title">
+          <div class="card hide-body-border">
+            <div class="card-header show-panel">
+              <span class="card-title content-panel-title">
                 <h2>Library Links</h2>
               </span>
             </div>
-            <div class="panel-body">
+            <div class="card-body">
               <div class="row">
                 <div class="col-sm-6">
                   <ul class="link-list">
-                    <li>
-                      <a
+                    <!-- <li>
+                     <a
                         href="https://library.kbcc.cuny.edu/ENGLISH24"
                         class="ga-library-links"
                       >
                         How to Use the Library
                       </a>
-                    </li>
-                    <li>
+                    </li> -->
+                    <!-- <li>
                       <a
                         href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8155422080006129"
                         class="ga-library-links"
                       >
                         2024-2025 Textbooks
                       </a>
-                    </li>
+                    </li>-->
                     <li>
                       <a
                         href="https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8150905740006129"
@@ -189,40 +194,57 @@
                         Comic Books &amp; Graphic Novels
                       </a>
                     </li>
+                    <li>
+                      <a
+                        href="https://kbcc.overdrive.com/"
+                        class="ga-library-links"
+                      >
+                        Ebooks and Audiobooks on Libby
+                      </a>
+                    </li>
                   </ul>
                 </div>
                 <div class="col-sm-6">
                   <ul class="link-list">
                     <li>
                       <a
-                        href="http://kbcc.ezproxy.cuny.edu/login?url=https://search.ebscohost.com/login.aspx?authtype=ip,uid&custid=s9000138&profile=ehost&defaultdb=a9h"
+                        href="https://kbcc.ezproxy.cuny.edu/login?url=https://search.ebscohost.com/login.aspx?authtype=ip,uid&custid=s9000138&profile=ehost&defaultdb=a9h"
                         target="_blank"
+                        rel="noopener noreferrer"
                         class="ga-library-links"
+                        aria-label="Academic Search Complete (opens in new tab)"
                       >
-                        Academic Search Complete
+                        EBSCO Academic Search Complete
+                        <i class="fas fa-external-link-alt external-link-icon" aria-hidden="true"></i>
                       </a>
                     </li>
                     <li>
                       <a
-                        href="http://kbcc.ezproxy.cuny.edu:2048/login?url=https://search.proquest.com/usmajordailies/advanced/news/fromDatabasesLayer?accountid=38336"
+                        href="https://kbcc.ezproxy.cuny.edu/login?url=https://search.proquest.com/usmajordailies/advanced/news/fromDatabasesLayer?accountid=38336"
                         target="_blank"
+                        rel="noopener noreferrer"
                         class="ga-library-links"
+                        aria-label="US Newspapers (opens in new tab)"
                       >
                         US Newspapers
+                        <i class="fas fa-external-link-alt external-link-icon" aria-hidden="true"></i>
                       </a>
                     </li>
                     <li>
                       <a
-                        href="http://www.nytimes.com/passes"
+                        href="https://www.nytimes.com/passes"
                         target="_blank"
+                        rel="noopener noreferrer"
                         class="ga-library-links"
+                        aria-label="NY Times Free Pass (opens in new tab)"
                       >
-                        NY Times Free Pass
+                        NY Times Pass
+                        <i class="fas fa-external-link-alt external-link-icon" aria-hidden="true"></i>
                       </a>
                     </li>
                     <li>
                       <a
-                        href="https://library.kbcc.cuny.edu/newarrivals/leisure"
+                        href="https://cuny-kb.primo.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB&collectionId=8156195880006129&lang=en"
                         class="ga-library-links"
                       >
                         Leisure Reading Collection
@@ -235,13 +257,13 @@
           </div>
         </div>
         <div class="col-md-5 col-lg-6">
-          <div class="panel panel-default hide-body-border">
-            <div class="panel-heading show-panel">
-              <span class="panel-title content-panel-title">
+          <div class="card hide-body-border">
+            <div class="card-header show-panel">
+              <span class="card-title content-panel-title">
                 <h2>Featured in the Library</h2>
               </span>
             </div>
-            <div class="panel-body">{{content_box_25912431}}</div>
+            <div class="card-body">{{content_box_25912431}}</div>
           </div>
         </div>
       </div>
@@ -249,7 +271,7 @@
     <div class="container">
       <div class="row">
         <!-- BEGIN: Page Footer -->
-        <div id="orange-line"></div>
+        <div class="orange-line"></div>
         <div id="main-blue-footer">
           <div id="lighthouse-logo">
             <a href="https://www.kbcc.cuny.edu">
@@ -268,49 +290,55 @@
               <a href="tel:+1-718-368-5632">718-368-5632</a>
             </div>
             <div class="whiteahrefs">
-              <a href="https://kbcc-cuny.libwizard.com/f/reference">
-                reference.desk@kbcc.cuny.edu
-              </a>
-              <br />
               <a
-                aria-label="Instagram"
+                aria-label="Instagram (opens in new tab)"
                 href="https://www.instagram.com/kbcclibrary/"
                 target="_blank"
+                rel="noopener noreferrer"
               >
                 <i aria-hidden="true" class="fab fa-instagram"></i>
               </a>
               <a
-                aria-label="Goodreads"
+                aria-label="Goodreads (opens in new tab)"
                 href="https://www.goodreads.com/user/show/51717966-kingsborough-library"
                 target="_blank"
+                rel="noopener noreferrer"
               >
                 <i aria-hidden="true" class="fab fa-goodreads"></i>
               </a>
               <a
-                aria-label="TikTok"
+                aria-label="TikTok (opens in new tab)"
                 href="https://www.tiktok.com/@kbcclibrary?lang=en"
                 target="_blank"
+                rel="noopener noreferrer"
               >
                 <i aria-hidden="true" class="fab fa-tiktok"></i>
               </a>
               <a
-                aria-label="YouTube"
+                aria-label="YouTube (opens in new tab)"
                 href="https://www.youtube.com/channel/UCpeJWrnzLXEizw8cMvVp-_Q/videos"
                 target="_blank"
+                rel="noopener noreferrer"
               >
                 <i aria-hidden="true" class="fab fa-youtube"></i>
               </a>
               <a
-                aria-label="Spotify"
+                aria-label="Spotify (opens in new tab)"
                 href="https://open.spotify.com/user/313lfmvr4ezmkb2mhodzd5ubzg4a"
                 target="_blank"
+                rel="noopener noreferrer"
               >
                 <i aria-hidden="true" class="fab fa-spotify"></i>
               </a>
             </div>
           </div>
           <div id="cuny-logo">
-            <a href="https://www.cuny.edu" target="_blank">
+            <a
+              href="https://www.cuny.edu"
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="CUNY (opens in new tab)"
+            >
               <img
                 src="https://libapps.s3.amazonaws.com/accounts/16298/images/CUNYlogo-white.png"
                 alt="CUNY logo"
@@ -333,7 +361,8 @@
           </div>
           <div style="height: 10px"></div>
         </div>
-        <!-- END: Page Footer -->
+				<div class="orange-line"></div>
+				<!-- END: Page Footer -->
       </div>
     </div>
   </div>
@@ -341,26 +370,35 @@
   <div id="s-lib-alert" title="">
     <div id="s-lib-alert-content"></div>
   </div>
-  <div id="s-lib-popover-title" class="hide">
+  <div id="s-lib-popover-title" class="d-none">
     <span class="text-info"><strong>title</strong></span>
     <button
       type="button"
       id="popclose"
-      class="close"
-      onclick="jQuery('.s-lib-popover').popover('hide')"
+      class="btn-close"
+      onclick="document.querySelectorAll('.s-lib-popover').forEach(function(el) { var p = bootstrap.Popover.getInstance(el); if (p) p.hide(); })"
+      aria-label="Close popover"
+    ></button>
+  </div>
+  <div id="s-lib-popover-content" class="d-none">
+    <i class="fas fa-sync fa-spin" aria-hidden="true"></i> Loading...
+    <button class="btn btn-secondary btn-sm popclose" type="button">Close</button>
+  </div>
+  <div id="app3">
+    <button
+      id="theme-toggle"
+      @click="toggleTheme"
+      :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
+      type="button"
     >
-      &times;
+      <i :class="isDark ? 'fas fa-sun' : 'fas fa-moon'" aria-hidden="true"></i>
     </button>
   </div>
-  <div id="s-lib-popover-content" class="hide">
-    <i class="fa fa-refresh fa-spin"></i> Loading...
-    <button class="btn btn-default btn-sm popclose" type="button">Close</button>
-  </div>
   <div id="s-lib-scroll-top" title="Back to Top">
-    <span class="fa-stack fa-lg">
-      <i class="fa fa-square-o fa-stack-2x"></i>
+    <span class="fa-stack fa-lg" aria-hidden="true">
+      <i class="far fa-square fa-stack-2x"></i>
       <i
-        class="fa fa-angle-double-up fa-stack-1x"
+        class="fas fa-angle-double-up fa-stack-1x"
         style="position: relative; bottom: 2px"
       ></i>
     </span>
@@ -370,10 +408,15 @@
   <script src="https://kbcc-cuny.libanswers.com/load_chat.php?hash=f7d1629a91e178fd0f799322e803b6e7"></script>
 
   <!-- add Vue scripts -->
-  <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> development -->
-  <script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script><!-- production -->
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.41/vue.global.js"></script> development script-->
+  <!-- production: SRI hash so a tampered/changed file won't execute; Renovate bumps version + hash together -->
+  <script
+    src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.41/vue.global.prod.js"
+    integrity="sha512-wVJFMtjV/zJhYFxXU3yfljFSqVvz+ukCqeVPplFyRr2opuk1qiADdXs+QmuwrI/r1ipyumss3exbm218HBNA9A=="
+    crossorigin="anonymous"
+  ></script>
   <script
     type="text/javascript"
-    src="https://libapps.s3.amazonaws.com/sites/2365/include/main5.js"
+    src="https://libapps.s3.amazonaws.com/sites/2365/include/home1.js"
   ></script>
-</body>
+</body>

groups/home/bootstrap5/home1.js

@@ -0,0 +1,572 @@
+// ES6 feature detection
+(function () {
+  window.isES6 = false;
+  try {
+    new Function([
+      "// Arrow functions",
+      "() => {};",
+      "",
+      "// Class support",
+      "class __ES6FeatureDetectionTest {}",
+      "",
+      "// Object initializer property and method shorthands",
+      "let es6a = true;",
+      "let es6b = {",
+      "  es6a,",
+      "  es6c() { return true; },",
+      "  es6d: [1, 2, 3],",
+      "};",
+      "",
+      "// Object destructuring",
+      "let { es6c, es6d } = es6b;",
+      "",
+      "// Spread operator",
+      "let es6e = [...es6d, 4];",
+      "",
+      "// Ternary operator",
+      "let es6f = es6a ? 'ternary' : 'no ternary';",
+      "",
+      "// Nullish coalescing",
+      "es6a ??= 10;",
+    ].join("\n"))();
+    window.isES6 = true;
+  } catch (e) {}
+})();
+
+// Display warning if ES6 detection failed
+window.onload = function () {
+  if (window.isES6 == false) {
+    var alertEl = document.getElementById("obsolete_browser_alert");
+    if (alertEl) alertEl.innerHTML =
+      '<div class="alert alert-danger" role="alert" style="text-align: center;"><strong>WARNING! Unsupported browser!</strong><br />It looks like you\'re using an old browser.<br />This website works best with modern browsers such as the latest versions of Chrome, Firefox, Safari, and Edge.<br />If you continue with this browser, many parts of this site will not work and you will see unexpected results.</div>';
+  }
+};
+
+const hamburgerComponent = {
+  template: `<div class="bigger-fancy-text">
+    <i v-bind:class="item.icon" aria-hidden="true"></i>
+    <strong>{{ item.description }}</strong>
+  </div>`,
+  props: ["item"],
+};
+
+const navigComponent = {
+  // Fixed: Removed invalid nested <a> elements (WCAG 4.1.1)
+  // Changed outer <a> to <div> and made dropdown-toggle a <button>
+  template: `<nav class="navbar navbar-expand navbar-light main-nav-container" aria-label="Main navigation">
+    <div class="container-fluid">
+      <ul class="nav navbar-nav" id="navbar-center">
+        <li v-for="(navmenu, navkey) in navlistofmenus"
+            v-bind:key="navmenu.id"
+            class="dropdown main-nav-dropdown"
+        >
+          <button class="dropdown-toggle ga-main-navbar"
+                  type="button"
+                  data-bs-toggle="dropdown"
+                  aria-haspopup="true"
+                  v-bind:aria-expanded="navmenu.isOpen ? 'true' : 'false'"
+                  @click="toggleDropdown(navmenu)"
+                  @keydown.escape="closeDropdown(navmenu)"
+          >
+            <span class="caret-text">{{ navkey }}</span>
+            <span class="fancy-caret"><i class="fas fa-angle-down" aria-hidden="true"></i></span>
+          </button>
+          <ul class="dropdown-menu fade dropdown-margin"
+              v-bind:aria-label="navkey + ' submenu'"
+          >
+            <li v-for="item in navmenu.data"
+                v-bind:key="item.id"
+            >
+              <a class="dropdown-item searchmenu"
+                 v-bind:aria-label="item.description + (item.target_blank ? ' (opens in new tab)' : '')"
+                 v-bind:href="item.link"
+                 v-bind:target="item.target_blank"
+                 v-bind:rel="item.target_blank ? 'noopener noreferrer' : null"
+              >
+                <div class="bigger-fancy-text">
+                  <i v-bind:class="item.icon" aria-hidden="true"></i>
+                  <strong>{{ item.description }}</strong>
+                  <i v-if="item.target_blank" class="fas fa-external-link-alt external-link-icon" aria-hidden="true"></i>
+                </div>
+              </a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </nav>`,
+  props: ["navlistofmenus"],
+  methods: {
+    toggleDropdown(navmenu) {
+      // Toggle the isOpen state for aria-expanded
+      navmenu.isOpen = !navmenu.isOpen;
+    },
+    closeDropdown(navmenu) {
+      navmenu.isOpen = false;
+    }
+  }
+};
+
+const onesearchComponent = {
+  // Fixed: Added autocomplete="off" to search input (WCAG 1.3.5)
+  // Note: autocomplete="off" is appropriate here as this is a library search, not a standard web search
+  template: `<form class="onesearch-jumbotron"
+      name="searchPrimoForm1"
+      ref="oneSearchForm"
+      role="search"
+      method="get"
+      action="https://cuny-kb.primo.exlibrisgroup.com/discovery/search"
+      enctype="application/x-www-form-urlencoded; charset=utf-8"
+      aria-label="Search the library catalog"
+      id="main-content"
+  >
+    <!-- default is "everything"  option suggested from OLS widget builder -->
+    <input name="facet" :value="facet" type="hidden"/>
+    <input name="mfacet" :value="mfacet" type="hidden" />
+    <input name="vid" value="01CUNY_KB:CUNY_KB" type="hidden" />
+    <input name="tab" value="Everything" type="hidden" />
+    <input name="search_scope" value="IZ_CI_AW" type="hidden" />
+    <input name="mode" value="basic" type="hidden" />
+    <input name="highlight" value="true" type="hidden" />
+    <input name="displayMode" value="full" type="hidden" />
+    <input name="bulkSize" value="10" type="hidden" />
+    <input name="dum" value="true" type="hidden" />
+    <input name="displayField" value="all" type="hidden" />
+    <input name="pcAvailabiltyMode" value="false" type="hidden" />
+    <input name="query" ref="primoQueryString" type="hidden" />
+    <div id="onesearch-header">
+        <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en">
+            <img class="image-fail onesearchsubmit" :src="logoSrc" alt="OneSearch" />
+        </a>
+    </div>
+    <div class="form-group" id="flex-search-form">
+        <label class="visually-hidden" for="primoQueryTemp">Search terms</label>
+        <div class="input-group zero-margin form-width" id="blue-border2">
+            <input class="form-control inherit-height-from-flex"
+                   name="queryTemp"
+                   id="primoQueryTemp"
+                   ref="primoQueryTempString"
+                   type="search"
+                   v-model="searchstring"
+                   aria-label="Search terms"
+                   placeholder="Enter search term here"
+                   autocomplete="off"
+             />
+        </div>
+        <div class="input-group zero-margin" id="blue-border3">
+            <input type="submit"
+                   class="btn btn-light form-control onesearchsubmit inherit-height-from-flex"
+                   value="Search"
+                   @click.stop.prevent="submitSearch"
+            />
+        </div>
+    </div>
+    <fieldset id="radios">
+        <legend class="visually-hidden">Limit search to</legend>
+
+        <input type="radio"
+               name="radio1"
+               id="booksradio"
+               @click="selectradio('rtype,include,books', '')"
+        >
+        <label for="booksradio">Books</label>
+
+        <div class="radiocontainer">
+            <input type="radio"
+                   name="radio1"
+                   id="articlesradio"
+                   @click="selectradio('tlevel,include,peer_reviewed', 'rtype,include,articles,1')"
+            >
+            <label for="articlesradio">Articles (Peer reviewed)</label>
+        </div>
+
+        <div class="radiocontainer">
+            <input type="radio"
+                   name="radio1"
+                   id="everythingradio"
+                   @click="selectradio('', '')"
+            >
+            <label for="everythingradio">Everything</label>
+        </div>
+    </fieldset>
+    <div id="advanced">
+        <strong>
+            <a href="https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&lang=en&mode=advanced">Advanced</a>
+        </strong>
+    </div>
+</form>`,
+  methods: {
+    selectradio(radiooutputfacet, radiooutputmfacet) {
+      this.facet = radiooutputfacet; // store the data from the radio selection
+      this.mfacet = radiooutputmfacet;
+    },
+    submitSearch() {
+      this.$refs.primoQueryString.value = `any,contains,${this.$refs.primoQueryTempString.value.replace(
+        /[,]/g,
+        " "
+      )}`; // vueified OLS widget code
+      this.$refs.oneSearchForm.submit(); // submit the form
+    },
+  },
+  computed: {
+    logoSrc() {
+      return this.isDark
+        ? "https://d2jv02qf7xgjwx.cloudfront.net/accounts/16298/images/onesearch_logo3.png"
+        : "https://d2jv02qf7xgjwx.cloudfront.net/accounts/16298/images/onesearch_logo2.png";
+    },
+  },
+  data() {
+    return {
+      facet: "", // initialize the data from the radio selection
+      mfacet: "",
+      isDark: false,
+    };
+  },
+  mounted() {
+    this.isDark = document.body.getAttribute("data-bs-theme") === "dark";
+    var self = this;
+    new MutationObserver(function () {
+      self.isDark = document.body.getAttribute("data-bs-theme") === "dark";
+    }).observe(document.body, { attributes: true, attributeFilter: ["data-bs-theme"] });
+  },
+};
+
+const { createApp } = Vue;
+
+const app1 = createApp({
+  components: {
+    "navig-component": navigComponent,
+    "hamburger-component": hamburgerComponent,
+  },
+  data() {
+    return {
+      hamburger: [
+        {
+          link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?tab=Everything&vid=01CUNY_KB:CUNY_KB&lang=en",
+          icon: "fas fa-search fa-fw bigger-icon",
+          description: "OneSearch",
+          target_blank: "",
+          id: 1,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/az.php",
+          icon: "fas fa-database fa-fw bigger-icon",
+          description: "Databases A to Z",
+          target_blank: "",
+          id: 2,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/guides",
+          icon: "fas fa-telescope fa-fw bigger-icon",
+          description: "Research Guides",
+          target_blank: "",
+          id: 3,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/faq",
+          icon: "fas fa-question-circle fa-fw bigger-icon",
+          description: "FAQ",
+          target_blank: "",
+          id: 4,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/calendar",
+          icon: "fas fa-clock fa-fw bigger-icon",
+          description: "Library Hours",
+          target_blank: "",
+          id: 5,
+        },
+        {
+          link: "https://library.kbcc.cuny.edu/sitemap",
+          icon: "fas fa-location-arrow fa-fw bigger-icon",
+          description: "Site Map",
+          target_blank: "",
+          id: 6,
+        },
+      ],
+      navlistofmenus: {
+        "Find It": {
+          id: 1,
+          isOpen: false, // Added for dynamic aria-expanded (WCAG 4.1.2)
+          data: [
+            {
+              link: "https://library.kbcc.cuny.edu/az.php",
+              icon: "fas fa-database fa-fw bigger-icon",
+              description: "Databases A to Z",
+              target_blank: "",
+              id: 1,
+            },
+            {
+              link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/npsearch?vid=01CUNY_KB:CUNY_KB&search_scope=all",
+              icon: "fas fa-newspaper fa-fw bigger-icon",
+              description: "Newspaper Search",
+              target_blank: "",
+              id: 2,
+            },
+            {
+              link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/search?vid=01CUNY_KB:CUNY_KB&tab=CourseReserves&search_scope=CourseReserves",
+              icon: "fas fa-cloud-download-alt fa-fw bigger-icon",
+              description: "Course Reserves",
+              target_blank: "",
+              id: 3,
+            },
+            {
+              link: "https://cuny-kb.primo.exlibrisgroup.com/discovery/jsearch?vid=01CUNY_KB:CUNY_KB",
+              icon: "fas fa-book fa-fw bigger-icon",
+              description: "Search for Specific Journals",
+              target_blank: "",
+              id: 4,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/academicworks",
+              icon: "fas fa-archive fa-fw bigger-icon",
+              description: "CUNY Academic Works",
+              target_blank: "_blank",
+              id: 5,
+            },
+            {
+              link: "https://kbcc.textbookx.com/institutional/index.php",
+              icon: "fas fa-cash-register fa-fw bigger-icon",
+              description: "KBCC Bookstore",
+              target_blank: "_blank",
+              id: 6,
+            },
+          ],
+        },
+        Services: {
+          id: 2,
+          isOpen: false, // Added for dynamic aria-expanded (WCAG 4.1.2)
+          data: [
+            {
+              link: "https://kbcc-cuny.illiad.oclc.org/illiad/logon.html",
+              icon: "fas fa-books fa-fw bigger-icon",
+              description: "Interlibrary Loan",
+              target_blank: "_blank",
+              id: 1,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/libraryservices/informationliteracy",
+              icon: "fas fa-chalkboard-teacher fa-fw bigger-icon",
+              description: "Book a Library Instruction Session",
+              target_blank: "",
+              id: 2,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/mediaservices",
+              icon: "fas fa-photo-video fa-fw bigger-icon",
+              description: "Media Services",
+              target_blank: "",
+              id: 3,
+            },
+            {
+              link: "https://kbcc-cuny.libanswers.com/form?queue_id=6967",
+              icon: "fas fa-shopping-basket fa-fw bigger-icon",
+              description: "Suggest a Book for Purchase",
+              target_blank: "",
+              id: 4,
+            },
+            {
+              link: "https://kbcc-cuny.libwizard.com/id/8cdb3f1a787de3c307a8cf5d75cad406",
+              icon: "fas fa-bookmark fa-fw bigger-icon",
+              description: "Suggest an Item to Add to Reserves",
+              target_blank: "",
+              id: 5,
+            },
+          ],
+        },
+        "About Us": {
+          id: 3,
+          isOpen: false, // Added for dynamic aria-expanded (WCAG 4.1.2)
+          data: [
+            {
+              link: "https://library.kbcc.cuny.edu/about-us/directory",
+              icon: "fas fa-address-book fa-fw bigger-icon",
+              description: "Faculty & Staff Directory",
+              target_blank: "",
+              id: 1,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/newarrivals",
+              icon: "far fa-mail-bulk fa-fw bigger-icon",
+              description: "New Arrivals",
+              target_blank: "",
+              id: 2,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/about-us/liaisons",
+              icon: "fas fa-theater-masks fa-fw bigger-icon",
+              description: "Subject Liaisons",
+              target_blank: "",
+              id: 3,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/social",
+              icon: "far fa-hashtag fa-fw bigger-icon",
+              description: "Social Media",
+              target_blank: "",
+              id: 4,
+            },
+            {
+              link: "https://cuny-kb.alma.exlibrisgroup.com/discovery/collectionDiscovery?vid=01CUNY_KB:CUNY_KB",
+              icon: "fa-solid fa-star fa-fw bigger-icon",
+              description: "Featured Collections",
+              target_blank: "",
+              id: 5,
+            },
+          ],
+        },
+        "Location & Hours": {
+          id: 4,
+          isOpen: false, // Added for dynamic aria-expanded (WCAG 4.1.2)
+          data: [
+            {
+              link: "https://tour.kingsborough.edu/",
+              icon: "fas fa-map-marked-alt fa-fw bigger-icon",
+              description: "Campus Map",
+              target_blank: "",
+              id: 1,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/calendar",
+              icon: "fas fa-clock fa-fw bigger-icon",
+              description: "Library Hours",
+              target_blank: "",
+              id: 2,
+            },
+          ],
+        },
+        Help: {
+          id: 5,
+          isOpen: false, // Added for dynamic aria-expanded (WCAG 4.1.2)
+          data: [
+            {
+              link: "https://library.kbcc.cuny.edu/askalibrarian",
+              icon: "fas fa-book-reader fa-fw bigger-icon",
+              description: "Ask A Librarian",
+              target_blank: "",
+              id: 1,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/faq",
+              icon: "fas fa-question-circle fa-fw bigger-icon",
+              description: "FAQ",
+              target_blank: "",
+              id: 2,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/guides",
+              icon: "fas fa-telescope fa-fw bigger-icon",
+              description: "Research Guides and Tutorials",
+              target_blank: "",
+              id: 3,
+            },
+            {
+              link: "https://library.kbcc.cuny.edu/ENGLISH24",
+              icon: "fas fa-question fa-fw bigger-icon",
+              description: "How to Use the Library",
+              target_blank: "",
+              id: 4,
+            },
+          ],
+        },
+      },
+    };
+  },
+  mounted() {
+    // Dynamic aria-expanded for hamburger menu (WCAG 4.1.2)
+    const hamburger = document.getElementById('hamburger');
+    const hamburgerContainer = document.getElementById('hamburger-container');
+
+    if (hamburger && hamburgerContainer) {
+      // Update aria-expanded when dropdown opens/closes (BS5 native events)
+      hamburgerContainer.addEventListener('shown.bs.dropdown', function() {
+        hamburger.setAttribute('aria-expanded', 'true');
+      });
+      hamburgerContainer.addEventListener('hidden.bs.dropdown', function() {
+        hamburger.setAttribute('aria-expanded', 'false');
+      });
+    }
+  }
+});
+app1.mount("#app1");
+
+const app2 = createApp({
+  components: {
+    "onesearch-component": onesearchComponent,
+  },
+});
+app2.mount("#app2");
+
+const app3 = createApp({
+  data() {
+    return {
+      isDark: false,
+    };
+  },
+  methods: {
+    toggleTheme() {
+      this.isDark = !this.isDark;
+      localStorage.setItem("kbcc-theme", this.isDark ? "dark" : "light");
+      if (this.isDark) {
+        document.body.setAttribute("data-bs-theme", "dark");
+      } else {
+        document.body.removeAttribute("data-bs-theme");
+      }
+      var bg = document.querySelector(".kbcc-background-image");
+      if (bg && bg.style.backgroundImage) {
+        var match = bg.style.backgroundImage.match(/url\([^)]+\)/);
+        if (match) {
+          var overlay = this.isDark ? "rgba(0,0,0,0.4)" : "rgba(255,255,255,0.6)";
+          bg.style.backgroundImage =
+            "linear-gradient(to bottom, " + overlay + " 0%, " + overlay + " 100%), " + match[0];
+        }
+      }
+      var logo = document.getElementById("library-logo");
+      if (logo) {
+        logo.src = this.isDark ? logo.dataset.darkSrc : logo.dataset.lightSrc;
+      }
+    },
+  },
+  mounted() {
+    this.isDark = document.body.getAttribute("data-bs-theme") === "dark";
+    var logo = document.getElementById("library-logo");
+    if (logo && this.isDark) {
+      logo.src = logo.dataset.darkSrc;
+    }
+    var self = this;
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function(e) {
+      if (!localStorage.getItem("kbcc-theme")) {
+        self.isDark = e.matches;
+        if (self.isDark) {
+          document.body.setAttribute("data-bs-theme", "dark");
+        } else {
+          document.body.removeAttribute("data-bs-theme");
+        }
+        if (logo) logo.src = self.isDark ? logo.dataset.darkSrc : logo.dataset.lightSrc;
+      }
+    });
+  },
+});
+app3.mount("#app3");
+
+// Randomly set the background image for .kbcc-background-image
+(function () {
+  const images = [
+    "https://libapps.s3.amazonaws.com/accounts/16298/images/library_front_view.jpg",
+    "https://d2jv02qf7xgjwx.cloudfront.net/accounts/16298/images/copy_for_it.jpg",
+    "https://d2jv02qf7xgjwx.cloudfront.net/accounts/16298/images/Library_Website_Background_Images_005.jpg",
+    "https://d2jv02qf7xgjwx.cloudfront.net/accounts/16298/images/Library_Website_Background_Images_002.jpg",
+  ];
+  var picked = images[Math.floor(Math.random() * images.length)];
+  var el = document.querySelector(".kbcc-background-image");
+  if (el) {
+    // Check theme for correct overlay color
+    var stored = localStorage.getItem("kbcc-theme");
+    var prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+    var isDark = stored ? stored === "dark" : prefersDark;
+    var overlay = isDark ? "rgba(0,0,0,0.4)" : "rgba(255,255,255,0.6)";
+    el.style.backgroundImage =
+      "linear-gradient(to bottom, " + overlay + " 0%, " + overlay + " 100%), url('" + picked + "')";
+  }
+})();
+

misc/system-wide-js-css.html

@@ -1,167 +0,0 @@
-<!-- Google Tag Manager -->
-<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-})(window,document,'script','dataLayer','GTM-NXHWQX3');</script>
-<!-- End Google Tag Manager -->
-
-<style>
-
-/* Fix the color of the "Search" button on the subject pages */
-form .btn.btn-info {
-    background-color:#003466;
-    border:1px solid #003466;
-}
-
-/* Make the badges KBCC blue so they doesn't clash
-.s-lg-az-result-badge-new, .s-lg-az-result-badge-popular, .s-lg-az-result-badge-featured {
-    background-color:#003466;
-} */
-
-
-/* CSS to target buttons on the LibGuides homepage more specifically.
-    These had been broken by a LibGuides update, 9/6/2016 */
-
-.s-lg-hp-btn-section, .s-lg-hp-btn-section:hover, .s-lg-hp-btn-section:focus {
-    background-color:#003466;
-    border:1px solid #003466;
-}
-
-/* temporary rule to keep non-working links to librarians pages from displaying on the guides -> course guides page */
-.s-lg-guide-info-account {
-    display:none;
-}
-
-/* styling the header on the main page */
-#s-lg-hp-nav {     
-    background:url(https://www1.kingsborough.edu/photo_album/kcc_campus_06/images/KG_Kibbee_3_jpg.jpg); /* does not seem to work well with .png files */ 
-    background-color:#258;     
-    background-size:100%;     
-    height:190px;
-}
-
-#s-lg-hp-nav-bottom {
-    background-color:rgba(255,255,255,0.55); 
-    border-radius:0;
-} 
-
-#nav-spacer {
-    height:55px;
-    width:400px;
-}
-
-#nav-title-spacer {
-    height:42px; 
-    width:400px; 
-    padding:0px 0px 0px 20px; 
-    margin-bottom:10px;
-    background-color:rgba(0,0,0,0.65);
-    color:white;
-}
-
-/* makes the heading smaller on very small screens */
-
-@media (max-width: 455px) {
-    h1 {
-        font-size: 25px;
-    }
-   #nav-title-spacer {
-        width: inherit;
-    }
-}
-
-/* Making the pills the right color */
-
-a.label.label-info:hover {
-    background-color:#003466;
-} 
-
-.label-info {
-   background-color:#003466;
-}
-
-/* new nav pills styling (11/17/2016) */
-
-.s-lg-index-nav-btn.active > .btn {
-   background-color:#003466;
-}
-
-.s-lg-index-nav-btn.active > .btn:focus {
-   background-color:#003466;
-}
-
-.s-lg-index-nav-btn.active > .btn:hover {
-   background-color:#003466;
-}
-
-ul.nav.nav-pills > .s-lg-index-nav-btn.active > button.btn:focus {
-    outline: none;
-}
-
-/* not sure what these are for */
-#spacer {
-        height:30px;
-}
-
-#s-lib-bc {
-       clear:both;
-}
-
-/* alternate fonts included to accommodate computers that do not have the defaults */
-body {
-        font-family: arial, sans-serif;
-}
-
-/* add a bit of space above the blue "Go To A-Z List" button on the LibGuides homepage*/
-a[href^="/az.php"].btn.btn-info.s-lg-hp-btn-section {
-       margin-top:9px;
-}
-
-/* new banner 6/27/2021 */
-#bannercontainer {
-        width: %100;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
-}
-
-@media only screen and (min-width: 1px) {
-        #newbanner {
-                width: 80%;
-        }
-} 
-
-@media only screen and (min-width: 992px) {
-        #newbanner {
-                width: 60%;
-        }
-}
-</style>
-
-<!-- scripts to replace Email Me buttons in profiles with LibAnswers widgets -->
-<script>
-$(document).ready(function() { 
-  try {
-    document.querySelector("[id^='s-lib-profile-email-']").innerHTML = "<div id='s-la-widget-19393'></div>"
-  } catch (error) {
-    console.log("Email Me button not found on this page. No action taken. This is just a warning...")
-  };
-});
-</script>
-<script src="https://kbcc-cuny.libanswers.com/1.0/widgets/19393"></script>
-
-<!-- global style to replace Email Me buttons in profiles with LibAnswers widgets -->
-<style>
-#s-la-widget-19393 { 
-       margin-bottom: 8px; 
-}
-
-#s-la-widget-19393 > button {
-       background-color: #003466;
-       border: #003466;
-       color: #fff;
-}
-</style>

misc/system-wide.css

@@ -0,0 +1,84 @@
+<style>
+#bannercontainer {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: -20px;
+}
+
+@media only screen and (min-width: 1px) {
+        #newbanner {
+                width: 80%;
+        }
+} 
+
+@media only screen and (min-width: 992px) {
+        #newbanner {
+                width: 60%;
+        }
+}
+
+h1, h2 { 
+    color: white; 
+    font-family: Arial, Helvetica, Verdana;
+}
+
+body {
+    font-family: Arial, Helvetica, Verdana;
+} 
+
+/* this code makes the <a> tag that holds bannercontainer a block element,
+so that it can take up the full width of the screen */
+a:has(#bannercontainer) {
+    display: block;
+    width: 100%;
+}
+
+/* tighten up elements at the top of the AtoZ */
+#s-lib-public-header-desc { margin-top: -30px; }
+#s-lib-public-main-searchbar { margin-top: -20px; }
+
+/* change search button color to Kingsborough orange */
+.btn-primary, .btn-primary:hover, .btn-primary:active { border-color: #ff4e00 !important; background-color: #ff4e00 !important; }
+
+.btn.btn-info { color: #fff; }
+
+/* change the background color of the header on mobile */ 
+#az-public-mobile-filters { background-color: #003466; } 
+
+/* make the text in the header white, so that it shows up on the dark blue background */
+.select2 { background-color: white; }
+.collapsible, .s-lg-az-reset { color: white !important; }
+
+/* make nav items bigger */
+textarea::placeholder, input::placeholder, .select2-selection__choice__display { font-size: 1.3em !important; }
+.select2-container { overflow: visible; }
+#col-search > .w-100 > input:not(:placeholder-shown) { font-size: 1em !important } /* fix text size on filled out text box */
+
+/* make keyboard focus outlines orange */
+:is(a, button, input, select, textarea, iframe, [tabindex]):focus-visible {
+  outline: 3px solid #ff4e00 !important;
+  outline-offset: 2px !important;
+  box-shadow: none !important;
+}
+
+/* make skiplink focus outline orange */
+.s-lg-guide-body #s-lg-public-skiplink:focus {
+  outline: 3px solid #ff4e00 !important;
+  outline-offset: 2px !important;
+  box-shadow: none !important;
+  border: 0;
+}
+
+/* fix the problem with vertical nav list items not displaying at 100% width */
+li.nav-item { width: 100%; }
+
+li.nav-item a {
+  display: block; 
+  width: 100%;
+}
+
+</style>

package.json

@@ -9,11 +9,11 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "eslint": "^8.40.0",
-    "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-vue": "^9.12.0",
-    "prettier": "2.8.8"
+    "@eslint/js": "^10.0.1",
+    "eslint": "^10.0.0",
+    "eslint-config-prettier": "^10.0.0",
+    "eslint-plugin-vue": "^10.0.0",
+    "globals": "^17.3.0",
+    "prettier": "3.9.6"
   }
 }

renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "lockFileMaintenance": {
+    "enabled": true
+  }
+}