[Tooltip] Implement fix for MouseOver event not firing when cursor enters after leaving a disabled element

[rexmac]

WHY are these changes introduced?

Fixes #1782.

MouseEnter events are not triggered when cursor enters from a disabled element.

WHAT is this pull request doing?

Uses MouseOver with a "mouseEntered" boolean flag rather than MouseEnter.

Before

After

Copy-paste this code in playground/Playground.tsx:

import * as React from 'react';
import {Page, Tooltip} from '../src';

interface State {}

export default class Playground extends React.Component<{}, State> {
  render() {
    return (
      <Page title="Playground">
        <button type="button" disabled>
          Previous
        </button>
        <Tooltip content="Next">
          <button type="button">Next</button>
        </Tooltip>
      </Page>
    );
  }
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines. You can also join #polaris on the Shopify Partners Slack.

[ry5n]

I asked @dpersing to take a look at this since it has accessibility implications. Keyboard and screen reader users already won’t be able to read the tooltip, so I’m not sure this change makes anything worse. I do wonder if this might open up tooltips to be used in more situations where maybe they shouldn’t be…

[dpersing]

Hi @rexmac! Could you include the Playground code you show in the gifs so we can manually text your example? There should be a section of the PR template for it:

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary>

```jsx
import * as React from 'react';
import {Page} from '@shopify/polaris';

interface State {}

export default class Playground extends React.Component<never, State> {
  render() {
    return (
      <Page title="Playground">
        {/* Add the code you want to test here */}
      </Page>
    );
  }
}
```

</details>

[rexmac]

@dpersing Added. 😃

[dpersing]

This looks fine to me @ry5n and @rexmac! Hover/focus tooltips are still weird for folks on mobile and there's a known issue with how tooltips are read by NVDA, but on desktop this appears to work just as I'd expect for the current implementation.

[ry5n]

@dpersing Thanks! Approved based on your input

[AndrewMusgrave]

Everything looks good 🎉 🎩

[AndrewMusgrave]

Do we need the extra simulate and expect?

[AndrewMusgrave]

Just saw the commit message was for codecov. Maybe we should break the assertion into its own test and expect mouseOver is called once?

[rexmac]

Ya, I was testing to see if it would satisfy codecov, which it did. It definitely feels hacky, but I'm not sure how else to satisfy codecov. I think ideally we'd assert that handleMouseEnter is only called once, but it's a private method.

Maybe we should break the assertion into its own test and expect mouseOver is called once?

I don't follow. Can you elaborate?

[AndrewMusgrave]

Ignore that, I was under the assumption we exposed a mouseEnter handler 😅 These changes may give you codecov

  private handleMouseEnter = () => {
    this.mouseEntered = true;
    this.setState({active: true});
  };

  private handleMouseEnterFix = () => {
    !this.mouseEntered && this.handleMouseEnter();
  };

[rexmac]

Nice! I'll give that a shot. 👍

[ghost]

🎉 Thanks for your contribution to Polaris React!