Improving screen reader support for tooltip

[khiga8]

Context

• In https://github.com/primer/view_components/pull/1256, we swapped hidden to visibility: hidden. The motivation is to workaround a surfaced incompatibility with the accessibility API and the web component API that prevents a hidden element from serving as an accessible name or description until the hidden is removed once. It is expected for hidden elements to label or describe another element. This seems to be a bug specific to custom elements usage.
• visibility:hidden helped us get around the issue and ensured labeling/description relations are established correctly for screen reader users. However, it introduced layout issues that is apparent when tooltips are on the far rights side of the page. This is due to fact that the tooltip will take up the full space. The tooltip isn't positioned where it needs to be until it is interacted with. We don't want to position tooltip on page load because doing so will cause performance issues if a page has hundreds of tooltips.

Suggestion

• use the sr-only class to hide or show the tooltip to sighted users
• always keep aria-hidden on the tooltip when it is a label type to reduce verbosity