Accessibility issues with screen reader

[froston]

I'm having issues with the react-tooltip accessibility with screen readers. The library renders the tooltip structure in this way:

That causes the screen reader to read all the style tag content before getting to the tooltip's text, which is not desired.
I guess the style tag should either be moved outside the tooltip's markup or contain aria-hidden="true" attribute in order to be skipped by screen readers.
Is there some other solution to this issue? Thank you.

[dearamerican]

hey @froston , thanks for starting this thread. I'm wondering if you can share the accessible code for your button + tooltip?

I'm trying to get the tooltip to be announced by a screen reader only after the trigger button has been activated. Even with aria-hidden=true set on the ReactTooltip component, the screen reader still reads out the tooltip content upon focusing the trigger button.

Thanks so much in advance for any ideas!

[dearamerican]

Ah, actually I've got it sorted--thanks anyway! For folks coming to this thread trying to make accessible tooltips, here's what worked for me:

      <ReactTooltip
          id={id}
           // ... (other props) ...
          event="click"
          role="status"
        />
        <button
          data-tip
          aria-controls={id}
        >
          {children}
        </button>

Use event="click" on ReactTooltip (so activate on click, not on hover), because otherwise keyboard users cannot trigger the tooltip when it is focused.

Adding role="status" gets the info announced by screen readers on trigger.

[daceynolan]

@dearamerican I tried this solution, but it will keep repeating the tooltip message. Did you have this same problem?