TabNav cannot be properly assigned `roles`

[mattcosta7]

Describe the bug

When using a <TabNav />, no tablist and tab roles are assigned directly.

Due to the implementation, attempting to provide this manually creates invalid aria role semantics, since the rest props of TabNav are applied to the wrapper and not the 'nav' element, while the link roles are applied directly

current jsx => Markup

<TabNav role="tablist"><TabNav.Link role="tab /></TabNav>
=>
<div role="tablist"><nav><a role="tab /></nav></div>

expected

<TabNav role="tablist"><TabNav.Link role="tab /></TabNav>
=>
<div><nav role="tablist"><a role="tab /></nav></div>

or that these are applied by default?

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[mattcosta7]

keep

[owenniblock]

We probably want to shift the elements around a little here so it looks like this:

<TabNav role="tablist"><TabNav.Link role="tab /></TabNav>
=>
<nav><div role="tablist"><a role="tab /></div></nav>

Since nav does not permit changing role but we don't want to lose the ability to navigate to the nav element using a screen reader. There's a memex issue where we discuss this reordering if you want additional context.

I'm worried about applying this role by default since tab elements cannot contain interactive elements and we certainly use that pattern in memex.

There's an argument to be made that we should enforce this component to use tablist and tab and add restrictions to enforce only text within the tab element but that will require some discussion and we'd need to provide recommendations for an alternative component where users are trying to create functionality like the memex tabs.

[lesliecdubs]

👋🏻 @owenniblock hi! I see there's a new draft PR related to this issue. Are you actively working on this?

[owenniblock]

@lesliecdubs it's blocked waiting for a Primer React release: #2131

[lesliecdubs]

Got it, we'll work on getting that out this week. I'm assigning this issue to you in the meantime, but if that's incorrect please feel free to unassign. Thanks for moving this forward!

[mattcosta7]

@lesliecdubs I believe this one is done!