Merge branch 'master' into js-lib-update

middlebury · Dec 15, 2023 · 6bed62d · 6bed62d
2 parents 54205fb + 41bf7b9
commit 6bed62d
Show file tree

Hide file tree

Showing 10 changed files with 145 additions and 31 deletions.
diff --git a/src/js/events-datepicker.ts b/src/js/events-datepicker.ts
@@ -66,7 +66,6 @@ if (datePicker) {
   const picker = new Pikaday({
     field: datePicker,
     bound: false,
-    minDate: new Date(),
     defaultDate,
     setDefaultDate: Boolean(defaultDate),
     format: 'YYYY-MM-DD',
@@ -122,6 +121,7 @@ const pikaTitle = document.querySelector('.pika-title');
 
 if (pikaTitle) {
   pikaTitle.setAttribute('aria-atomic', 'true');
+  pikaTitle.setAttribute('aria-level', '3');
 }
 
 const pikaTable = document.querySelector('.pika-table');
@@ -130,3 +130,9 @@ if (pikaTable) {
   pikaTable.removeAttribute('cellpadding');
   pikaTable.removeAttribute('cellspacing');
 }
+
+const pikaRowTd = document.querySelectorAll('.pika-row td');
+
+pikaRowTd.forEach((td: HTMLElement) => {
+  td.setAttribute('role', 'gridcell');
+});
diff --git a/src/js/lightbox.ts b/src/js/lightbox.ts
@@ -275,7 +275,7 @@ class Lightbox {
   }
 }
 
-MicroModal.init({
+const lightboxConfig = {
   openTrigger: 'data-lightbox-open',
   closeTrigger: 'data-lightbox-close',
   onShow: (modal: any) => {
@@ -290,4 +290,17 @@ MicroModal.init({
     }
   },
   disableScroll: true
-});
+};
+
+MicroModal.init(lightboxConfig);
+
+const lightbox = $('[data-lightbox-open]');
+
+if(lightbox) {
+  on(lightbox, 'click', (e) => e.preventDefault());
+  on(lightbox, 'keydown', (e) => {
+    if (e.keyCode === 32) {
+      MicroModal.show(lightbox.getAttribute('data-lightbox-open'), lightboxConfig);
+    }
+  });
+}
diff --git a/src/scss/components/_profile-detail.scss b/src/scss/components/_profile-detail.scss
@@ -48,12 +48,15 @@ $profile-detail-programs-border-thick: 4px solid $gray-light;
   margin-bottom: $spacing-8;
   border-spacing: $spacing-3;
   border: 1px solid #dedede;
+  padding: $spacing-3;
 
-  & tr {
+  div[role="row"] {
     vertical-align: top;
     flex-direction: column;
 
-    & td {
+    div[role="cell"] {
+      overflow-wrap: break-word;
+
       &:not(:first-child) {
         margin-top: $spacing-3;
         border-top: 1px solid #dedede;
@@ -65,12 +68,13 @@ $profile-detail-programs-border-thick: 4px solid $gray-light;
   @include breakpoint(md) {
     margin-bottom: 4.5rem;
     border-spacing: $spacing-2;
+    padding: $spacing-2;
 
-    & tr {
+    div[role="row"] {
       vertical-align: top;
       flex-direction: row;
 
-      & td {
+      div[role="cell"] {
         padding: $spacing-2;
 
         &:not(:first-child) {
@@ -89,4 +93,4 @@ $profile-detail-programs-border-thick: 4px solid $gray-light;
   @include breakpoint(xl) {
     margin-bottom: $spacing-9;
   }
-}
+}
diff --git a/src/templates/paragraphs/gallery.twig b/src/templates/paragraphs/gallery.twig
@@ -2,8 +2,14 @@
 	<div
 		class="gallery__image">
 		{# should link to drupal page rendering the gallery images #}
-    <a href="/gallery-images#modal-{{ id }}" class="sr-only" target="_blank">View the gallery in a new window.</a>
-		<a class="gallery__link" data-lightbox-open="midd-lightbox-1" aria-label="Open gallery" aria-describedby="midd-gallery-1-label midd-gallery-1-count" role="button">
+    <a
+      href="/"
+      class="gallery__link"
+      data-lightbox-open="midd-lightbox-1"
+      aria-label="Open gallery"
+      aria-describedby="midd-gallery-1-label midd-gallery-1-count"
+      role="button"
+    >
 			{% include 'partials/img.twig' with { name: 'video' } %}
 			<span class="button button--primary gallery__button">
 				Open Gallery

diff --git a/src/templates/partials/event-filters.twig b/src/templates/partials/event-filters.twig
@@ -12,17 +12,108 @@
       </a>
     </div>
 
+    {% embed 'partials/filter.twig'
+      with {
+        id: 'event-date-filter',
+        title: 'Date'
+      }
+    %}
+      {% block filter_content %}
+        <label for="midd-events-datepicker" class="sr-only">
+          Filter by date
+        </label>
+        {# do not init datepicker on CI since it defaults to current day and breaks visual diff day change #}
+        {% if not env.test %}
+          <input type="text"
+            class="form-control js-events-datepicker"
+            id="midd-events-datepicker" />
+        {% endif %}
+      {% endblock %}
+    {% endembed %}
+
     {% include 'partials/filter.twig' with {
       title: 'Categories',
       items: [
         {
-          text: 'Minors'
+          text: 'Arts Calendar'
+        },
+        {
+          text: 'Athletics Calendar'
+        },
+        {
+          text: 'Campus Calendar'
+        },
+        {
+          text: 'Featured Events Calendar'
+        },
+        {
+          text: 'MIIS Main Calendar'
+        },
+        {
+          text: 'Student Calendar'
+        }
+      ]
+    } %}
+
+    {% include 'partials/filter.twig' with {
+      title: 'Organizations',
+      items: [
+        {
+          text: 'Academic Departments',
+          children: [
+            {
+              text: 'American Studies',
+            },
+            {
+              text: 'Anthropology',
+            },
+            {
+              text: 'Axinn Center for the Humanities',
+            },
+            {
+              text: 'Biology',
+            },
+            {
+              text: 'Internatioanl Programs & Off Campus Study',
+            },
+            {
+              text: 'Music',
+            },
+          ]
         },
         {
-          text: 'Majors'
+          text: 'Administrative Offices',
+          children: [
+            {
+              text: 'Academic Affairs',
+            },
+            {
+              text: 'Admissions',
+            },
+            {
+              text: 'Charles P. Scott Center for Spiritual and Religious Life',
+            },
+            {
+              text: 'Museum of Art',
+            },
+          ]
         },
         {
-          text: 'Programs'
+          text: 'Student Organizations',
+          children: [
+            {
+              text: 'Amnesty International',
+            },
+            {
+              text: 'Black Student Union',
+            },
+            {
+              text: 'Middlebury College Tea Enthusiast Association',
+            },
+            {
+              text: 'Quidditch',
+            },
+          ]
         }
       ]
     } %}

diff --git a/src/templates/partials/footer-cta-group.twig b/src/templates/partials/footer-cta-group.twig
@@ -1,6 +1,6 @@
-<div class="{{background_light ? 'footer-cta-light' : 'bg-blue-lighter'}} py-lg-7 text-center border-t border-navy">
+<div class="{{background_light ? 'footer-cta-light' : 'bg-blue-lighter'}} py-lg-7 text-center border-t border-navy" role="region" aria-labelledby="midd-footer-cta-label">
   <div class="container">
-    <h2 class="h2 pt-4 pt-md-5 pt-lg-0 mb-lg-7">
+    <h2 class="h2 pt-4 pt-md-5 pt-lg-0 mb-lg-7" id="midd-footer-cta-label">
       What do you want?
     </h2>
 

diff --git a/src/templates/partials/office-footer.twig b/src/templates/partials/office-footer.twig
@@ -1,4 +1,4 @@
-<div class="office-footer">
+<div class="office-footer" role="region" aria-label="Contact Information">
 	<div class="container">
 		<div class="office-footer__row">
 			<div class="office-footer__col">

diff --git a/src/templates/partials/page-header.twig b/src/templates/partials/page-header.twig
@@ -1,6 +1,6 @@
 <div class="container px-0">
 
-  <header class="page-header{% if image_src %} page-header--has-image{% endif %}{% if has_menu %} page-header--has-menu{% endif %}{% if app_header %} page-header--app{% endif %}" aria-labelledby="midd-page-header-label">
+  <header class="page-header{% if image_src %} page-header--has-image{% endif %}{% if has_menu %} page-header--has-menu{% endif %}{% if app_header %} page-header--app{% endif %}">
 
     {% if image_src %}
       <figure class="page-header__figure">

diff --git a/src/templates/partials/profile-detail.twig b/src/templates/partials/profile-detail.twig
@@ -52,15 +52,10 @@
       <p>Integer volutpat ligula eget enim. Suspendisse vitae arcu. Pellentesque nibh felis, eleifend id, commodo in, interdum vitae, leo. Praesent eu elit. Ut eu ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Maecenas elementum augue nec nisl. Proin auctor lorem at nibh. Curabitur nulla purus, feugiat id, elementum in, lobortis quis, pede. Vivamus sodales adipiscing sapien. Vestibulum posuere nulla eget wisi.</p>
     </div>
 
-    <table class="w-100 profile-detail__link-table">
-      <tr class="sr-only">
+    <div role="table" class="w-100 profile-detail__link-table">
+      <div role="row" class="d-flex">
         {% for name in links %}
-          <th>{{ name }}</th>
-        {% endfor %}
-      </tr>
-      <tr class="d-flex">
-        {% for name in links %}
-          <td>
+          <div role="cell">
             <strong class="f2 d-block">{{ name }}</strong>
             {% if name == 'Links' %}
               <ul class="f2">
@@ -76,10 +71,10 @@
 								items: social_links
 							} %}
             {% endif %}
-          </td>
+          </div>
         {% endfor %}
-      </tr>
-    </table>
+      </div>
+    </div>
 
     {% include 'paragraphs/course-list.twig' with {
       course_title: 'Courses Taught'
@@ -152,4 +147,4 @@
     </section>
 
   {% endblock %}
-{% endembed %}
+{% endembed %}
diff --git a/src/templates/partials/school-header.twig b/src/templates/partials/school-header.twig
@@ -30,8 +30,7 @@
 
           <div class="school-nav__menu">
 
-            <nav aria-labelledby="midd-main-nav-label">
-              <h2 class="sr-only" id="midd-main-nav-label">Main navigation</h2>
+            <nav aria-label="Main navigation">
               <ul class="school-nav__list">
                 {% for item in site_nav.items %}
                   <li class="school-nav__item">