1

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.

My content right now

.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?

  • This might help: [Selecting and manipulating CSS pseudo-elements such as ::before and ::after](https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin) – freedomn-m Apr 22 '21 at 16:06

0 Answers0