improve aria accessibility of TAB components - #1081

formatting changes removed @robsontenorio

@twinklebob

What tool do you use to check this information about ARIA? Can you provide an screenshot where it indicates that it is not compliant?

@robsontenorio the chrome Lighthouse tool highlights the issue with tabs:

There is also an issue with the tablist not being keyboard navigable, but I've at least managed to make it part of the taborder of the page. I'm not a screenreader user, so I don't know how much the keyboard navigation issue will be a problem. More detail regarding the aria tab role can be seen here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tab_role

I am not an expert in ARIA, and most of the components in maryUI follow daisyUI. Therefore, I am unsure if we can achieve 100% compliance and how "expensive" the implementation might be.

In some scenarios daisyUI requires we use a "label" not "div" and so on...
This is required because the way they use CSS on components.

There is a lot of requests on daisy repository asking for aria support.
So, this can be problematic.

For sure, daisyUI is a mess here. Their excessive use of fieldsets and labels is just the beginning of it, no doubt. I'm not an expert here either, I'm just trying to get ahead of a WGAC review I'm anticipating on a client's site. I've tried not to do anything that would change any behaviour or UI, just fix obvious aria issues. For instance I'd imagine making the tabs keyboard navigable is too much and is likely to break things for many consumers of the library, but adding the correct aria markup where required should at least improve the situation for screen-reader users. This PR is probably the least problematic of them all.