changing aria properties

[BradLee 5 Likes (Newbie)]

Is there a way to change an aria property (i.e. aria-hidden: false) using gsap. I tried to attribute plugin but that is only for numeric values.

[Jonathan 5,176 Likes (Superhero)]

Hello BradLee,

 

Do you have a codepen example so we can see how you are setting it in your code?

 

 

Thanks!

[Jonathan 5,176 Likes (Superhero)]

Here is a aria progressbar that has its aria-hidden attribute in the HTML default to true. And then i use the GSAP set() method to change the aria-hidden attribute to false.

 

See the Pen YqbEQd by jonathan (@jonathan) on CodePen

 

If you inspect in your browser you can see that the aria-hidden attribute has a value of false on the element with .progress, showing that GSAP is indeed setting the value of the aria-hidden attribute regardless of it being a number.

 // sets aria-hidden to false
TweenMax.set(".progress",{
    attr:{
      "aria-hidden": false
    }
});

As far as GSAP is concerned it just takes the value given and sets the attribute using the GSAP AttrPlugin.