Hide overlay arrow to screen readers

[vlaraort]

Expected behavior

When I have a overlay component displayed with a visible arrow, the arrow should be hidden with a aria-hidden="true", property so it's not announced to the screen readers, as it does not gives any useful information to those users.

Actual Behavior

The arrow is announced as "image", without any label, which is incorrect

Additional context

A workaround is to use a extension of the desired component that makes use of the overlay, and wrap the arrow with the property, that way the arrow is not announced

export class FixArrowAriaTooltip extends LionTooltip {
  /**
   * Add an aria-hidden true property to the tooltip arrow, to hide
   * it to the screen readers
   * @override
   */
  /** @protected */
  _arrowNodeTemplate() {
    return html`<div aria-hidden="true">${super._arrowNodeTemplate()}</div>`;
  }
}

But IMO the best approach would be to add the hidden directly to the _arrowNodeTemplate. WDYT? Whould you accept a merge request?

[gerjanvangeest]

Hi @vlaraort,
Sounds good to me, can you make a PR with this fix?

[vlaraort]

@gerjanvangeest done! It's fine for you?