TimeZone: Do not show a tooltip that just repeats the visible text

[afercia]

Description

The TimeZone component uses a Tooltip to show an expansion of the UTC (Coordinated Universal Time) value.

There is a lot to say about using tooltips for descriptions, as the original goal of tooltips was to only show the accessible name of icon-only buttons. However, let's postpone this and just focus on the specific TimeZone implementation, for now.

It makes sense to expand the visible UTC when the additional information is actually an expansion. Screenshot:

However, it is not useful to show a tooltip when it just repeats the visible text. Screenshot:

The expansion text varies depending on the actual 'Timezone' setting in the admin, under Settings > General Settings > Timezone. When the value of the expansion is the same of the visible text, the component should not use Tooltip.

Worth also noting that now that the Tooltip component has been refactored using ariakit, it adds an aria-describedby to the element that uses the tooltip so that the element will have both the accessible name and the accessible description using the same text:

Testing with Safari + VoiceOver, it appears they are smart enough to avoid a double announcement but I'm pretty sure other screen readers will announce both the name and the description, which is redundant and confusing.

Step-by-step reproduction instructions

• Go to the WordPress admin, Settings > General Settings > Timezone.
• Set the Timezone value to a city value other than your city time zone e.g. Paris or New York.
• Save.
• Go to the post editor, edit a post or create a new one.
• Click the 'Publish' value in the settings panel.
• Observe the timezone value is an abbreviation, in my case is EST because I set it to New York.
• Hover with your mouse the timezone value, or move focus to it.
• Observe a Tooltip appears with the expanded value, in my case it's: (EST) America/New York.
• Go to the WordPress admin, Settings > General Settings > Timezone.
• Set the Timezone value to an UTC value other than your one e.g. UTC+3.
• Save.
• Repeat the steps above.
• Observe the visible text is UTC+3.
• Observe the tooltip text is UTC+3.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[afercia]

Worth also noting that when the setting is something like UTC+3:30, the value shown in the UI is incorrect and it's UTC+3.5. Screenshot:

Edit:
It appears that in WordPress core there is some code to manipulate an offset value like 3.5 and make it a offset name for displaying purposes like 3:30, see here:

https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/functions.php/#L6701-L6702

This part is missing in Gutenberg. it should be added because there is a clear need to have a correct offset name for displaying purposes. Not sure whether it's best to add this directly in the @wordpress/date or just fix it here for displaying purposes.

[afercia]

Also noting that longer displayed timezone values may break the layout of the AM/PM buttons. Screenshot: