I have a carrocel lib that I can't change at my work. Now we're currently adding accessibility and the previous / next buttons of each item, are manipuled with css.
.slide-input-1:checked ~ .slide-arrows .arrow-2 {
display: block;
right: 0;
transform: rotate(180deg) translateY(20%) scale(2);
}
With that in mind, I don't have a generic name to use within, so I need some javascript that I can observe and change the aria-label like this is what I have in mind:
myPreviousElement.ariaLabel = "Previous"
myElement.ariaLabel = "Next"
The html structure:
<div class="slide-arrows">
<label class="slide-arrow arrow-1" for="mpn-1" id="bbq"><b class="ico-chevron-left">1</b></label>
<label class="slide-arrow arrow-2" for="mpn-2"><b class="ico-chevron-left">2</b></label>
<label class="slide-arrow arrow-3" for="mpn-3"><b class="ico-chevron-left">3</b></label>
<label class="slide-arrow arrow-4" for="mpn-4"><b class="ico-chevron-left">4</b></label>
<label class="slide-arrow arrow-5" for="mpn-5"><b class="ico-chevron-left">5</b></label>
<label class="slide-arrow arrow-6" for="mpn-6"><b class="ico-chevron-left">6</b></label>
<label class="slide-arrow arrow-7" for="mpn-7"><b class="ico-chevron-left">7</b></label>
</div>
Every five seconds one of the inner bold tag content will have the css pseudo element ::before. I tried to use MutationObserver to watch the inner change but it don't fire.
window.addEventListener('load', function () {
var element = document.getElementById('bbq');
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var observer = new MutationObserver(myFunction);
observer.observe(element, {
childList: true
});
function myFunction() {
alert('here')
console.log(element);
console.log(element.innerHTML);
}
});
How can I observe and change the aria-label property? There's a way or what I'm trying to do can't be acomplished with JS / Jquery?