Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit 1085c3b

Browse files
Shi Shucopybara-github
Shi Shu
authored and
copybara-github
committed
feat(tooltip): When the rich tooltip element focuses out, hide the rich tooltip if the new focused element is not the anchor element or an element within the rich tooltip.
PiperOrigin-RevId: 346591116
1 parent ba9e310 commit 1085c3b

File tree

3 files changed

+160
-4
lines changed

3 files changed

+160
-4
lines changed

‎packages/mdc-tooltip/foundation.ts‎

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,8 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
9696
SpecificEventListener<'mouseenter'>;
9797
private readonly richTooltipMouseLeaveHandler:
9898
SpecificEventListener<'mouseleave'>;
99+
private readonly richTooltipFocusOutHandler:
100+
SpecificEventListener<'focusout'>;
99101
private readonly windowScrollHandler: SpecificEventListener<'scroll'>;
100102
private readonly windowResizeHandler: SpecificEventListener<'resize'>;
101103

@@ -119,6 +121,10 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
119121
this.handleRichTooltipMouseLeave();
120122
};
121123

124+
this.richTooltipFocusOutHandler = (evt) => {
125+
this.handleRichTooltipFocusOut(evt);
126+
};
127+
122128
this.windowScrollHandler = () => {
123129
this.handleWindowChangeEvent();
124130
};
@@ -228,6 +234,19 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
228234
}, this.hideDelayMs);
229235
}
230236

237+
private handleRichTooltipFocusOut(evt: FocusEvent) {
238+
const anchorOrTooltipContainsRelatedTargetElement =
239+
evt.relatedTarget instanceof HTMLElement &&
240+
(this.adapter.anchorContainsElement(evt.relatedTarget) ||
241+
this.adapter.tooltipContainsElement(evt.relatedTarget));
242+
// If the focus is still within the anchor or the tooltip, do not hide the
243+
// tooltip.
244+
if (anchorOrTooltipContainsRelatedTargetElement) {
245+
return;
246+
}
247+
this.hide();
248+
}
249+
231250
/**
232251
* On window resize or scroll, check the anchor position and size and
233252
* repostion tooltip if necessary.
@@ -256,6 +275,8 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
256275
}
257276
if (this.isRich) {
258277
this.adapter.setAnchorAttribute('aria-expanded', 'true');
278+
this.adapter.registerEventHandler(
279+
'focusout', this.richTooltipFocusOutHandler);
259280
if (!this.isPersistent) {
260281
this.adapter.registerEventHandler(
261282
'mouseenter', this.richTooltipMouseEnterHandler);
@@ -300,6 +321,8 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
300321

301322
this.isShown = false;
302323
this.adapter.setAttribute('aria-hidden', 'true');
324+
this.adapter.deregisterEventHandler(
325+
'focusout', this.richTooltipFocusOutHandler);
303326
if (this.isRich) {
304327
this.adapter.setAnchorAttribute('aria-expanded', 'false');
305328
if (!this.isPersistent) {
@@ -634,11 +657,15 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
634657
this.adapter.removeClass(HIDE);
635658
this.adapter.removeClass(HIDE_TRANSITION);
636659

637-
if (this.isRich && !this.isPersistent) {
638-
this.adapter.deregisterEventHandler(
639-
'mouseenter', this.richTooltipMouseEnterHandler);
660+
if (this.isRich) {
640661
this.adapter.deregisterEventHandler(
641-
'mouseleave', this.richTooltipMouseLeaveHandler);
662+
'focusout', this.richTooltipFocusOutHandler);
663+
if (!this.isPersistent) {
664+
this.adapter.deregisterEventHandler(
665+
'mouseenter', this.richTooltipMouseEnterHandler);
666+
this.adapter.deregisterEventHandler(
667+
'mouseleave', this.richTooltipMouseLeaveHandler);
668+
}
642669
}
643670

644671
this.adapter.deregisterDocumentEventHandler(

‎packages/mdc-tooltip/test/component.test.ts‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -371,6 +371,70 @@ describe('MDCTooltip', () => {
371371

372372
expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');
373373
});
374+
375+
it('aria-expanded becomes false on anchor when rich tooltip focuses out and anchor does not receive focus',
376+
() => {
377+
// FocusEvent is not supported on IE11 so this test will not be run on
378+
// it.
379+
if (isIE()) {
380+
return;
381+
}
382+
const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;
383+
const anchorElem =
384+
fixture.querySelector<HTMLElement>('[aria-describedby]')!;
385+
MDCTooltip.attachTo(tooltipElem);
386+
387+
emitEvent(anchorElem, 'focus');
388+
jasmine.clock().tick(numbers.SHOW_DELAY_MS);
389+
expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');
390+
tooltipElem.dispatchEvent(new FocusEvent('focusout'));
391+
392+
expect(anchorElem.getAttribute('aria-expanded')).toEqual('false');
393+
});
394+
395+
it('aria-expanded remains true on anchor when rich tooltip focuses out and anchor receives focus',
396+
() => {
397+
// FocusEvent is not supported on IE11 so this test will not be run on
398+
// it.
399+
if (isIE()) {
400+
return;
401+
}
402+
const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;
403+
const anchorElem =
404+
fixture.querySelector<HTMLElement>('[aria-describedby]')!;
405+
MDCTooltip.attachTo(tooltipElem);
406+
407+
emitEvent(anchorElem, 'focus');
408+
jasmine.clock().tick(numbers.SHOW_DELAY_MS);
409+
expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');
410+
tooltipElem.dispatchEvent(
411+
new FocusEvent('focusout', {relatedTarget: anchorElem}));
412+
413+
expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');
414+
});
415+
416+
it('aria-expanded remains true on anchor when rich tooltip focuses out and element within tooltip receives focus',
417+
() => {
418+
// FocusEvent is not supported on IE11 so this test will not be run on
419+
// it.
420+
if (isIE()) {
421+
return;
422+
}
423+
const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;
424+
const tooltipContent =
425+
fixture.querySelector<HTMLElement>('.mdc-tooltip__content')!;
426+
const anchorElem =
427+
fixture.querySelector<HTMLElement>('[aria-describedby]')!;
428+
MDCTooltip.attachTo(tooltipElem);
429+
430+
emitEvent(anchorElem, 'focus');
431+
jasmine.clock().tick(numbers.SHOW_DELAY_MS);
432+
expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');
433+
tooltipElem.dispatchEvent(
434+
new FocusEvent('focusout', {relatedTarget: tooltipContent}));
435+
436+
expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');
437+
});
374438
});
375439

376440
describe('persistent rich tooltip tests', () => {

‎packages/mdc-tooltip/test/foundation.test.ts‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ function expectShowToBeCalled(
5050
if (foundation.getIsRich()) {
5151
expect(mockAdapter.setAnchorAttribute)
5252
.toHaveBeenCalledWith('aria-expanded', 'true');
53+
expect(mockAdapter.registerEventHandler)
54+
.toHaveBeenCalledWith('focusout', jasmine.any(Function));
5355
if (!foundation.getIsPersistent()) {
5456
expect(mockAdapter.registerEventHandler)
5557
.toHaveBeenCalledWith('mouseenter', jasmine.any(Function));
@@ -87,6 +89,8 @@ function expectHideToBeCalled(
8789
if (foundation.getIsRich()) {
8890
expect(mockAdapter.setAnchorAttribute)
8991
.toHaveBeenCalledWith('aria-expanded', 'false');
92+
expect(mockAdapter.deregisterEventHandler)
93+
.toHaveBeenCalledWith('focusout', jasmine.any(Function));
9094
if (!foundation.getIsPersistent()) {
9195
expect(mockAdapter.deregisterEventHandler)
9296
.toHaveBeenCalledWith('mouseenter', jasmine.any(Function));
@@ -116,6 +120,8 @@ function expectHideNotToBeCalled(
116120
if (foundation.getIsRich()) {
117121
expect(mockAdapter.setAnchorAttribute)
118122
.not.toHaveBeenCalledWith('aria-expanded', 'false');
123+
expect(mockAdapter.deregisterEventHandler)
124+
.not.toHaveBeenCalledWith('focusout', jasmine.any(Function));
119125
if (!foundation.getIsPersistent()) {
120126
expect(mockAdapter.deregisterEventHandler)
121127
.not.toHaveBeenCalledWith('mouseenter', jasmine.any(Function));
@@ -810,6 +816,59 @@ describe('MDCTooltipFoundation', () => {
810816
expect(mockAdapter.addClass).not.toHaveBeenCalledWith(CssClasses.SHOWING);
811817
});
812818

819+
it('#handleRichTooltipFocusOut hides the tooltip immediately if there is no related target',
820+
() => {
821+
const {foundation, mockAdapter} =
822+
setUpFoundationTestForRichTooltip(MDCTooltipFoundation);
823+
824+
foundation.show();
825+
foundation.handleRichTooltipFocusOut({});
826+
827+
expectHideToBeCalled(foundation, mockAdapter);
828+
});
829+
830+
it('#handleRichTooltipFocusOut hides the tooltip immediately if related target is not within the anchor or the tooltip',
831+
() => {
832+
const {foundation, mockAdapter} =
833+
setUpFoundationTestForRichTooltip(MDCTooltipFoundation);
834+
835+
foundation.show();
836+
mockAdapter.anchorContainsElement.and.returnValue(false);
837+
mockAdapter.tooltipContainsElement.and.returnValue(false);
838+
foundation.handleRichTooltipFocusOut(
839+
{relatedTarget: document.createElement('div')});
840+
841+
expectHideToBeCalled(foundation, mockAdapter);
842+
});
843+
844+
it('#handleRichTooltipFocusOut does not hide the tooltip if related target is within the anchor',
845+
() => {
846+
const {foundation, mockAdapter} =
847+
setUpFoundationTestForRichTooltip(MDCTooltipFoundation);
848+
849+
foundation.show();
850+
mockAdapter.anchorContainsElement.and.returnValue(true);
851+
mockAdapter.tooltipContainsElement.and.returnValue(false);
852+
foundation.handleRichTooltipFocusOut(
853+
{relatedTarget: document.createElement('div')});
854+
855+
expectHideNotToBeCalled(foundation, mockAdapter);
856+
});
857+
858+
it('#handleRichTooltipFocusOut does not hide the tooltip if related target is within the tooltip',
859+
() => {
860+
const {foundation, mockAdapter} =
861+
setUpFoundationTestForRichTooltip(MDCTooltipFoundation);
862+
863+
foundation.show();
864+
mockAdapter.anchorContainsElement.and.returnValue(false);
865+
mockAdapter.tooltipContainsElement.and.returnValue(true);
866+
foundation.handleRichTooltipFocusOut(
867+
{relatedTarget: document.createElement('div')});
868+
869+
expectHideNotToBeCalled(foundation, mockAdapter);
870+
});
871+
813872
it(`does not re-animate a tooltip already shown in the dom (from focus)`,
814873
() => {
815874
const {foundation, mockAdapter} =
@@ -1298,6 +1357,8 @@ describe('MDCTooltipFoundation', () => {
12981357

12991358
foundation.destroy();
13001359

1360+
expect(mockAdapter.deregisterEventHandler)
1361+
.not.toHaveBeenCalledWith('focusout', jasmine.any(Function));
13011362
expect(mockAdapter.deregisterEventHandler)
13021363
.not.toHaveBeenCalledWith('mouseenter', jasmine.any(Function));
13031364
expect(mockAdapter.deregisterEventHandler)
@@ -1319,6 +1380,8 @@ describe('MDCTooltipFoundation', () => {
13191380

13201381
foundation.destroy();
13211382

1383+
expect(mockAdapter.deregisterEventHandler)
1384+
.toHaveBeenCalledWith('focusout', jasmine.any(Function));
13221385
expect(mockAdapter.deregisterEventHandler)
13231386
.toHaveBeenCalledWith('mouseenter', jasmine.any(Function));
13241387
expect(mockAdapter.deregisterEventHandler)
@@ -1340,6 +1403,8 @@ describe('MDCTooltipFoundation', () => {
13401403

13411404
foundation.destroy();
13421405

1406+
expect(mockAdapter.deregisterEventHandler)
1407+
.toHaveBeenCalledWith('focusout', jasmine.any(Function));
13431408
expect(mockAdapter.deregisterEventHandler)
13441409
.not.toHaveBeenCalledWith('mouseenter', jasmine.any(Function));
13451410
expect(mockAdapter.deregisterEventHandler)

0 commit comments

Comments
 (0)