iPad Safari: Have to press `<Tab>` twice to switch when it has validations displayed

[clheppell]

Current behaviour

On iPad Safari, if you have Tabs, you can normally switch to them by pressing once.

If a validation is present on a tab, you have to press the tab twice to switch to it - the first time you press it the validation tooltip appears, then you have to press again to switch to that tab.

In other browsers, including Chrome on Android tablets, you can just click once.

The problem is only with touch - if you use a mouse on an iPad, it switches tab the first time you click.

Expected behaviour

Press once to switch to the other tab.

CodeSandbox or Storybook URL

https://codesandbox.io/s/zen-fast-mrd52h

JIRA Ticket (Sage Only)

No response

Suggested Solution

No response

Carbon Version

118.2.1

Design Tokens Version

No response

What browsers are you seeing the problem on?

Safari

What Operating System are you seeing the problem on?

iOS

Anything else we should know?

Only able to reproduce this on a physical device - I can't reproduce it if I put desktop Safari into responsive design mode.

Confidentiality

• [X] I confirm there is no confidential or commercially sensitive information included.

[Parsium]

Hi @clheppell 👋🏼 I managed to replicate this issue, but it so happens that some updates we need to make to Tab will address this bug.

Currently, our implementation of Tab uses the old tooltip-based validation pattern which the official Design System does not. Therefore, when we update the component to address this discrepancy, we will no longer be using tooltips for validation messages, effectively addressing this issue.

In the meantime, for visibility, I will tag the ticket to add support for the new validation pattern to Tab here:

FE-6067