Tab is not working as expected in safari

[Corentin Marzin]

Hello I encounter an issue with safari when the tag is button.

I used the latest version of react-aria-tabpanel

This is a working example on safari example :

const tablink = (content, { isActive }) => (
  <span className={interactivityClasses({
    styles,
    isActive,
    isInactive: !isActive,
    baseClass: 'navLink' })}>
    {content}
  </span>
);

Tab element inside a Wrapper and Tablist

<Tab
                  id={`tabId${index}`}
                  title={tab.title}
                  name={`tabId${index}`}
                  type={'button'}
                  className={styles.navButton}
                  letterNavigationText={tab.locale}
                  tag={'div'}>
                  {tablink.bind(null, tab.locale.toUpperCase())}
                </Tab>

Version who doesn't work

<Tab
                  id={`tabId${index}`}
                  title={tab.title}
                  name={`tabId${index}`}
                  type={'button'}
                  className={styles.navButton}
                  letterNavigationText={tab.locale}
                  tag={'button'}>
                  {tablink.bind(null, tab.locale.toUpperCase())}
                </Tab>

If I add the tag BUTTON the click listener doesn't fire

[David Clark]

I'd suggest not making it a button. The Tab already has all the event handlers and ARIA attributes that it needs. A button probably confuses that in at least a couple of ways.

Open to a PR adding this qualification to the docs.