details + keyboard nav

osunyorg · Sep 21, 2024 · f7370a7 · f7370a7
1 parent f308d93
commit f7370a7
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 6 deletions.
diff --git a/assets/js/theme/components/lightbox/container.js b/assets/js/theme/components/lightbox/container.js
@@ -5,18 +5,23 @@ window.osuny.lightbox = window.osuny.lightbox || {};
 window.osuny.lightbox.LightboxContainer = function (element) {
     this.element = element;
     this.bodyElement = document.querySelector('body');
+    this.mainElement = document.querySelector('main');
+    this.headerElement = document.querySelector('header');
+    this.footerElement = document.querySelector('footer');
     this.opened = false;
     this.content = this.element.getElementsByClassName(window.osuny.lightbox.classes.content).item(0);
 };
 
 window.osuny.lightbox.LightboxContainer.prototype = {
     open () {
+        this._disablePageElement();
         this.bodyElement.style.overflow = 'hidden';
         this.element.style.display = 'block';
         this.opened = true;
     },
     close () {
         this._removeImageContent();
+        this._enablePageElement();
         this.bodyElement.style.overflow = 'visible';
         this.element.style.display = 'none';
         this.opened = false;
@@ -34,5 +39,21 @@ window.osuny.lightbox.LightboxContainer.prototype = {
     },
     _removeImageContent () {
         this.content.innerHTML = '';
+    },
+    _disablePageElement () {
+        this.mainElement.inert = true;
+        this.mainElement.setAttribute('aria-hidden', 'true');
+        this.headerElement.inert = true;
+        this.headerElement.setAttribute('aria-hidden', 'true');
+        this.footerElement.inert = true;
+        this.footerElement.setAttribute('aria-hidden', 'true');
+    },
+    _enablePageElement() {
+        this.mainElement.inert = false;
+        this.mainElement.setAttribute('aria-hidden', 'false');
+        this.headerElement.inert = false;
+        this.headerElement.setAttribute('aria-hidden', 'false');
+        this.footerElement.inert = false;
+        this.footerElement.setAttribute('aria-hidden', 'false');
     }
 };
diff --git a/assets/js/theme/components/lightbox/manager.js b/assets/js/theme/components/lightbox/manager.js
@@ -36,7 +36,7 @@ window.osuny.lightbox.manager = {
             popupDetailsElement = controlRackElement.getElementsByClassName(window.osuny.lightbox.classes.detailWindow).item(0);
         this.container = new window.osuny.lightbox.LightboxContainer(containerElement);
         this.controlRack = new window.osuny.lightbox.ControlRack(controlRackElement);
-        this.popupDetails = new window.osuny.lightbox.DetailWindow(popupDetailsElement);
+        this.popupDetails = new window.osuny.lightbox.Popup(popupDetailsElement);
     },
     _initializeListeners () {
         var i = 0;

diff --git a/assets/js/theme/components/lightbox/popupDetail.js b/assets/js/theme/components/lightbox/popupDetail.js
@@ -2,7 +2,7 @@
 window.osuny = window.osuny || {};
 window.osuny.lightbox = window.osuny.lightbox || {};
 
-window.osuny.lightbox.DetailWindow = function (element) {
+window.osuny.lightbox.Popup = function (element) {
     this.element = element;
     this.content = this.element.getElementsByClassName(window.osuny.lightbox.classes.detailWindowContent).item(0);
     this.title = null;
@@ -15,7 +15,7 @@ window.osuny.lightbox.DetailWindow = function (element) {
     this.close();
 };
 
-window.osuny.lightbox.DetailWindow.prototype = {
+window.osuny.lightbox.Popup.prototype = {
     _show (content) {
         this._resetTitle();
         if (content === 'description') {

diff --git a/assets/sass/_theme/components/lightbox.sass b/assets/sass/_theme/components/lightbox.sass
@@ -48,9 +48,9 @@ a.glightbox
                 display: flex
                 justify-content: space-between
                 width: 100%
-                a
-                    color: $color-text
-                    text-decoration: underline
+            a
+                color: $color-text
+                text-decoration: underline
             &-content
                 @include body-text
             @include media-breakpoint-down(sm)