Skip to content

Instantly share code, notes, and snippets.

@neodigm
Last active March 27, 2024 16:48
Show Gist options
  • Save neodigm/bf64202df7ff854c910977eb1f2515a0 to your computer and use it in GitHub Desktop.
Save neodigm/bf64202df7ff854c910977eb1f2515a0 to your computer and use it in GitHub Desktop.
Flick Carousel ARIA-HIDDEN observer
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 )
})
@TJPar
Copy link

TJPar commented Mar 27, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment