Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Add ARIA role-expanded issue

    So the issue is with the aria-expanded where it should say true when expanded and false afterwards.but when it is expanded it will say “true” and then after its being closed it would still be “true”. suppose to be false help

    what should i do?

  • #2
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    any issues with this?

    // ARIA
    self.element.attr( "role", "tablist" );

    self.headers
    .attr( "role", "tab" )
    .bind( "keydown.accordion", function( event ) {
    return self._keydown( event );
    })
    .next()
    .attr( "role", "tabpanel" );

    self.headers
    .not( self.active || "" )
    .attr({
    "aria-expanded": "false",
    "aria-selected": "false",
    tabIndex: -1
    })
    .next()
    .hide();

    // make sure at least one header is in the tab order
    if ( !self.active.length ) {
    self.headers.eq( 0 ).attr( "tabIndex", 0 );
    } else {
    self.active
    .attr({
    "aria-expanded": "true",
    "aria-selected": "true",
    tabIndex: 0
    });
    }

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,301
    Thanks
    10
    Thanked 586 Times in 567 Posts
    you need to be calling that more than once, as in every expand/collapse.

    if you move it to callbacks, like keydown, it should fire automatically.

    personally, i would put the update code in a function and name it something like updateAria(). you can then easily call updateAria() from anywhere, after something changes, to apply the correct attributes to the new situation.


    you might find it easier to make your own "plugin" that does everything you need in one call, replacing the usual show/hide methods.
    for example,


    Code:
    $.fn.hideAria=function(period){
     $(this).each(function(i,elm){
        $(elm)
          .hide(period)
          .attr("aria-hidden", true)
          .attr("aria-expanded", false) ;
     });
    };
    
    
    $.fn.showAria=function(period){
     $(this).each(function(i,elm){
        $(elm)
          .show(period)
          .attr("aria-hidden", false)
          .attr("aria-expanded", true) ;
     });
    };
    now, you can just call .hideAria() instead of hide() and it does the same thing, but also the aria stuff you need, all in one pretty little package that can be used all over your site.

    you will have to customize the actual aria code to hit the right child/parent/etc, but this "plugin" approach itself is a real timesaver long-term.
    Last edited by rnd me; 10-24-2013 at 06:46 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •