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

Commit 6871336

Browse files
Shi Shucopybara-github
Shi Shu
authored and
copybara-github
committed
feat(tooltip): When the anchor element blurs, the rich tooltip will only be hidden if the focus is changed to a non-rich tooltip element.
BREAKING CHANGE: Added adapter method: - tooltipContainsElement(element: HTMLElement): boolean; Rich tooltips are currently in development and is not yet ready for use. PiperOrigin-RevId: 346325244
1 parent 8239afc commit 6871336

5 files changed

Lines changed: 249 additions & 12 deletions

File tree

‎packages/mdc-tooltip/adapter.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,11 @@ export interface MDCTooltipAdapter {
103103
*/
104104
anchorContainsElement(element: HTMLElement): boolean;
105105

106+
/**
107+
* Checks if element is contained within the tooltip element.
108+
*/
109+
tooltipContainsElement(element: HTMLElement): boolean;
110+
106111
/**
107112
* Registers an event listener to the root element.
108113
*/

‎packages/mdc-tooltip/component.ts‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {
3434
}
3535

3636
private anchorElem!: HTMLElement|null; // assigned in initialSyncWithDOM
37+
private tooltipElem!: HTMLElement|null; // assigned in initialSyncWithDOM
3738
private isTooltipRich!: boolean; // assigned in initialSyncWithDOM
3839
private isTooltipPersistent!: boolean; // assigned in initialSyncWithDOM
3940

@@ -53,6 +54,7 @@ export class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {
5354
this.anchorElem = document.querySelector<HTMLElement>(
5455
`[aria-describedby="${tooltipId}"]`) ||
5556
document.querySelector<HTMLElement>(`[data-tooltip-id="${tooltipId}"]`);
57+
this.tooltipElem = document.querySelector<HTMLElement>(`#${tooltipId}`);
5658
if (!this.anchorElem) {
5759
throw new Error(
5860
'MDCTooltip: Tooltip component requires an anchor element annotated with [aria-describedby] or [data-tooltip-id] anchor element.');
@@ -73,8 +75,8 @@ export class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {
7375
this.foundation.handleAnchorMouseLeave();
7476
};
7577

76-
this.handleBlur = () => {
77-
this.foundation.handleAnchorBlur();
78+
this.handleBlur = (evt) => {
79+
this.foundation.handleAnchorBlur(evt);
7880
};
7981

8082
this.handleTransitionEnd = () => {
@@ -85,21 +87,22 @@ export class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {
8587
this.foundation.handleAnchorClick();
8688
};
8789

90+
this.anchorElem.addEventListener('blur', this.handleBlur);
8891
if (this.isTooltipRich && this.isTooltipPersistent) {
8992
this.anchorElem.addEventListener('click', this.handleClick);
9093
} else {
9194
this.anchorElem.addEventListener('mouseenter', this.handleMouseEnter);
9295
// TODO(b/157075286): Listening for a 'focus' event is too broad.
9396
this.anchorElem.addEventListener('focus', this.handleFocus);
9497
this.anchorElem.addEventListener('mouseleave', this.handleMouseLeave);
95-
this.anchorElem.addEventListener('blur', this.handleBlur);
9698
}
9799

98100
this.listen('transitionend', this.handleTransitionEnd);
99101
}
100102

101103
destroy() {
102104
if (this.anchorElem) {
105+
this.anchorElem.removeEventListener('blur', this.handleBlur);
103106
if (this.isTooltipRich && this.isTooltipPersistent) {
104107
this.anchorElem.removeEventListener('click', this.handleClick);
105108
} else {
@@ -108,7 +111,6 @@ export class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {
108111
this.anchorElem.removeEventListener('focus', this.handleFocus);
109112
this.anchorElem.removeEventListener(
110113
'mouseleave', this.handleMouseLeave);
111-
this.anchorElem.removeEventListener('blur', this.handleBlur);
112114
}
113115
}
114116

@@ -161,6 +163,9 @@ export class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {
161163
anchorContainsElement: (element) => {
162164
return !!this.anchorElem?.contains(element);
163165
},
166+
tooltipContainsElement: (element) => {
167+
return !!this.tooltipElem?.contains(element);
168+
},
164169
registerEventHandler: (evt, handler) => {
165170
if (this.root instanceof HTMLElement) {
166171
this.root.addEventListener(evt, handler);

‎packages/mdc-tooltip/foundation.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
6262
setAnchorAttribute: () => null,
6363
isRTL: () => false,
6464
anchorContainsElement: () => false,
65+
tooltipContainsElement: () => false,
6566
registerEventHandler: () => undefined,
6667
deregisterEventHandler: () => undefined,
6768
registerDocumentEventHandler: () => undefined,
@@ -171,7 +172,16 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
171172
}, this.hideDelayMs);
172173
}
173174

174-
handleAnchorBlur() {
175+
handleAnchorBlur(evt: FocusEvent) {
176+
if (this.isRich) {
177+
const tooltipContainsRelatedTargetElement =
178+
evt.relatedTarget instanceof HTMLElement &&
179+
this.adapter.tooltipContainsElement(evt.relatedTarget);
180+
// If focus changed to the tooltip element, don't hide the tooltip.
181+
if (tooltipContainsRelatedTargetElement) {
182+
return;
183+
}
184+
}
175185
// Hide tooltip immediately on focus change.
176186
this.hide();
177187
}

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

Lines changed: 90 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,11 @@ function setupTestWithMockFoundation(fixture: HTMLElement) {
3636
return {anchorElem, tooltipElem, mockFoundation, component};
3737
}
3838

39+
function isIE() {
40+
return navigator.userAgent.indexOf('MSIE') !== -1 ||
41+
navigator.userAgent.indexOf('Trident') !== -1;
42+
}
43+
3944
describe('MDCTooltip', () => {
4045
let fixture: HTMLElement;
4146
setUpMdcTestEnvironment();
@@ -310,7 +315,7 @@ describe('MDCTooltip', () => {
310315
expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');
311316
});
312317

313-
it('aria-expanded remains true on anchor when mouseleave rich tooltip and mouseenter anchor`',
318+
it('aria-expanded remains true on anchor when mouseleave rich tooltip and mouseenter anchor',
314319
() => {
315320
const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;
316321
const anchorElem =
@@ -324,6 +329,48 @@ describe('MDCTooltip', () => {
324329

325330
expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');
326331
});
332+
333+
it('aria-expanded becomes false on anchor when anchor blurs and non-tooltip element is focused',
334+
() => {
335+
// FocusEvent is not supported on IE11 so this test will not be run on
336+
// it.
337+
if (isIE()) {
338+
return;
339+
}
340+
const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;
341+
const anchorElem =
342+
fixture.querySelector<HTMLElement>('[aria-describedby]')!;
343+
MDCTooltip.attachTo(tooltipElem);
344+
345+
emitEvent(anchorElem, 'focus');
346+
jasmine.clock().tick(numbers.SHOW_DELAY_MS);
347+
expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');
348+
anchorElem.dispatchEvent(
349+
new FocusEvent('blur', {relatedTarget: document.body}));
350+
351+
expect(anchorElem.getAttribute('aria-expanded')).toEqual('false');
352+
});
353+
354+
it('aria-expanded remains true on anchor when anchor blurs and rich tooltip focuses',
355+
() => {
356+
// FocusEvent is not supported on IE11 so this test will not be run on
357+
// it.
358+
if (isIE()) {
359+
return;
360+
}
361+
const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;
362+
const anchorElem =
363+
fixture.querySelector<HTMLElement>('[aria-describedby]')!;
364+
MDCTooltip.attachTo(tooltipElem);
365+
366+
emitEvent(anchorElem, 'focus');
367+
jasmine.clock().tick(numbers.SHOW_DELAY_MS);
368+
expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');
369+
anchorElem.dispatchEvent(
370+
new FocusEvent('blur', {relatedTarget: tooltipElem}));
371+
372+
expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');
373+
});
327374
});
328375

329376
describe('persistent rich tooltip tests', () => {
@@ -405,5 +452,47 @@ describe('MDCTooltip', () => {
405452
expect(tooltipElem.getAttribute('aria-hidden')).toEqual('true');
406453
expect(anchorElem.getAttribute('aria-expanded')).toEqual('false');
407454
});
455+
456+
it('aria-expanded becomes false on anchor when anchor blurs and non-tooltip element is focused',
457+
() => {
458+
// FocusEvent is not supported on IE11 so this test will not be run on
459+
// it.
460+
if (isIE()) {
461+
return;
462+
}
463+
const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;
464+
const anchorElem =
465+
fixture.querySelector<HTMLElement>('[aria-describedby]')!;
466+
MDCTooltip.attachTo(tooltipElem);
467+
468+
emitEvent(anchorElem, 'click');
469+
jasmine.clock().tick(numbers.SHOW_DELAY_MS);
470+
expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');
471+
anchorElem.dispatchEvent(
472+
new FocusEvent('blur', {relatedTarget: document.body}));
473+
474+
expect(anchorElem.getAttribute('aria-expanded')).toEqual('false');
475+
});
476+
477+
it('aria-expanded remains true on anchor when anchor blurs and rich tooltip focuses',
478+
() => {
479+
// FocusEvent is not supported on IE11 so this test will not be run on
480+
// it.
481+
if (isIE()) {
482+
return;
483+
}
484+
const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;
485+
const anchorElem =
486+
fixture.querySelector<HTMLElement>('[aria-describedby]')!;
487+
MDCTooltip.attachTo(tooltipElem);
488+
489+
emitEvent(anchorElem, 'click');
490+
jasmine.clock().tick(numbers.SHOW_DELAY_MS);
491+
expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');
492+
anchorElem.dispatchEvent(
493+
new FocusEvent('blur', {relatedTarget: tooltipElem}));
494+
495+
expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');
496+
});
408497
});
409498
});

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

Lines changed: 134 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ describe('MDCTooltipFoundation', () => {
126126
'setAnchorAttribute',
127127
'isRTL',
128128
'anchorContainsElement',
129+
'tooltipContainsElement',
129130
'registerEventHandler',
130131
'deregisterEventHandler',
131132
'registerDocumentEventHandler',
@@ -634,13 +635,140 @@ describe('MDCTooltipFoundation', () => {
634635
expectHideToBeCalled(foundation, mockAdapter);
635636
});
636637

637-
it(`#handleAnchorBlur hides the tooltip immediately`, () => {
638-
const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);
639-
foundation.show();
640-
foundation.handleAnchorBlur();
638+
it(`#handleAnchorBlur hides the tooltip immediately for plain tooltips`,
639+
() => {
640+
const {foundation, mockAdapter} =
641+
setUpFoundationTest(MDCTooltipFoundation);
641642

642-
expectHideToBeCalled(foundation, mockAdapter);
643-
});
643+
foundation.show();
644+
foundation.handleAnchorBlur();
645+
646+
expectHideToBeCalled(foundation, mockAdapter);
647+
});
648+
649+
it(`#handleAnchorBlur hides the tooltip immediately when focus changes to non-HTMLElement related target for default rich tooltips`,
650+
() => {
651+
const {foundation, mockAdapter} =
652+
setUpFoundationTest(MDCTooltipFoundation);
653+
mockAdapter.hasClass.withArgs(CssClasses.RICH).and.returnValue(true);
654+
foundation.init();
655+
656+
foundation.show();
657+
foundation.handleAnchorBlur({});
658+
659+
expectHideToBeCalled(foundation, mockAdapter);
660+
});
661+
662+
it(`#handleAnchorBlur hides the tooltip immediately when focus changes to related target not within tooltip for default rich tooltips`,
663+
() => {
664+
const {foundation, mockAdapter} =
665+
setUpFoundationTest(MDCTooltipFoundation);
666+
mockAdapter.hasClass.withArgs(CssClasses.RICH).and.returnValue(true);
667+
mockAdapter.tooltipContainsElement.and.returnValue(false);
668+
foundation.init();
669+
670+
const mockFocusEvent = {relatedTarget: document.createElement('div')};
671+
foundation.show();
672+
foundation.handleAnchorBlur(mockFocusEvent);
673+
674+
expectHideToBeCalled(foundation, mockAdapter);
675+
});
676+
677+
it(`#handleAnchorBlur doesn't hide the tooltip when focus changes to related target not within tooltip for default rich tooltips`,
678+
() => {
679+
const {foundation, mockAdapter} =
680+
setUpFoundationTest(MDCTooltipFoundation);
681+
mockAdapter.hasClass.withArgs(CssClasses.RICH).and.returnValue(true);
682+
mockAdapter.tooltipContainsElement.and.returnValue(true);
683+
foundation.init();
684+
685+
const mockFocusEvent = {relatedTarget: document.createElement('div')};
686+
foundation.show();
687+
foundation.handleAnchorBlur(mockFocusEvent);
688+
689+
expect(mockAdapter.setAnchorAttribute)
690+
.not.toHaveBeenCalledWith('aria-expanded', 'false');
691+
expect(mockAdapter.setAttribute)
692+
.not.toHaveBeenCalledWith('aria-hidden', 'true');
693+
expect(mockAdapter.addClass).not.toHaveBeenCalledWith(CssClasses.HIDE);
694+
expect(mockAdapter.addClass)
695+
.not.toHaveBeenCalledWith(CssClasses.HIDE_TRANSITION);
696+
expect(mockAdapter.removeClass)
697+
.not.toHaveBeenCalledWith(CssClasses.SHOWN);
698+
expect(mockAdapter.deregisterDocumentEventHandler)
699+
.not.toHaveBeenCalledWith('click', jasmine.any(Function));
700+
expect(mockAdapter.deregisterDocumentEventHandler)
701+
.not.toHaveBeenCalledWith('keydown', jasmine.any(Function));
702+
expect(mockAdapter.deregisterWindowEventHandler)
703+
.not.toHaveBeenCalledWith('scroll', jasmine.any(Function));
704+
expect(mockAdapter.deregisterWindowEventHandler)
705+
.not.toHaveBeenCalledWith('resize', jasmine.any(Function));
706+
});
707+
708+
it(`#handleAnchorBlur hides the tooltip immediately when focus changes to non-HTMLElement related target for persistent rich tooltips`,
709+
() => {
710+
const {foundation, mockAdapter} =
711+
setUpFoundationTest(MDCTooltipFoundation);
712+
mockAdapter.hasClass.withArgs(CssClasses.RICH).and.returnValue(true);
713+
mockAdapter.getAttribute.withArgs(attributes.PERSISTENT)
714+
.and.returnValue('true');
715+
foundation.init();
716+
717+
foundation.show();
718+
foundation.handleAnchorBlur({});
719+
720+
expectHideToBeCalled(foundation, mockAdapter);
721+
});
722+
723+
it(`#handleAnchorBlur hides the tooltip immediately when focus changes to related target not within tooltip for persistent rich tooltips`,
724+
() => {
725+
const {foundation, mockAdapter} =
726+
setUpFoundationTest(MDCTooltipFoundation);
727+
mockAdapter.hasClass.withArgs(CssClasses.RICH).and.returnValue(true);
728+
mockAdapter.getAttribute.withArgs(attributes.PERSISTENT)
729+
.and.returnValue('true');
730+
mockAdapter.tooltipContainsElement.and.returnValue(false);
731+
foundation.init();
732+
733+
const mockFocusEvent = {relatedTarget: document.createElement('div')};
734+
foundation.show();
735+
foundation.handleAnchorBlur(mockFocusEvent);
736+
737+
expectHideToBeCalled(foundation, mockAdapter);
738+
});
739+
740+
it(`#handleAnchorBlur doesn't hide the tooltip when focus changes to related target within tooltip for persistent rich tooltips`,
741+
() => {
742+
const {foundation, mockAdapter} =
743+
setUpFoundationTest(MDCTooltipFoundation);
744+
mockAdapter.hasClass.withArgs(CssClasses.RICH).and.returnValue(true);
745+
mockAdapter.getAttribute.withArgs(attributes.PERSISTENT)
746+
.and.returnValue('true');
747+
mockAdapter.tooltipContainsElement.and.returnValue(true);
748+
foundation.init();
749+
750+
const mockFocusEvent = {relatedTarget: document.createElement('div')};
751+
foundation.show();
752+
foundation.handleAnchorBlur(mockFocusEvent);
753+
754+
expect(mockAdapter.setAnchorAttribute)
755+
.not.toHaveBeenCalledWith('aria-expanded', 'false');
756+
expect(mockAdapter.setAttribute)
757+
.not.toHaveBeenCalledWith('aria-hidden', 'true');
758+
expect(mockAdapter.addClass).not.toHaveBeenCalledWith(CssClasses.HIDE);
759+
expect(mockAdapter.addClass)
760+
.not.toHaveBeenCalledWith(CssClasses.HIDE_TRANSITION);
761+
expect(mockAdapter.removeClass)
762+
.not.toHaveBeenCalledWith(CssClasses.SHOWN);
763+
expect(mockAdapter.deregisterDocumentEventHandler)
764+
.not.toHaveBeenCalledWith('click', jasmine.any(Function));
765+
expect(mockAdapter.deregisterDocumentEventHandler)
766+
.not.toHaveBeenCalledWith('keydown', jasmine.any(Function));
767+
expect(mockAdapter.deregisterWindowEventHandler)
768+
.not.toHaveBeenCalledWith('scroll', jasmine.any(Function));
769+
expect(mockAdapter.deregisterWindowEventHandler)
770+
.not.toHaveBeenCalledWith('resize', jasmine.any(Function));
771+
});
644772

645773
it(`#handleDocumentClick hides the tooltip immediately`, () => {
646774
const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);

0 commit comments

Comments
 (0)