将文本附加到 aria-label 名称

Question

I have two slick sliders on my site; one that displays News the other Events . I have an accessibility error because of duplicate aria label on the line with div.slick track ; I need to append text to first slick slider div.slick-track aria-label . I have tried to update the slick.min.js file and I keep breaking the file. So I'm' just trying to write some jQuery code (with no luck) to append text to the aria label in the first slider. I have looked through the suggested answered questions Stack Overflow recommended with no luck. Here is part of my HTML

    <div aria-label="news" class="slick slick-initialized slick-slider" 
role="toolbar">
    <button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" style="display: block;">Previous</button>                 
        <div aria-live="polite" class="slick-list draggable">
            <div class="slick-track" style="opacity: 1; width: 3487px; transform: translate3d(-2219px, 0px, 0px);" role="listbox" aria-label="slick-list">

This is what I have tried using

jQuery

$(".slick-track[aria-label='slick-list']").append("news");

//AND

   $(".slick-track[aria-label='slick-list']").find(function(){
        $(this).append("news");
    });

Any suggestions? Thanks in advance.

Answer 1

只需使用

document.getElementById('DIV_ID').setAttribute('aria-label', 'YOURTITLE');

Answer 2

try

   var last  =$(".slick-track").attr("aria-label");
   $(".slick-track").attr("aria-label",last+"new");

Answer 3

Append text to first slick slider div.slick-track aria-label :

 $(".slick-track[aria-label='slick-list']:first").append("news");

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div aria-label="news" class="slick slick-initialized slick-slider" role="toolbar"> <button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" style="display: block;">Previous</button> <div aria-live="polite" class="slick-list draggable"> <div class="slick-track" style="opacity: 1; width: 3487px; transform: translate3d(-2219px, 0px, 0px);" role="listbox" aria-label="slick-list"> </div> </div> </div>

Answer 4

So my original code did work. The issue was the slick.min.js file was loading after my jQuery code (file) in the DOM. Once I changed the order it worked.