From 5701bef6e94155550de88a45f4b24db3f6cde27b Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 1 Dec 2023 10:29:37 -0500
Subject: [PATCH] backport 1749

---
 cspell.json                                  |   1 +
 docs/pages/components/popup.md               | 125 +++++++++++++++++++
 docs/pages/resources/changelog.md            |   6 +
 src/components/menu-item/menu-item.styles.ts |  14 +--
 src/components/popup/popup.component.ts      |  95 ++++++++++++++
 src/components/popup/popup.styles.ts         |  20 +++
 src/components/tooltip/tooltip.component.ts  |  16 ++-
 src/components/tooltip/tooltip.styles.ts     |   2 -
 src/components/tooltip/tooltip.test.ts       |   9 +-
 9 files changed, 265 insertions(+), 23 deletions(-)

diff --git a/cspell.json b/cspell.json
index 2fe43af29..6332d3e86 100644
--- a/cspell.json
+++ b/cspell.json
@@ -103,6 +103,7 @@
     "monospace",
     "mousedown",
     "mousemove",
+    "mouseout",
     "mouseup",
     "multiselectable",
     "nextjs",
diff --git a/docs/pages/components/popup.md b/docs/pages/components/popup.md
index 1dcd55315..55ce7a54f 100644
--- a/docs/pages/components/popup.md
+++ b/docs/pages/components/popup.md
@@ -1530,6 +1530,131 @@ const App = () => {
 };
 ```
 
+### Hover Bridge
+
+When a gap exists between the anchor and the popup element, this option will add a "hover bridge" that fills the gap using an invisible element. This makes listening for events such as `mouseover` and `mouseout` more sane because the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is active. For demonstration purposes, the bridge in this example is shown in orange.
+
+```html:preview
+<div class="popup-hover-bridge">
+  <wa-popup placement="top" hover-bridge distance="10" skidding="0" active>
+    <span slot="anchor"></span>
+    <div class="box"></div>
+  </wa-popup>
+  <br>
+  <wa-switch checked>Hover Bridge</wa-switch><br>
+  <wa-range min="0" max="50" step="1" value="10" label="Distance"></wa-range>
+  <wa-range min="-50" max="50" step="1" value="0" label="Skidding"></wa-range>
+</div>
+<style>
+  .popup-hover-bridge span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--wa-color-neutral-spot);
+    margin: 50px;
+  }
+
+  .popup-hover-bridge .box {
+    width: 100px;
+    height: 50px;
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
+  }
+
+  .popup-hover-bridge wa-range {
+    max-width: 260px;
+    margin-top: .5rem;
+  }
+
+  .popup-hover-bridge wa-popup::part(hover-bridge) {
+    background: tomato;
+    opacity: .5;
+  }
+</style>
+<script>
+  const container = document.querySelector('.popup-hover-bridge');
+  const popup = container.querySelector('wa-popup');
+  const hoverBridge = container.querySelector('wa-switch');
+  const distance = container.querySelector('wa-range[label="Distance"]');
+  const skidding = container.querySelector('wa-range[label="Skidding"]');
+  distance.addEventListener('wa-input', () => (popup.distance = distance.value));
+  skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
+  hoverBridge.addEventListener('wa-change', () => (popup.hoverBridge = hoverBridge.checked));
+</script>
+```
+
+```jsx:react
+import { useState } from 'react';
+import WaPopup from '@shoelace-style/shoelace/dist/react/popup';
+import WaRange from '@shoelace-style/shoelace/dist/react/range';
+import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
+const css = `
+  .popup-hover-bridge span[slot='anchor'] {
+    display: inline-block;
+    width: 150px;
+    height: 150px;
+    border: dashed 2px var(--wa-color-neutral-spot);
+    margin: 50px;
+  }
+
+  .popup-hover-bridge .box {
+    width: 100px;
+    height: 50px;
+    background: var(--wa-color-brand-spot);
+    border-radius: var(--wa-corners-s);
+  }
+
+  .popup-hover-bridge wa-range {
+    max-width: 260px;
+    margin-top: .5rem;
+  }
+
+  .popup-hover-bridge wa-popup::part(hover-bridge) {
+    background: tomato;
+    opacity: .5;
+  }
+`;
+const App = () => {
+  const [hoverBridge, setHoverBridge] = useState(true);
+  const [distance, setDistance] = useState(10);
+  const [skidding, setSkidding] = useState(0);
+  return (
+    <>
+      <div class="popup-hover-bridge">
+        <WaPopup placement="top" hover-bridge={hoverBridge} distance={distance} skidding={skidding} active>
+          <span slot="anchor" />
+          <div class="box" />
+        </WaPopup>
+        <br />
+        <WaSwitch
+          checked={hoverBridge}
+          onWaChange={event => setHoverBridge(event.target.checked)}
+         >
+          Hover Bridge
+        </WaSwitch><br />
+        <WaRange
+          min="0"
+          max="50"
+          step="1"
+          value={distance}
+          label="Distance"
+          onWaInput={event => setDistance(event.target.value)}
+        />
+        <WaRange
+          min="-50"
+          max="50"
+          step="1"
+          value={skidding}
+          label="Skidding"
+          onWaInput={event => setSkidding(event.target.value)}
+        />
+      </div>
+      <style>{css}</style>
+    </>
+  );
+};
+```
+
 ### Virtual Elements
 
 In most cases, popups are anchored to an actual element. Sometimes, it can be useful to anchor them to a non-element. To do this, you can pass a `VirtualElement` to the anchor property. A virtual element must contain a function called `getBoundingClientRect()` that returns a [`DOMRect`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect) object as shown below.
diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index 929c55a20..37c63a4b6 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -20,6 +20,12 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
 - Removed `default` from `<wa-button>` and made `neutral` the new default
 - Removed the `circle` modifier from `<wa-button>` because button's no longer have a set height
 
+## Next
+
+- Added the `hover-bridge` feature to `<sl-popup>` to support better tooltip accessibility [#1734]
+- Fixed a bug in `<sl-input>` and `<sl-textarea>` that made it work differently from `<input>` and `<textarea>` when using defaults [#1746]
+- Improved the accessibility of `<sl-tooltip>` so they persist when hovering over the tooltip and dismiss when pressing [[Esc]] [#1734]
+
 ## 2.12.0
 
 - Added the Italian translation [#1727]
diff --git a/src/components/menu-item/menu-item.styles.ts b/src/components/menu-item/menu-item.styles.ts
index 8446c3ebc..3479f5502 100644
--- a/src/components/menu-item/menu-item.styles.ts
+++ b/src/components/menu-item/menu-item.styles.ts
@@ -7,14 +7,6 @@ export default css`
   :host {
     --submenu-offset: -2px;
 
-    /* Private */
-    --safe-triangle-cursor-x: 0;
-    --safe-triangle-cursor-y: 0;
-    --safe-triangle-submenu-start-x: 0;
-    --safe-triangle-submenu-start-y: 0;
-    --safe-triangle-submenu-end-x: 0;
-    --safe-triangle-submenu-end-y: 0;
-
     display: block;
   }
 
@@ -79,9 +71,9 @@ export default css`
     bottom: 0;
     left: 0;
     clip-path: polygon(
-      var(--safe-triangle-cursor-x) var(--safe-triangle-cursor-y),
-      var(--safe-triangle-submenu-start-x) var(--safe-triangle-submenu-start-y),
-      var(--safe-triangle-submenu-end-x) var(--safe-triangle-submenu-end-y)
+      var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
+      var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),
+      var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)
     );
   }
 
diff --git a/src/components/popup/popup.component.ts b/src/components/popup/popup.component.ts
index a48b5ec40..eefcca403 100644
--- a/src/components/popup/popup.component.ts
+++ b/src/components/popup/popup.component.ts
@@ -32,6 +32,7 @@ function isVirtualElement(e: unknown): e is VirtualElement {
  *  assigned dynamically as the popup moves. This is most useful for applying a background color to match the popup, and
  *  maybe a border or box shadow.
  * @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.
+ * @csspart hover-bridge - The hover bridge element. Only available when the `hover-bridge` option is enabled.
  *
  * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`
  *  attribute is used.
@@ -189,6 +190,14 @@ export default class WaPopup extends WebAwesomeElement {
   /** The amount of padding, in pixels, to exceed before the auto-size behavior will occur. */
   @property({ attribute: 'auto-size-padding', type: Number }) autoSizePadding = 0;
 
+  /**
+   * When a gap exists between the anchor and the popup element, this option will add a "hover bridge" that fills the
+   * gap using an invisible element. This makes listening for events such as `mouseenter` and `mouseleave` more sane
+   * because the pointer never technically leaves the element. The hover bridge will only be drawn when the popover is
+   * active.
+   */
+  @property({ attribute: 'hover-bridge', type: Boolean }) hoverBridge = false;
+
   async connectedCallback() {
     super.connectedCallback();
 
@@ -447,13 +456,99 @@ export default class WaPopup extends WebAwesomeElement {
       }
     });
 
+    // Wait until the new position is drawn before updating the hover bridge, otherwise it can get out of sync
+    requestAnimationFrame(() => this.updateHoverBridge());
+
     this.emit('wa-reposition');
   }
 
+  private updateHoverBridge = () => {
+    if (this.hoverBridge && this.anchorEl) {
+      const anchorRect = this.anchorEl.getBoundingClientRect();
+      const popupRect = this.popup.getBoundingClientRect();
+      const isVertical = this.placement.includes('top') || this.placement.includes('bottom');
+      let topLeftX = 0;
+      let topLeftY = 0;
+      let topRightX = 0;
+      let topRightY = 0;
+      let bottomLeftX = 0;
+      let bottomLeftY = 0;
+      let bottomRightX = 0;
+      let bottomRightY = 0;
+
+      if (isVertical) {
+        if (anchorRect.top < popupRect.top) {
+          // Anchor is above
+          topLeftX = anchorRect.left;
+          topLeftY = anchorRect.bottom;
+          topRightX = anchorRect.right;
+          topRightY = anchorRect.bottom;
+
+          bottomLeftX = popupRect.left;
+          bottomLeftY = popupRect.top;
+          bottomRightX = popupRect.right;
+          bottomRightY = popupRect.top;
+        } else {
+          // Anchor is below
+          topLeftX = popupRect.left;
+          topLeftY = popupRect.bottom;
+          topRightX = popupRect.right;
+          topRightY = popupRect.bottom;
+
+          bottomLeftX = anchorRect.left;
+          bottomLeftY = anchorRect.top;
+          bottomRightX = anchorRect.right;
+          bottomRightY = anchorRect.top;
+        }
+      } else {
+        if (anchorRect.left < popupRect.left) {
+          // Anchor is on the left
+          topLeftX = anchorRect.right;
+          topLeftY = anchorRect.top;
+          topRightX = popupRect.left;
+          topRightY = popupRect.top;
+
+          bottomLeftX = anchorRect.right;
+          bottomLeftY = anchorRect.bottom;
+          bottomRightX = popupRect.left;
+          bottomRightY = popupRect.bottom;
+        } else {
+          // Anchor is on the right
+          topLeftX = popupRect.right;
+          topLeftY = popupRect.top;
+          topRightX = anchorRect.left;
+          topRightY = anchorRect.top;
+
+          bottomLeftX = popupRect.right;
+          bottomLeftY = popupRect.bottom;
+          bottomRightX = anchorRect.left;
+          bottomRightY = anchorRect.bottom;
+        }
+      }
+
+      this.style.setProperty('--hover-bridge-top-left-x', `${topLeftX}px`);
+      this.style.setProperty('--hover-bridge-top-left-y', `${topLeftY}px`);
+      this.style.setProperty('--hover-bridge-top-right-x', `${topRightX}px`);
+      this.style.setProperty('--hover-bridge-top-right-y', `${topRightY}px`);
+      this.style.setProperty('--hover-bridge-bottom-left-x', `${bottomLeftX}px`);
+      this.style.setProperty('--hover-bridge-bottom-left-y', `${bottomLeftY}px`);
+      this.style.setProperty('--hover-bridge-bottom-right-x', `${bottomRightX}px`);
+      this.style.setProperty('--hover-bridge-bottom-right-y', `${bottomRightY}px`);
+    }
+  };
+
   render() {
     return html`
       <slot name="anchor" @slotchange=${this.handleAnchorChange}></slot>
 
+      <span
+        part="hover-bridge"
+        class=${classMap({
+          'popup-hover-bridge': true,
+          'popup-hover-bridge--visible': this.hoverBridge && this.active
+        })}
+      ></span>
+
       <div
         part="popup"
         class=${classMap({
diff --git a/src/components/popup/popup.styles.ts b/src/components/popup/popup.styles.ts
index 950d8ac7c..71d745322 100644
--- a/src/components/popup/popup.styles.ts
+++ b/src/components/popup/popup.styles.ts
@@ -41,4 +41,24 @@ export default css`
     background: var(--arrow-color);
     z-index: -1;
   }
+
+  /* Hover bridge */
+  .popup-hover-bridge:not(.popup-hover-bridge--visible) {
+    display: none;
+  }
+
+  .popup-hover-bridge {
+    position: fixed;
+    z-index: calc(var(--sl-z-index-dropdown) - 1);
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    clip-path: polygon(
+      var(--hover-bridge-top-left-x, 0) var(--hover-bridge-top-left-y, 0),
+      var(--hover-bridge-top-right-x, 0) var(--hover-bridge-top-right-y, 0),
+      var(--hover-bridge-bottom-right-x, 0) var(--hover-bridge-bottom-right-y, 0),
+      var(--hover-bridge-bottom-left-x, 0) var(--hover-bridge-bottom-left-y, 0)
+    );
+  }
 `;
diff --git a/src/components/tooltip/tooltip.component.ts b/src/components/tooltip/tooltip.component.ts
index ac96d8ce4..8514f894d 100644
--- a/src/components/tooltip/tooltip.component.ts
+++ b/src/components/tooltip/tooltip.component.ts
@@ -102,13 +102,13 @@ export default class WaTooltip extends WebAwesomeElement {
     this.addEventListener('blur', this.handleBlur, true);
     this.addEventListener('focus', this.handleFocus, true);
     this.addEventListener('click', this.handleClick);
-    this.addEventListener('keydown', this.handleKeyDown);
     this.addEventListener('mouseover', this.handleMouseOver);
     this.addEventListener('mouseout', this.handleMouseOut);
   }
 
-  connectedCallback() {
-    super.connectedCallback();
+  disconnectedCallback() {
+    // Cleanup this event in case the tooltip is removed while open
+    document.removeEventListener('keydown', this.handleDocumentKeyDown);
   }
 
   firstUpdated() {
@@ -143,9 +143,9 @@ export default class WaTooltip extends WebAwesomeElement {
     }
   };
 
-  private handleKeyDown = (event: KeyboardEvent) => {
-    // Pressing escape when the target element has focus should dismiss the tooltip
-    if (this.open && !this.disabled && event.key === 'Escape') {
+  private handleDocumentKeyDown = (event: KeyboardEvent) => {
+    // Pressing escape when a tooltip is open should dismiss it
+    if (event.key === 'Escape') {
       event.stopPropagation();
       this.hide();
     }
@@ -181,17 +181,20 @@ export default class WaTooltip extends WebAwesomeElement {
 
       // Show
       this.emit('wa-show');
+      document.addEventListener('keydown', this.handleDocumentKeyDown);
 
       await stopAnimations(this.body);
       this.body.hidden = false;
       this.popup.active = true;
       const { keyframes, options } = getAnimation(this, 'tooltip.show', { dir: this.localize.dir() });
       await animateTo(this.popup.popup, keyframes, options);
+      this.popup.reposition();
 
       this.emit('wa-after-show');
     } else {
       // Hide
       this.emit('wa-hide');
+      document.removeEventListener('keydown', this.handleDocumentKeyDown);
 
       await stopAnimations(this.body);
       const { keyframes, options } = getAnimation(this, 'tooltip.hide', { dir: this.localize.dir() });
@@ -263,6 +266,7 @@ export default class WaTooltip extends WebAwesomeElement {
         flip
         shift
         arrow
+        hover-bridge
       >
         ${'' /* eslint-disable-next-line lit-a11y/no-aria-slot */}
         <slot slot="anchor" aria-describedby="tooltip"></slot>
diff --git a/src/components/tooltip/tooltip.styles.ts b/src/components/tooltip/tooltip.styles.ts
index a6e238c08..33773f184 100644
--- a/src/components/tooltip/tooltip.styles.ts
+++ b/src/components/tooltip/tooltip.styles.ts
@@ -18,7 +18,6 @@ export default css`
   }
 
   .tooltip::part(popup) {
-    pointer-events: none;
     z-index: var(--wa-z-index-tooltip);
   }
 
@@ -48,7 +47,6 @@ export default css`
     line-height: var(--wa-line-height-regular);
     color: var(--wa-color-neutral-text-on-spot);
     padding: var(--wa-space-2xs) var(--wa-space-xs);
-    pointer-events: none;
     user-select: none;
     -webkit-user-select: none;
   }
diff --git a/src/components/tooltip/tooltip.test.ts b/src/components/tooltip/tooltip.test.ts
index 7fdc2eca0..b8629e1c8 100644
--- a/src/components/tooltip/tooltip.test.ts
+++ b/src/components/tooltip/tooltip.test.ts
@@ -1,7 +1,6 @@
 import '../../../dist/webawesome.js';
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
-import type WaPopup from '../popup/popup';
 import type WaTooltip from './tooltip';
 
 describe('<wa-tooltip>', () => {
@@ -149,14 +148,16 @@ describe('<wa-tooltip>', () => {
     expect(body.hidden).to.be.false;
   });
 
-  it('should not accept pointer events on the tooltip', async () => {
+  it('should not accept user selection on the tooltip', async () => {
     const el = await fixture<WaTooltip>(html`
       <wa-tooltip content="This is a tooltip" open>
         <wa-button>Hover Me</wa-button>
       </wa-tooltip>
     `);
-    const popup = el.shadowRoot!.querySelector<WaPopup>('wa-popup')!;
 
-    expect(getComputedStyle(popup.popup).pointerEvents).to.equal('none');
+    const tooltipBody = el.shadowRoot!.querySelector('.tooltip__body')!;
+    const userSelect = getComputedStyle(tooltipBody).userSelect || getComputedStyle(tooltipBody).webkitUserSelect;
+
+    expect(userSelect).to.equal('none');
   });
 });