Update the aria-labelledby value when switching tab

[ingvilddev]

I think the current implementation just sets thearia-labelledby field when children are updated, I could not see it being updated when choosing another tab? I might be mistaken, just wanted to easily show what i meant to more efficiently start a discussion, this is what I observed with and without this change on tv.nrk.no (using the series stjernekamp as an example):

Update: Found out that this only happens when you have one element intended to work as a tabpanel, meaning content gets re-rendered when a new tab is selected (which is what we do on tv.nrk.no, typically react?). In the already existing examples, a tablist element exists for each tab in the dom, they are just hidden when the tab is not selected. Built a new example to showcase this, take a look and tell me what you think. I might be mistaken, would love for some input on how to solve it otherwise if you think this is not the correct solution/we use it wrongly.

Before

The aria-labelledby is always just the last tab (as this naturally is the last tab when looping through all tabs in updatingChildren, and each time the panel aria-labelledby is set to an id, see deleted code).

E.g. when season 5 is selected, the aria-labelledby still directs to the tenth tab, meaning users dependent on the accessibility attributes will get read "Sesong 10" when in fact the episode list shows episodes for season 5?

This is how the dom looks with my example before: (see the bottom aria-labelledby never changes value when switching tabs)

https://user-images.githubusercontent.com/72200992/139080574-ffd6dceb-0e49-407c-b9e8-83f88fb5d9cb.mp4

After

The aria-labelledby attribute matches the id of the selected tab, and is updated when choosing an other tab:

My example with the changes in this PR: (see the bottom aria-labelledby changes value to the correct tab id when switching tabs)

https://user-images.githubusercontent.com/72200992/139080673-76413186-efc6-43c4-bdb7-d2968c46a9e2.mp4

[ingvilddev]

Related to issue https://github.com/nrkno/PS.Web/issues/8709

[skjalgepalg]

Here's an attempt to summarise the changes done in this PR:

Enhancement

• The tab getter function has been altered:
  • tab is no longer found relative to panel
  • Now looks for either of:
  • First entry in tabs with aria-selected
  • Index or id matching tab-attribute
  • First tab with a visible panel
  • First tab, if none of the above found anything
• (React) tab-property is now treated as an attribute
• Attribute tab is supported in plain JS
• Added support for fewer panels than tabs
• Added support for no panels

Fixes

• Get panel is now relative to current tab to be more reliable than filtering panels
• No longer dispatches a tabs.toggle-event on initialization
• Panels referenced by multiple tabs (through data-for) has correct aria-labelledBy to active (referencing) tab

Tests

• Expanded test-cases to cover
  • Handling few or missing panels
  • Correctly setting aria-labelledBy
  • tabs.toggle-event
  • The tab-attribute

Docs

• Add FAQ-entry on use of hidden-attribute to avoid FOUC
• Attributes section added under Usage
• Added example for few panels in plain JS
• Added example for single panels in plain JS
• Added example for active tab by index in React
• Added example for single panel in React