[4.0] Custom element joomla-tab fails on ie11

[brianteeman]

Steps to reproduce the issue

Open any page using tabs eg article edit using internet explorer 11

Expected result

Page loads without error

Actual result

Page stops rendering when it hits the first occurrence of the custom element joomla-tab

The console reports
SCRIPT438: Object doesn't support property or method 'append'
joomla-tab-es5.min.js (1,5496)

[C-Lodder]

What happens if you replace both append()'s with appendChild()?

[brianteeman]

yes that fixes it

@C-Lodder @dgrammatiko can you do a pr to fix it

[dgrammatiko]

Sure, since we are here can I have an audit for the tabs component also from you, @brianteeman ?

[brianteeman]

you mean for a11y?
If so then I really would prefer it if you asked the a11y team

[dgrammatiko]

I have already the results of their audit I just wanted to see what you will come up also

[brianteeman]

I can tell you that it fails on a11y as there is no indicator that you are in a group of tabs or how many there are. It is keyboard accessible but not screenreader accessible

Here is an example of an accessible tab set
https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html

There may be other ways to achieve it. If you have nvda installed then you can easily compare this example with the joomla tab element~

[brianteeman]

ok found the problem, should be an easy fix that I will look at tonight
basically when you go to the second tab it announces
tab1title, tab2title tab 2 of 6

[brianteeman]

Not an easy fix at all. Spent some time with @fuzzbomb reviewing this verbosity last night. Not found a solution to it yet

[dgrammatiko]

@brianteeman let me know if you need some help here. I want to make another release of the custom elements before the next alpha release, so it would be great if we can tackle this issue as well

[brianteeman]

If you can fix the ie issue with appendchild I will keep looking into this verbosity issue