Tooltip: Still visible after a modal triggered by same UI element is dismissed

[JimFeather]

Expected behavior When a button has a tooltip and launches a modal, the tooltip should not be visible when the modal is closed

Actual behavior When there is a button that has a tooltip that also has a click handler to launch a modal, after dismissing the modal the tooltip is still visible until either clicking elsewhere on the screen or until a new tooltip is shown

Steps to reproduce the issue

1. Have a button element that has a tooltip and also opens a modal on click
2. Hover mouse over button, observe the tooltip is shown
3. Click the button to open the modal
4. Close the modal
5. Observe that the tooltip is now shown, regardless of where the mouse is located

Screenshots or code

<template>
  <sandbox-pharos-button
    id="sandbox-info"
    data-tooltip-id="sandbox-info-tooltip"
    type="button"
    variant="primary"
    @click="showModalMethod"
    >Click Me!</sandbox-pharos-button
  >
  <sandbox-pharos-tooltip id="sandbox-info-tooltip">
    <span>This is a tooltip</span>
  </sandbox-pharos-tooltip>
  <sandbox-pharos-modal
    size="medium"
    header="sample modal"
    :open="this.shouldShowInfoModal"
    @pharos-modal-closed="this.closeModalMethod"
  >
    <div>
      <span>this is a modal</span>
    </div>
    <div slot="footer">
      <div class="cta">
        <sandbox-pharos-button
          variant="primary"
          data-modal-close
          @click="this.closeModalMethod"
        >
          OK
        </sandbox-pharos-button>
      </div>
    </div>
  </sandbox-pharos-modal>
</template>
<script>
import { defineAsyncComponent, ref } from 'vue';

export default {
  setup() {
    return { showModal: ref(false) };
  },
  computed: {
    shouldShowInfoModal() {
      return this.showModal;
    },
  },
  methods: {
    showModalMethod() {
      this.showModal = true;
    },
    closeModalMethod() {
      this.showModal = false;
    },
  },
};
</script>
<style lang="scss">
@use '@ithaka/pharos/lib/styles/pharos';
@import '@ithaka/pharos/lib/styles/variables.css';
</style>

Pharos version 14.5.1

Your environment

• OS: macOS
• Browser: Chrome and Firefox
• Version: Chrome: 131.0.6778.109 Firefox: 133.0

Additional information Add any additional notes or further context about the issue here, including any known workarounds.

[daneah]

@JimFeather Thanks for reporting! I think this behavior is due to the fact that, when the modal is closed, we must return focus to an element on the page for accessibility reasons. The most sensible item to return focus to is typically the element that triggered the modal to open, and so the button in this case receives focus and therefore re-opens the tooltip.

This isn't to say this is an optimal experience, but does mean it's kind of..."working as designed" at least. I think we may have had some past discussion about this scenario and what to do about it (@ymouzakis does this ring a bell?), so will need to revisit here a bit.