Merge branch 'develop' into 834-fix-logging-of-unnecessary-stack-trac…

…es-for-common-httperrors-400-ish-and-500-ish-status-codes-and-bad-certificates

.github/workflows/main.yml

@@ -27,7 +27,7 @@ jobs:
       
       - name: Install Poetry
         run: |
-          curl -sSL https://install.python-poetry.org | python3 -
+          curl -sSL https://install.python-poetry.org | python3 - --version 1.8.5
           echo "$HOME/.local/bin" >> $GITHUB_PATH
 
       - name: Install dependencies

README.md

@@ -27,7 +27,7 @@ tools.  Here is a quick tour of the our EZID `pyproject.toml`:
 We declare Poetry as our build tool
 ```
 [build-system]
-requires = ["poetry-core>=1.0.0"]
+requires = ["poetry-core>=1.0.0,<2.0.0"]
 build-backend = "poetry.core.masonry.api"
 ```
 

ansible/group_vars/all

@@ -102,7 +102,6 @@ email_new_account:             "{{ ssm_params['email_new_account'] }}"
 link_checker_admin:            "{{ ssm_params['link_checker_admin'] }}"
 log_level:                     "{{ ssm_params['log_level'] }}"
 matomo_site_id:                "{{ ssm_params['matomo_site_id'] }}"
-matomo_auth_token:             "{{ ssm_params['matomo_auth_token'] }}"
 opensearch_base:               "{{ ssm_params['opensearch_base'] }}"
 opensearch_index:              "{{ ssm_params['opensearch_index'] }}"
 opensearch_user:               "{{ ssm_params['opensearch_user'] }}"

ansible/roles/ezid/tasks/configure_ezid.yaml

@@ -24,7 +24,7 @@
 
 - name: install poetry
   ansible.builtin.pip:
-    name: poetry
+    name: poetry==1.8.5
 
 - name: run pip install
   ansible.builtin.command:

dev/includes/accordion.html

@@ -15,32 +15,11 @@
 
 	</details>
 
-	<details id="accordion__section-3" class="accordion__section">
-		<summary class="accordion__title">Pricing</summary>
-
-		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cumque ex, pariatur autem, numquam veniam, ipsam accusantium hic officia qui doloremque soluta, minus cupiditate obcaecati est temporibus expedita at eligendi.</p>
-
-	</details>
-
 	<details id="accordion__section-4" class="accordion__section">
 		<summary class="accordion__title">Documentation</summary>
 
 		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate reprehenderit, eius ipsam nulla inventore, tempore eveniet dicta dolores eaque illo provident officiis perspiciatis ut tenetur voluptatum sapiente? Molestiae, aliquid quia.</p>
 
 	</details>
 
-	<details id="accordion__section-5" class="accordion__section">
-		<summary class="accordion__title"><abbr title="Frequently Asked Questions">FAQ</abbr></summary>
-
-		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas molestias quidem quae reprehenderit eveniet fuga sapiente, temporibus aspernatur obcaecati quia illum similique, impedit soluta reiciendis non architecto expedita nesciunt optio!</p>
-
-	</details>
-
-	<details id="accordion__section-6" class="accordion__section">
-		<summary class="accordion__title">Media</summary>
-
-		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores quam deleniti obcaecati perferendis earum itaque necessitatibus accusantium consequuntur labore in blanditiis illo, corrupti amet maiores! Consequuntur et maxime quia ratione.</p>
-
-	</details>
-
 </div>

dev/includes/footer_geo-off.html

@@ -19,7 +19,7 @@
 	</div>
 
 	<div class="footer__icons">
-		<a class="footer__icon-link" href="" title="Twitter"><img class="footer__icon" src="images/iconTwitter.svg" alt="California Digital Library"></a>
+		<!-- <a class="footer__icon-link" href="" title="Twitter"><img class="footer__icon" src="images/iconTwitter.svg" alt="California Digital Library"></a> -->
 		<a class="footer__icon-link" href="" title="RSS"><img class="footer__icon" src="images/iconRSS.svg" alt="California Digital Library"></a>
  	</div>
 

dev/includes/footer_geo-on.html

@@ -25,7 +25,7 @@
 	</div>
 
 	<div class="footer__icons">
-		<a class="footer__icon-link" href="" title="Twitter"><img class="footer__icon" src="images/iconTwitter.svg" alt="California Digital Library"></a>
+		<!-- <a class="footer__icon-link" href="" title="Twitter"><img class="footer__icon" src="images/iconTwitter.svg" alt="California Digital Library"></a> -->
 		<a class="footer__icon-link" href="" title="RSS"><img class="footer__icon" src="images/iconRSS.svg" alt="California Digital Library"></a>
  	</div>
 

dev/includes/header.html

@@ -18,17 +18,15 @@
     <img src="images/mobile-menu.svg" alt="Show or hide navigation" class="header__nav-button-icon">
   </button>
 
-  <nav role="navigation" id="js-header__nav" class="header__nav--selected" aria-hidden="false">
+  <nav role="navigation" id="js-header__nav" class="header__nav--selected">
     <a class="header__nav-item-search" href="">Search</a>
     <details aria-expanded="false">
       <summary class="header__nav-item-learn" role="button">Learn</summary>
       <div class="header__subnav-panel">
         <a class="header__nav-subitem" href="/learn#01">What Is EZID?</a>
         <a class="header__nav-subitem" href="/learn#02">Current Users</a>
-        <a class="header__nav-subitem" href="/learn#03">Pricing</a>
         <a class="header__nav-subitem" href="/learn#04">Documentation</a>
-        <a class="header__nav-subitem" href="/learn#05">FAQ</a>
-        <a class="header__nav-subitem" href="/learn#06">Media</a>
+        <a class="header__nav-subitem" href="/learn/doi_services_faq">FAQ</a>
         <a class="header__nav-subitem" href="/doc/apidoc.html">API Guide</a>
         <a class="header__nav-subitem" href="/demo">EZID Demo</a>
       </div>

dev/includes/login-modal.html

@@ -1,8 +1,10 @@
 
-<div id="js-login-modal" class="login-modal" aria-hidden="true" role="dialog" aria-labelledby="login-modal__title">
+<div id="js-login-modal" class="login-modal" aria-expanded="false" role="dialog" aria-labelledby="login-modal__title">
 	<div class="login-modal__header">
 		<div id="login-modal__title" class="login-modal__title">Access your account</div>
-		<img id="js-login-modal__close" src="images/icon_cross.svg" alt="close" class="login-modal__close">
+		<button type="button" id="js-login-modal__close" class="login-modal__close" aria-label="Close modal">
+  		<img src="images/icon_cross.svg" alt="close">
+		</button>
 	</div>
 	<form id="js-login-modal__form" action="url-here" class="login-modal__form">
     <div class="login-modal__form-element fcontrol__group-stacked">

dev/js/main2.js

@@ -1,7 +1,7 @@
 // ##### Main JavaScript ##### //
 
-$(document).ready(function(){
-  
+$(document).ready(function () {
+
   // ***** Show/hide mobile menu via mobile menu icon ***** //
 
   // Before toggling menu, change default header menu class to non-selected state and change default aria attribute:
@@ -12,11 +12,11 @@ $(document).ready(function(){
   $('#js-header__nav').attr('aria-expanded', 'false');
 
   // Toggle classes and attributes:
-  $('#js-header__nav-button').click(function(){
-    
+  $('#js-header__nav-button').click(function () {
+
     $('#js-header__nav').toggleClass('header__nav header__nav--selected', 300, 'easeInOutCubic');
 
-    if($('#js-header__nav').attr('aria-expanded') == 'false') {
+    if ($('#js-header__nav').attr('aria-expanded') == 'false') {
       $('#js-header__nav').attr('aria-expanded', 'true');
     } else {
       $('#js-header__nav').attr('aria-expanded', 'false');
@@ -28,11 +28,11 @@ $(document).ready(function(){
 
   // Pre-open an accordion section by retrieving the referring URL hash (up to 2 digits), removing the hash tag, and adding the hash value to the jQuery selector:
 
-  var urlhash = window.location.hash.substr(1,3);
-  
-  $('#accordion__section-'+urlhash).attr('open', '');
+  var urlhash = window.location.hash.substr(1, 3);
+
+  $('#accordion__section-' + urlhash).attr('open', '');
 
-  $('.accordion__title').click(function(){
+  $('.accordion__title').click(function () {
 
     // If an accordion title is clicked, close all the other sections if they are open and set their aria-expanded attributes to false:
     if ($(this).parent().siblings().attr('open', '')) {
@@ -51,39 +51,152 @@ $(document).ready(function(){
 
   // If 'required' attribute exists on a text input, add 'required' class to its label:
 
-  $('.fcontrol__text-field-stacked[required]').map(function() {
+  $('.fcontrol__text-field-stacked[required]').map(function () {
     $(this).siblings('.fcontrol__text-label-stacked').addClass('fcontrol__label-required');
   });
 
-  $('.fcontrol__text-field-inline[required]').map(function() {
+  $('.fcontrol__text-field-inline[required]').map(function () {
     $(this).siblings('.fcontrol__text-label-inline').addClass('fcontrol__label-required');
   });
 
-  // ***** Modal Login ***** //
+}); // Close $(document).ready(function()
+
+// ***** The "Learn" menu needs more flexibility for keyboard navigation ***** //
 
-  // Toggle open and closed from login button
+document.addEventListener('DOMContentLoaded', () => {
+  const detailsElement = document.getElementById('header__nav-details-learn');
+  const summaryElement = detailsElement.querySelector('summary');
+  const focusableElements = detailsElement.querySelectorAll('a');
 
-  $('#js-header__loginout-button').click(function(){
-    if ($('#js-login-modal').attr('aria-hidden') == 'true') {
-      $('#js-login-modal').attr('aria-hidden', 'false');
-    }else {
-      $('#js-login-modal').attr('aria-hidden', 'true');
+  // Close menu when clicking outside
+  document.addEventListener('click', (event) => {
+    if (!detailsElement.contains(event.target)) {
+      closeMenu();
     }
-    $('#js-login-modal').fadeToggle(200);
   });
 
-  // Close when close icon is clicked
+  // Toggle aria-expanded when menu is toggled
+  summaryElement.addEventListener('click', () => {
+    const isOpen = detailsElement.hasAttribute('open');
+    detailsElement.setAttribute('aria-expanded', String(!isOpen));
+  });
 
-  $('#js-login-modal__close').click(function(){
-    $('#js-login-modal').attr('aria-hidden', 'true');
-    $('#js-login-modal').fadeToggle(200);
+  // Close menu when tabbing out
+  detailsElement.addEventListener('keydown', (event) => {
+    if (event.key === 'Tab') {
+      const focusArray = Array.from(focusableElements);
+      const firstElement = focusArray[0];
+      const lastElement = focusArray[focusArray.length - 1];
+
+      if (event.shiftKey && document.activeElement === firstElement) {
+        // Shift + Tab on the first element
+        event.preventDefault();
+        closeMenu();
+        summaryElement.focus();
+      } else if (!event.shiftKey && document.activeElement === lastElement) {
+        // Tab on the last element
+        event.preventDefault();
+        closeMenu();
+        summaryElement.focus();
+      }
+    }
+  });
+
+  // Keyboard navigation
+  detailsElement.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') {
+      closeMenu();
+      summaryElement.focus();
+    }
   });
 
-  // Close when form is submitted
+  // Helper function to close the menu
+  function closeMenu() {
+    detailsElement.removeAttribute('open');
+    detailsElement.setAttribute('aria-expanded', 'false');
+  }
+});
+
+
+// ***** Modal Login ***** //
+document.addEventListener('DOMContentLoaded', () => {
+  const modal = document.getElementById('js-login-modal');
+  const closeButton = document.getElementById('js-login-modal__close').parentElement;
+  const formElements = modal.querySelectorAll('input, button, a');
+  const firstFocusable = formElements[0];
+  const lastFocusable = formElements[formElements.length - 1];
+  const openButton = document.getElementById('js-header__loginout-button');
+
+  // Ensure aria-expanded is set to false initially
+  modal.setAttribute('aria-expanded', 'false');
+  modal.style.display = 'none';
+
+  const openModal = () => {
+    modal.setAttribute('aria-expanded', 'true');
+    modal.style.display = 'block';
+    // modal.classList.add('open');
+    firstFocusable.focus();
+  };
+
+  const closeModal = (event) => {
+    if (event) {
+      event.preventDefault();
+    }
+    modal.setAttribute('aria-expanded', 'false');
+    modal.style.display = 'none';
+    // modal.classList.remove('open');
+    openButton.focus();
+  };
+
+  const handleKeydown = (event) => {
+    if (event.key === 'Escape') {
+      closeModal();
+    }
 
-  $('#js-login-modal__form').submit(function(){
-    $('#js-login-modal').attr('aria-hidden', 'true');
-    $('#js-login-modal').fadeToggle(200);
+    if (event.key === 'Tab') {
+      // Allow tabbing outside and close modal if tabbing out
+      if (event.shiftKey) {
+        // Shift + Tab: focus backwards
+        if (document.activeElement === firstFocusable) {
+          closeModal();
+        }
+      } else {
+        // Tab: focus forwards
+        if (document.activeElement === lastFocusable) {
+          closeModal();
+        }
+      }
+    }
+  };
+
+  // Add event listeners
+  // Close modal when clicking outside
+  document.addEventListener('click', (event) => {
+    if (!modal.contains(event.target) && event.target !== openButton &&
+        modal.getAttribute('aria-expanded') === 'true') {
+      closeModal();
+    }
   });
 
-}); // Close $(document).ready(function()
+  closeButton.addEventListener('click', closeModal);
+  closeButton.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      closeModal(event);
+    }
+  });
+  document.addEventListener('keydown', handleKeydown);
+
+
+  if (openButton) {
+    openButton.addEventListener('click', () => {
+      const expanded = modal.getAttribute('aria-expanded');
+      if (expanded === null || expanded === 'false') {
+        openModal();
+      } else {
+        closeModal();
+      }
+    });
+  }
+});
+