search

frend / frend.co

Frend — A collection of accessible, modern front-end components.
http://frend.co
MIT License
635 stars 25 forks source link

tabPanels outside of tabContainers? #101

Closed davidhund closed 7 years ago

davidhund commented 7 years ago

First: thanks for working on these modern, accessible components! 👍🏻

While implementing fr-tabs I noticed they do not work if tabPanels are not inside a tabContainer. Any specific reason that's required?

After quickly looking at the code it seems the only thing needed to allow tabPanels outside of tabContainers would be to change the querySelector for tabPanelSelector.

I can see moving tabPanels out of tabContainers could be problematic in the case of multiple tabs on the page. There we would have to have some (other) way of linking tabPanels to tabLists, obvs.

Thoughts?

adamduncan commented 7 years ago

Hey @davidhund. Thanks a lot for the feedback! 👍

You're definitely right. We technically have all we need in tabs/tabpanels and their ids. It's how we link them to each other, and they need to be unique (in order for aria-controls to work). So in theory, we could have multiple tab components on the page and do away with their containers.

We find the container helpful for two reasons: They allow us to easily target a single instance of tabs, and init/destroy as required. And, as you say, they help us to toggle sibling tabpanels off without inadvertently hiding other tab component's panels (say you had two consecutive tab components in a single container and targeted them using nextElementSibling).

What do you think? Keen to hear your thoughts.

davidhund commented 7 years ago

Hey @adamduncan — I agree: it seems convenient to keep the tabContainer.

This got me wondering though: what would be required to make multiple tab instances on one page? At the moment this seems to not be possible?

adamduncan commented 7 years ago

Cool, good to talk it through.

All the Frend components allow for multiple instances on a single page. Some elements require certain unique identifiers; mostly for making sure ARIA relationships are set properly.

Here's an example of multiple Tabs instances: http://codepen.io/adamduncan/pen/dNYgrr?editors=1010

Tabs and their respective panels have matching hrefs and ids set (this could also be done programatically using JS). Calling Frtabs() will loop over any tabsets on the page, setting up each instance when initialised.

Hope that helps!

adamduncan commented 7 years ago

Going to close this one up for now, @davidhund. Thanks for the input, hope all's clearer.