Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1494250

    My client’s accessibility consultants said we need to add aria labels to the lightbox arrows/controls (for example for the image popups on https://abodecommunities.org/communities/231-grant/) and for the bio popups on https://abodedev.wpengine.com/about/people/#leadership-team (those are coming from code provided by @guenni007). I worked with Claude to implement the code below (added via my custom css/javascript plugin), which seems to do the trick. Do you think this is a decent solution or do you think I should handle it some other way? Thanks so much and lmk if you have any questions!

    jQuery(document).ready(function($) {
      $.extend(true, $.magnificPopup.defaults, {
        closeMarkup: '<button title="Close (Esc)" type="button" class="mfp-close" aria-label="Close popup">×</button>',
        gallery: {
          arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%" aria-label="%title%"></button>',
          tPrev: 'Previous bio',
          tNext: 'Next bio'
        }
      });
      
      // Watch for when Magnific Popup adds arrows to the DOM
      var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
          mutation.addedNodes.forEach(function(node) {
            if (node.nodeType === 1) { // Element node
              var $node = $(node);
              
              // Check if this node or its children contain arrows
              if ($node.hasClass('mfp-arrow') || $node.find('.mfp-arrow').length) {
                // Determine if it's an image gallery by checking for mfp-figure
                var isImage = $('.mfp-figure').length > 0;
                var prevLabel = isImage ? 'Previous image' : 'Previous bio';
                var nextLabel = isImage ? 'Next image' : 'Next bio';
                
                $('.mfp-arrow-left').attr('aria-label', prevLabel);
                $('.mfp-arrow-right').attr('aria-label', nextLabel);
              }
            }
          });
        });
      });
      
      // Start observing the body for child additions
      observer.observe(document.body, {
        childList: true,
        subtree: true
      });
    });
    #1494256

    I remember the team members very well. Didn’t we write an extra pop-up script for that? Maybe it would be better to add a call-back there.
    You could also try hooking into the magnificPopup script and using the callback function to insert the aria labels.

    function add_magnific_popup_aria_labels() {
    ?>
    <script type="text/javascript">
    (function($) {
    'use strict';
            
            // Extend the existing MagnificPopup callbacks
            if (typeof $.avia_utilities !== 'undefined' && typeof $.avia_utilities.av_popup !== 'undefined') {
                
                // Save the original open callback function
                var originalOpenCallback = $.avia_utilities.av_popup.callbacks.open;
                
                // Overwrite the open callback function
                $.avia_utilities.av_popup.callbacks.open = function() {
                    
                    // Execute the original function
                    if (typeof originalOpenCallback === 'function') {
                        originalOpenCallback.call(this);
                    }
                    
                    // Add aria-labels to the navigation arrows
                    setTimeout(function() {
                        $('.mfp-arrow-left').attr('aria-label', 'Previous Bio');
                        $('.mfp-arrow-right').attr('aria-label', 'Next Bio');
                        $('.mfp-close').attr('aria-label', 'Close Lightbox');
                    }, 50);
                };
                
    			// Also add a change callback to ensure 
    			// that the labels are still present when the images change.
                var originalChangeCallback = $.avia_utilities.av_popup.callbacks.change;
                
                $.avia_utilities.av_popup.callbacks.change = function() {
                    
                    // Execute the original function
                    if (typeof originalChangeCallback === 'function') {
                        originalChangeCallback.call(this);
                    }
                    
                    // Ensure that aria-labels are present
                    $('.mfp-arrow-left').attr('aria-label', 'Previous Bio');
                    $('.mfp-arrow-right').attr('aria-label', 'Next Bio');
                };
            }
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'add_magnific_popup_aria_labels', 999);
    #1494258

    It depends a little on how you want to use it. If you only want to change this to “next bio” and “previous bio” for certain custom classes, we would need to rewrite this code a little.

    f.e. if you have a gallery – then you can give a custom class to that gallery element (f.e. team-member)

    function add_magnific_popup_aria_labels() {
        ?>
        <script type="text/javascript">
        (function($) {
            'use strict';
            
            if (typeof $.avia_utilities !== 'undefined' && typeof $.avia_utilities.av_popup !== 'undefined') {
                
                var originalOpenCallback = $.avia_utilities.av_popup.callbacks.open;
                
                $.avia_utilities.av_popup.callbacks.open = function() {
                    
                    if (typeof originalOpenCallback === 'function') {
                        originalOpenCallback.call(this);
                    }
                    
                    var self = this;
                    
                    setTimeout(function() {
                        // Determine labels based on the gallery container
                        var prevLabel = 'Previous image';
                        var nextLabel = 'Next image';
                        var closeLabel = 'Close lightbox';
                        
                        // Check if the clicked element (currItem.el) is inside a container with a custom class
                        if (self.currItem && self.currItem.el) {
                            var $link = $(self.currItem.el);
                            
                            // Find the parent lightbox container element
                            var $lightboxContainer = $link.closest('.avia-gallery, .av-masonry, .av-horizontal-gallery');
                            
                            if ($lightboxContainer.hasClass('team-member')) {
                                prevLabel = 'Previous person';
                                nextLabel = 'Next person';
                                closeLabel = 'Close biography';
                            } else if ($lightboxContainer.hasClass('products-gallery')) {
                                prevLabel = 'Previous product';
                                nextLabel = 'Next product';
                                closeLabel = 'Close product gallery';
                            } else if ($lightboxContainer.hasClass('projects-gallery')) {
                                prevLabel = 'Previous project';
                                nextLabel = 'Next project';
                                closeLabel = 'Close project gallery';
                            }
                            // Add more conditions as needed
                        }
                        
                        $('.mfp-arrow-left').attr('aria-label', prevLabel);
                        $('.mfp-arrow-right').attr('aria-label', nextLabel);
                        $('.mfp-close').attr('aria-label', closeLabel);
                    }, 50);
                };
                
                var originalChangeCallback = $.avia_utilities.av_popup.callbacks.change;
                
                $.avia_utilities.av_popup.callbacks.change = function() {
                    
                    if (typeof originalChangeCallback === 'function') {
                        originalChangeCallback.call(this);
                    }
                    
                    var self = this;
                    
                    // Update labels when changing images
                    var prevLabel = 'Previous image';
                    var nextLabel = 'Next image';
                    
                    if (self.currItem && self.currItem.el) {
                        var $link = $(self.currItem.el);
                        var $lightboxContainer = $link.closest('.avia-gallery, .av-masonry, .isotope, .av-horizontal-gallery');
                        
                        if ($lightboxContainer.hasClass('team-member')) {
                            prevLabel = 'Previous person';
                            nextLabel = 'Next person';
                        } else if ($lightboxContainer.hasClass('products-gallery')) {
                            prevLabel = 'Previous product';
                            nextLabel = 'Next product';
                        } else if ($lightboxContainer.hasClass('projects-gallery')) {
                            prevLabel = 'Previous project';
                            nextLabel = 'Next project';
                        }
                    }
                    
                    $('.mfp-arrow-left').attr('aria-label', prevLabel);
                    $('.mfp-arrow-right').attr('aria-label', nextLabel);
                };
            }
            
        })(jQuery);
        </script>
        <?php
    }
    add_action('wp_footer', 'add_magnific_popup_aria_labels', 999);

    you see this line includes masonry etc. if you like:

    // Find the parent lightbox container element
    var $lightboxContainer = $link.closest('.avia-gallery, .av-masonry, .av-horizontal-gallery');
    
    #1494270

    i remember we made for your “leadership” members an own popup script f.e.
    if you only want to change that aria-labels of that popup script – then the solutions above are not neccessary. Only change that inline popup script
    so try to replace that script inside the functions.php snippet by (remove temporarly the observer script above)

    window.addEventListener("DOMContentLoaded", function () {	
    	(function($) {
    		$('#people').each(function(){
    		var that = this;
    			$('.flex_column', this).each(function(i){
    				if($(this).find('.mfp-hide').length){
    					$(this).find('.bio-link').attr('href','#bio-'+(i+1)).addClass('no-scroll');
    					$(this).find('.avia_image').attr('href','#bio-'+(i+1)).addClass('no-scroll');
    					$(this).find('.mfp-hide').attr('id','bio-'+(i+1)).addClass('white-popup');
    				}
    			});
    		});
    
    		$('#people .flex_column').find('a[href^="#bio-"]').magnificPopup({
    			type:'inline',
    			midClick: true,
    			removalDelay: 500,
    			mainClass: 'avia-popup mfp-fade people',
    			gallery: { 
    				enabled:true,
    				arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%" aria-label="%title%"></button>',
    				tPrev: 'Previous Biography',
    				tNext: 'Next Biography',
    			},
    		});
    
    		$('#people .flex_column').find('.avia_image[href^="#bio-"]').magnificPopup({
    			type:'inline',
    			midClick: true,
    			removalDelay: 500,
    			mainClass: 'avia-popup mfp-fade people',
    			gallery: { 
    				enabled:true,
    				arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%" aria-label="%title%"></button>',
    				tPrev: 'Previous Biography',
    				tNext: 'Next Biography',
    			},
    		});
    
    	})(jQuery);
    }); 

    better see next solution
    PS you can get rid of style part – and place the css inside quick css.

    #1494275

    or even better – just use the team-member element as it is and parse a popup by your own.
    see with snippet on that example page: https://webers-testseite.de/teammember-vitae-2/
    PS: It is always best to examine each individual case closely, as this is the only way to offer a customized solution. Otherwise, one indulges in speculation.

    The last solution has the advantage that you only use the pure Enfold element for team members and then create your own lightbox with it. Disadvantage: you would have to rebuild your page and discard our previous design. In the window on the right side of the page, you can see that only plain text is entered in the Description Input Fiele — the Lightbox retrieves the image, name, and position from the existing DOM elements.
    To change the aria-label – just edit these lines:

    
    tPrev: 'Previous Biography',
    tNext: 'Next Biography',
    
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.