nico3333fr / van11y-accessible-tab-panel-aria Goto Github PK

Thank you for implementing data-selected with commit 0387ece
When I open the french demo page I notice the second tab without the second tab active
I was expecting that the second tab was openend by default.
https://van11y.net/downloads/tab-panel/demo/index-fr.html

I've used your wonderful script on a recent project and had to make sure the tabs were responsive. For smaller screens, I turn them into accordions. I was wondering if you were interested in incorporating this enchantment? I've never contributed to open source so please let me know if I'm doing anything incorrectly. I'm using velocity.js also but can easily be removed.

Here is my script: https://bitbucket.org/TCUWebmanage/tcuedu_first/src/master/library/js/tcu-van11y-accessible-tab-panel-aria.js

Here is an example: http://coreyreed.me/newtcu/

Here are my tabs:

<div class="js-tabs">
    <ul class="js-tablist" data-hx="h2">
        <li class="js-tablist__item">
            <a href="#tab_1" class="js-tablist__link">Tab 1</a>
        </li>
        <li class="js-tablist__item">
            <a href="#tab_2" class="js-tablist__link">Tab 2</a>
        </li>
    </ul>
    <div id="tab_1" class="js-tabcontent">
        This is tab 1
    </div>
    <div id="tab_2" class="js-tabcontent">
        This is tab 2
    </div>
</div>

<a href="#tab_2" class="js-link-to-tab">Link to tab 2</a>

When I click on the "Link to tab 2" tag at the bottom, I get the error Cannot read property 'querySelectorAll' of null at HTMLBodyElement.<anonymous> (van11y-accessible-tab-panel-aria.js:442)

Here's the line the error is pointing to in the console:

I noticed that clicking through tabs, the id hash is added to the URL, but clicking the back/forward browser button doesn't activate the correct tab when the URL changes.

This is more a feature request. Would it be possible to ad a destroy method.

Use case: destroy the tab panel on small screens where the pattern does not work to provide a better UX pattern.

Tabs are working great, and there is no jumping when browsing within tabs on the page, but if take a direct link with a tab hash in it, it jumps down the page to that tab ID and I'm hoping to prevent that. Any way to do this? thanks!

Hi, thank you for your effort in making web accessible and simple. However, achieving this goal is something that requires more resources. Would you mind to join our team, contribute to https://bunnyjs.com - which makes Vanilla JavaScript simple, great again and help million of users and developers around the world with their problems. You may start by joining our Gitter room.

Are there any other accessible components you would like to have out of the box? Do you have any ideas on how to make JavaScript app development simpler, faster, better and accessible for anyone?

Thanks again.

Best regards,
Mev

Hi there!

@loicblascos came up with a refactored version of your tabpanel script, aiming to be more readable and modern.

You can find it in a dedicated CodePen for now.

I'm not good enough to explain this in details, but I wanted to share this with you :)

I hope it'll help one day!

Is it possible to add a data-attribute or class to indicate the tab that should be open on page load?
The use case is that not always the first tab should be opened

For some projects it might be better not to have tabs on mobile devices.
Can you add a data-attribute to indicate the minimum screen size width where your tabs script should be triggered?

data-tabs-min-width = "768"

if ( $(window).width() > 768) {    
  // start tabs 
}

I have a global menu with links to tab panels on a particular page . After following one of these the other links (to tab panels) do not work and I cannot figure out why.