Flick Carousel ARIA-HIDDEN observer

flick_aria_patch.js

class FlickPatch {  //  Flick Carousel ARIA-HIDDEN observer
    constructor(_d, _sQ) {
        this._d = _d; this._sQ = _sQ;
        this.aF = []; this.aObs = [];
    }
    init() {  //
        this.aF = Array.from( this._d.querySelectorAll( this._sQ ))
        if( this.aF.length ){
            this.aObs = []
            this.aF.forEach( ( eF )=>{
                const oObs = new MutationObserver( flickPatch.removeAttr );
                oObs.observe( eF, { attributes: true, childList: true, subtree: true } );
                this.aObs.push( oObs )
            })            
        }
        return this;
    }
    removeAttr( aObs ){  //
        if( aObs.length ){
            aObs.forEach( ( elO )=>{
                if( elO?.target ){
                    [ ... elO.target.querySelectorAll( "[aria-hidden='true']" )].forEach( ( eH )=>{
                        eH.removeAttribute("aria-hidden")
                    })
                }
            })
        }
    }
}
//. Usage
let flickPatch = {}
document.addEventListener("DOMContentLoaded", ( ev )=>{
    setTimeout( ()=>{
        flickPatch = new FlickPatch( document, ".flickity-slider" )
        flickPatch.init()   
    }, 8e3 )
})

This patch will observe and listen for changes in the Flickity carousel, and when triggered will remove aria-hidden from the carousel child elements. It will observe every carousel instance that exists on the page.

This logic utilizes the mutation observer to watch all carousels for changes. The changes may be user initiated or actuated via autoplay configuration.

See also: Can I Use Mutation Observer

Good day! Why is the launch done via setTimeout? Can I refuse it?

This was helpful for me. I adapted the code a bit to suit my needs, and now have Flickity sliders that are passing accessibility audits.

1. Instead of removing aria-hidden from all slides, it only removes the attribute from items which are hidden on the x-axis.
2. There's a configurable threshold value to hide items that are peeking over the sides just a bit—in the code below it's set to make items <10% exposed have an aria-hidden label.
3. Removed the timeout, aria values are set on page load rather than 8 seconds after—this works for my use case, perhaps some sites insert the HTML that must be observed after DOMContentLoaded, ymmv.
4. This code adds the aria-hidden value back once a slide goes out of the viewport.

** 
 * Flickity accessibility patch. Adds aria-hidden to slides which are outside the horizontal viewport.
 * 
 * Adapted from https://gist.github.com/neodigm/bf64202df7ff854c910977eb1f2515a0
 */
class FlickPatch {  //  Flick Carousel ARIA-HIDDEN observer
    constructor(document, selector) {
        this.document = document; this.selector = selector;
        this.sliders = [];
    }
    init() {
        this.sliders = Array.from( this.document.querySelectorAll( this.selector ))
        if( this.sliders.length ){
            this.sliders.forEach((slider) => {
                const mutationObserver = new MutationObserver(() => {
                    if(flickPatch && typeof flickPatch.removeAttr === "function") {
                        flickPatch.removeAttr(slider);
                    }
                });
                mutationObserver.observe(slider, { attributes: true, childList: true, subtree: true });
                this.removeAttr(slider);
            })            
        }
        return this;
    }
    removeAttr(slider) {
        const threshold = 0.1;
        if(slider) {
            [...slider.querySelectorAll(".carousel__slide")].forEach((slide) => {
                var rect = slide.getBoundingClientRect();
                const overlap = rect.width * threshold;
                var viewWidth = Math.max(document.documentElement.clientWidth, window.innerWidth);
                if (!(rect.right < 0 + overlap || rect.left >= viewWidth - overlap)) {
                    if(slide.getAttribute("aria-hidden")) {
                        slide.removeAttribute("aria-hidden")
                    }
                } else {
                    if(!slide.getAttribute("aria-hidden")) {
                        slide.setAttribute("aria-hidden", "true")
                    }
                }
            })
        }
    }
}
//. Usage
let flickPatch = {}
document.addEventListener("DOMContentLoaded", (ev) => {
    flickPatch = new FlickPatch(document, ".flickity-slider")
    flickPatch.init()   
})

Good day! Why is the launch done via setTimeout? Can I refuse it?

Yes, the setTimeout was only the sample usage. Sorry for the late reply.

-s

This was helpful for me. I adapted the code a bit to suit my needs, and now have Flickity sliders that are passing accessibility audits.

Well done. Thanks!

I used the following approach:

1. Use data Attributes for URLs instead of tags
First, modify your HTML structure by removing the tags from the carousel cells and instead use data attributes to store the URL you want to navigate to. Here's an example of how a carousel cell could be modified:

<div class="carousel-cell" data-url="http://www.example.com">
<p>YOUR CELL CONTENT</>                   
</div>

2. Add JavaScript Event Listeners
Next, use JavaScript to add click event listeners to these carousel cells. When a cell is clicked, the browser will navigate to the URL specified in the data-url attribute. This script ensures that even cells marked with aria-hidden="true" are accessible, as the event listener is attached directly to the cell, and not to an tag that would be hidden from screen readers.

document.querySelectorAll('.carousel-cell').forEach(cell => {
  cell.addEventListener('click', function() {
    const url = this.getAttribute('data-url');
    if(url) {
      window.location.href = url;
    }
  });
});

or do it with jQuery

$('.carousel-cell').click(function() {
  const url = $(this).data('url');
  if(url) {
    window.location.href = url;
  }
});

Considerations:
Accessibility: This approach addresses the accessibility concern by removing aria-hidden="true" from interfering with the link functionality. However, ensure that these interactive cells are properly labeled with aria attributes to indicate their role and action to assistive technologies. For example, use aria-role="button" if the action is similar to a button click.

This might work for your use case, but I don't think it's a great general solution @TJPar.

For one, the divs won't be keyboard accessible. Even with the addition of the aria-role, someone hitting enter on a focused div won't trigger the event listener. Also, this won't support cmd+clicks to open in new tabs nor will it show the URL preview in the bottom left of the browser window on hover.

My understanding is that it is accurate for aria-hidden labels to be applied to carousel slides that are outside the viewport, and their non-interactivity to screenreaders is a feature, not a bug.

You're right. Ironically, by employing this technique to attain a 100 accessibility score in Lighthouse, it becomes less accessible. I had hoped for reduced scripting. Thanks for taking the time to review my approach and provide feedback; I'll incorporate neodigm's method with your modifications.