8443 fix esc closing modal when closing tooltip (#8600)

Author: deleonio

packages/components/src/components/drawer/shadow.tsx

@@ -1,11 +1,12 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-import type { AlignPropType, DrawerAPI, DrawerStates, HasCloserPropType, KoliBriModalEventCallbacks, LabelPropType, OpenPropType } from '../../schema';
-import { setState, validateAlign, validateHasCloser, validateLabel, validateOpen } from '../../schema';
 import type { JSX } from '@stencil/core';
 import { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';
-import { dispatchDomEvent, KolEvent } from '../../utils/events';
 import clsx from 'clsx';
 import { KolCardWcTag } from '../../core/component-names';
+import type { AlignPropType, DrawerAPI, DrawerStates, HasCloserPropType, KoliBriModalEventCallbacks, LabelPropType, OpenPropType } from '../../schema';
+import { setState, validateAlign, validateHasCloser, validateLabel, validateOpen } from '../../schema';
+import { dispatchDomEvent, KolEvent } from '../../utils/events';
+import { handleCancelOverlay } from '../../utils/tooltip-open-tracking';
 
 /**
  * @slot - The Content of drawer.
@@ -87,7 +88,7 @@ export class KolDrawer implements DrawerAPI {
 	public render(): JSX.Element {
 		return (
 			<Host class="kol-drawer">
-				<dialog aria-label={this.state._label} class="kol-drawer__dialog" ref={this.getRef}>
+				<dialog aria-label={this.state._label} class="kol-drawer__dialog" onCancel={handleCancelOverlay} ref={this.getRef}>
 					{this.renderDialogContent()}
 				</dialog>
 			</Host>

packages/components/src/components/modal/shadow.tsx

@@ -7,6 +7,7 @@ import { setState, validateLabel, validateWidth } from '../../schema';
 import type { ModalVariantPropType } from '../../schema/props/variant/modal';
 import { validateModalVariant } from '../../schema/props/variant/modal';
 import { dispatchDomEvent, KolEvent } from '../../utils/events';
+import { handleCancelOverlay } from '../../utils/tooltip-open-tracking';
 
 /**
  * https://en.wikipedia.org/wiki/Modal_window
@@ -68,6 +69,7 @@ export class KolModal implements ModalAPI {
 					'kol-modal__blank': this.state._variant === 'blank',
 					'kol-modal__card': this.state._variant === 'card',
 				})}
+				onCancel={handleCancelOverlay}
 				onClose={this.handleNativeCloseEvent.bind(this)}
 				ref={(el) => {
 					this.refDialog = el;

packages/components/src/components/tooltip/component.tsx

@@ -8,6 +8,7 @@ import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
 import { alignFloatingElements } from '../../utils/align-floating-elements';
 import { hideOverlay, showOverlay } from '../../utils/overlay';
 import { KolSpanFc } from '../../functional-components';
+import { tooltipClosed, tooltipOpened } from '../../utils/tooltip-open-tracking';
 
 // Timing Guidelines for Exposing Hidden Content: https://www.nngroup.com/articles/timing-exposing-content/
 const TOOLTIP_DELAY = 300;
@@ -42,6 +43,7 @@ export class KolTooltipWc implements TooltipAPI {
 	private showTooltip = (): void => {
 		if (this.previousSibling && this.tooltipElement /* SSR instanceof HTMLElement */) {
 			showOverlay(this.tooltipElement);
+			tooltipOpened();
 			this.tooltipElement.style.setProperty('display', 'block');
 			getDocument().addEventListener('keyup', this.hideTooltipByEscape);
 
@@ -79,6 +81,7 @@ export class KolTooltipWc implements TooltipAPI {
 		clearTimeout(this.showTooltipTimeout); // Cancel scheduled tooltips
 		if (this.tooltipElement /* SSR instanceof HTMLElement */) {
 			hideOverlay(this.tooltipElement);
+			tooltipClosed();
 			this.tooltipElement.style.setProperty('display', 'none');
 			this.tooltipElement.style.setProperty('visibility', 'hidden');
 			if (this.cleanupAutoPositioning) {

packages/components/src/utils/tooltip-open-tracking.ts

@@ -0,0 +1,15 @@
+let openTooltips = 0;
+
+export const tooltipOpened = () => {
+	openTooltips++;
+};
+
+export const tooltipClosed = () => {
+	openTooltips = Math.max(0, openTooltips - 1);
+};
+
+export const handleCancelOverlay = (event: Event): void => {
+	if (openTooltips > 0) {
+		event.preventDefault();
+	}
+};