-
-
Save neodigm/bf64202df7ff854c910977eb1f2515a0 to your computer and use it in GitHub Desktop.
| 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 ) | |
| }) |
@GLips I am having the same aria-hidden accessibility fail reported for our flip-cards powered by the Flickity carousel. Would you mind telling me how to use/install your patch on the page? Is it added as a stand alone script after fickity js is loaded? Or is it added somewhere within the Flickity javascript? Our example use page can be seen here: https://www.easternflorida.edu/financial-aid/index.php The four blue boxes in the 'Types of Financial Aid' section of this page is what uses the Flickity carousel. I am not great with Javascript. Any help would be greatly appreciated.
I was having some issues with this still triggering ADA compliance issues, ended up writing out a similar js assist script, not to hijack this thread at all but in case anyone is needing additional compliance assistance (tab index value toggling additionally) I threw mine up at https://github.com/luckyth13teen/Flickity_ada_assist .
Thanks for the initial jump off point Neodigm
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.