Hide tooltips from screen readers with aria-hidden

[brichwin]

Description of the Changes

Issue: See Improve Screen Reader Users' Navigation Experience by Hiding Control Tooltips from Screen Readers #973

When using VoiceOver on controls using a playkit-js-ui tooltip, navigating through controls using VO-Left Arrow and VO-Right Arrow results in the VoiceOver cursor stopping on both the control button and also on the associated tooltip. This creates two issues:

1. Inefficient Navigation: Users must press navigation keys twice as many times to move through the controls since they need to navigate past both the button and its tooltip.

2. Potential User Confusion: When navigating quickly, users may be unsure whether they're focused on the actual control button or its tooltip, potentially leading to a confusing experience.

Here is a video demonstrating the issue: Video: Improve VoiceOver Navigation Experience by Hiding Control Tooltips from Screen Readers (2:34)

Fix: Add aria-hidden="true" to the tooltip component in src/components/tooltip/tooltip.tsx. This change:

• Hides tooltip text from screen readers while maintaining visual tooltip functionality
• Results in VoiceOver cursor only stopping on the actual control buttons
• Creates a more streamlined navigation experience

return (
      <div
        className={style.tooltip}
        onMouseOver={this.onMouseOver}
        onMouseLeave={this.onMouseLeave}
        ref={el => (el ? (this.tooltipElement = el) : undefined)}>
        {children}
        <span aria-hidden="true" style={{maxWidth: props.maxWidth}} ref={el => (el ? (this.textElement = el) : undefined)} className={className.join(' ')}>
          {props.label}
        </span>
      </div>
    );

Sample video player with this fix applied: demo-with-aria-hidden-on-tooltip