[RFR] Added a11y features

[KittyGiraudel]

This PR is a bit brutal and might need to bump major version as it can be considered as backward incompatible. Here are the changes:

• No more <button> inside <li>
• Added id, role, tabindex, aria-controls, aria-labelledby, aria-selected attributes
• All tabs are now rendered and hidden except the visible one
• No longer use index as key as it is an anti-pattern
• The tab item has been moved to its own component (Tab)
• The tab component has been removed Panel

[oyeanuj]

@HugoGiraudel, that was quick!

All tabs are now rendered and hidden except the visible one

Can there be an option to render the non-visible tabs on click rather than by default?

[KittyGiraudel]

I am not sure what you mean. Right now, only the selected tab is displayed, the others are hidden.

[eschaefer]

I think @oyeanuj means not pre-rendering the tabs that are not yet shown. For example if there is an image/component in tab 2, and tab 1 is loaded by default, then the network request for the image in tab 2 would be deferred until clicking that tab.

[eschaefer]

PR looks good :+1:

[KittyGiraudel]

I think @oyeanuj means not pre-rendering the tabs that are not yet shown. For example if there is an image/component in tab 2, and tab 1 is loaded by default, then the network request for the image in tab 2 would be deferred until clicking that tab.

It is. This is how browsers work already.

[eschaefer]

Naw dude! Set the default visibleIndex to 2 and look at your network requests in Chrome!

[oyeanuj]

Yes, I was referring to the case of pre-rendering tab content before the tab is clicked. It can be a problem if there are a lot of network fetching, rendering and loading to do in different tabs and they all get rendered at the same time.