Tab clicking causes incorrect focus behaviour

Atlassian Ecosystem Design
#1

When clicking on a part of Tabs component: TabName or TabPanel - the focus is set to document.body, which is not correct.

In the internal implementation, the onMosueDown event is set to

// Prevent a focus ring if clicked
export const onMouseDownBlur = e => {
  const currentTarget = e.currentTarget;
  const focusedDuringMouseDown = currentTarget === document.activeElement;
  requestAnimationFrame(() => {
    if (focusedDuringMouseDown && currentTarget !== document.activeElement && document.body.contains(currentTarget)) {
      currentTarget.focus();
      return;
    }

    if (!focusedDuringMouseDown && document.body.contains(currentTarget)) {
      currentTarget.blur();
    }
  });
};

Which is causing this unexpected behaviour of focus being lost.

The correct way to prevent focus ring if clicked would be to set custom style for :focus-visible instead of of :focus.