Jump to content
GreenSock

BradLee

changing aria properties

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

Hello BradLee,

 

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

 

 

Thanks!

  • Like 2
Link to comment
Share on other sites

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.

 

:)

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×