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

Commit eabf9d5

Browse files
Shi Shucopybara-github
Shi Shu
authored and
copybara-github
committed
feat(tooltip): Restore focus to the anchor element when the ESC button is pressed while the focus is in the tooltip for rich tooltips. Default rich tooltips should have focus restored to anchor and not have rich tooltips show.
PiperOrigin-RevId: 347845446
1 parent 384a8ee commit eabf9d5

File tree

5 files changed

+164
-15
lines changed

5 files changed

+164
-15
lines changed

‎packages/mdc-tooltip/adapter.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,11 @@ export interface MDCTooltipAdapter {
108108
*/
109109
tooltipContainsElement(element: HTMLElement): boolean;
110110

111+
/**
112+
* Sets focus on the anchor element.
113+
*/
114+
focusAnchorElement(): void;
115+
111116
/**
112117
* Registers an event listener to the root element.
113118
*/

‎packages/mdc-tooltip/component.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,8 @@ export class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {
6868
this.foundation.handleAnchorMouseEnter();
6969
};
7070

71-
this.handleFocus = () => {
72-
this.foundation.handleAnchorFocus();
71+
this.handleFocus = (evt) => {
72+
this.foundation.handleAnchorFocus(evt);
7373
};
7474

7575
this.handleMouseLeave = () => {
@@ -167,6 +167,9 @@ export class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {
167167
tooltipContainsElement: (element) => {
168168
return this.root.contains(element);
169169
},
170+
focusAnchorElement: () => {
171+
this.anchorElem?.focus();
172+
},
170173
registerEventHandler: (evt, handler) => {
171174
if (this.root instanceof HTMLElement) {
172175
this.root.addEventListener(evt, handler);

‎packages/mdc-tooltip/foundation.ts‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
6363
isRTL: () => false,
6464
anchorContainsElement: () => false,
6565
tooltipContainsElement: () => false,
66+
focusAnchorElement: () => undefined,
6667
registerEventHandler: () => undefined,
6768
deregisterEventHandler: () => undefined,
6869
registerDocumentEventHandler: () => undefined,
@@ -166,10 +167,19 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
166167
}
167168
}
168169

169-
handleAnchorFocus() {
170+
handleAnchorFocus(evt: FocusEvent) {
170171
// TODO(b/157075286): Need to add some way to distinguish keyboard
171172
// navigation focus events from other focus events, and only show the
172173
// tooltip on the former of these events.
174+
const {relatedTarget} = evt;
175+
const tooltipContainsRelatedTarget = relatedTarget instanceof HTMLElement &&
176+
this.adapter.tooltipContainsElement(relatedTarget);
177+
// Do not show tooltip if the previous focus was on a tooltip element. This
178+
// occurs when a rich tooltip is closed and focus is restored to the anchor
179+
// or when user tab-navigates back into the anchor from the rich tooltip.
180+
if (tooltipContainsRelatedTarget) {
181+
return;
182+
}
173183
this.showTimeout = setTimeout(() => {
174184
this.show();
175185
}, this.showDelayMs);
@@ -223,6 +233,12 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
223233
// Hide the tooltip immediately on ESC key.
224234
const key = normalizeKey(evt);
225235
if (key === KEY.ESCAPE) {
236+
const tooltipContainsActiveElement =
237+
document.activeElement instanceof HTMLElement &&
238+
this.adapter.tooltipContainsElement(document.activeElement);
239+
if (tooltipContainsActiveElement) {
240+
this.adapter.focusAnchorElement();
241+
}
226242
this.hide();
227243
}
228244
}

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

Lines changed: 61 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,10 @@
2121
* THE SOFTWARE.
2222
*/
2323

24+
import {KEY} from '@material/dom/keyboard';
25+
2426
import {getFixture} from '../../../testing/dom';
25-
import {emitEvent} from '../../../testing/dom/events';
27+
import {createKeyboardEvent, emitEvent} from '../../../testing/dom/events';
2628
import {createMockFoundation} from '../../../testing/helpers/foundation';
2729
import {setUpMdcTestEnvironment} from '../../../testing/helpers/setup';
2830
import {AnchorBoundaryType, CssClasses, numbers, XPosition, YPosition} from '../constants';
@@ -267,13 +269,18 @@ describe('MDCTooltip', () => {
267269
<button aria-describedby="tt0" aria-haspopup="true" aria-expanded="false">
268270
anchor
269271
</button>
270-
<div id="tt0" class="mdc-tooltip mdc-tooltip--rich" aria-role="dialog" aria-hidden="true">
272+
<aside id="tt0" class="mdc-tooltip mdc-tooltip--rich" aria-hidden="true">
271273
<div class="mdc-tooltip__surface">
272-
<p class="mdc-tooltip__content">
273-
demo tooltip
274-
</p>
274+
<h2 class="mdc-tooltip__title">Title</h2>
275+
<p class="mdc-tooltip__content">Content <a class="mdc-tooltip__content-link" href="google.com">link</a></p>
276+
<div class="mdc-tooltip--rich-actions">
277+
<button class="mdc-button mdc-tooltip__action" aria-label="action">
278+
<div class="mdc-button__ripple"></div>
279+
<span class="mdc-button__label">Action</span>
280+
</button>
281+
</div>
275282
</div>
276-
</div>
283+
</aside>
277284
</div>`);
278285
document.body.appendChild(fixture);
279286
});
@@ -330,6 +337,52 @@ describe('MDCTooltip', () => {
330337
expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');
331338
});
332339

340+
it('aria-expanded becomes true on anchor when anchor is focused', () => {
341+
const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;
342+
const anchorElem =
343+
fixture.querySelector<HTMLElement>('[aria-describedby]')!;
344+
MDCTooltip.attachTo(tooltipElem);
345+
346+
emitEvent(anchorElem, 'focus');
347+
jasmine.clock().tick(numbers.SHOW_DELAY_MS);
348+
349+
expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');
350+
});
351+
352+
it('aria-expanded becomes false on anchor when ESC is pressed from the tooltip',
353+
() => {
354+
const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;
355+
const anchorElem =
356+
fixture.querySelector<HTMLElement>('[aria-describedby]')!;
357+
MDCTooltip.attachTo(tooltipElem);
358+
359+
emitEvent(anchorElem, 'focus');
360+
jasmine.clock().tick(numbers.SHOW_DELAY_MS);
361+
expect(anchorElem.getAttribute('aria-expanded')).toEqual('true');
362+
tooltipElem.dispatchEvent(
363+
createKeyboardEvent('keydown', {key: KEY.ESCAPE, bubbles: true}));
364+
365+
expect(anchorElem.getAttribute('aria-expanded')).toEqual('false');
366+
});
367+
368+
it('anchor becomes focused when ESC is pressed from the tooltip while focus is in tooltip',
369+
() => {
370+
const tooltipElem = fixture.querySelector<HTMLElement>('#tt0')!;
371+
const anchorElem =
372+
fixture.querySelector<HTMLElement>('[aria-describedby]')!;
373+
const tooltipActionButton =
374+
fixture.querySelector<HTMLElement>('.mdc-tooltip__action')!;
375+
MDCTooltip.attachTo(tooltipElem);
376+
377+
emitEvent(anchorElem, 'focus');
378+
jasmine.clock().tick(numbers.SHOW_DELAY_MS);
379+
tooltipActionButton.focus();
380+
tooltipElem.dispatchEvent(
381+
createKeyboardEvent('keydown', {key: KEY.ESCAPE, bubbles: true}));
382+
383+
expect(document.activeElement).toBe(anchorElem);
384+
});
385+
333386
it('aria-expanded becomes false on anchor when anchor blurs and non-tooltip element is focused',
334387
() => {
335388
// FocusEvent is not supported on IE11 so this test will not be run on
@@ -443,13 +496,13 @@ describe('MDCTooltip', () => {
443496
<button aria-describedby="tt0" aria-haspopup="true" aria-expanded="false">
444497
anchor
445498
</button>
446-
<div id="tt0" class="mdc-tooltip mdc-tooltip--rich" aria-role="dialog" aria-hidden="true" data-mdc-tooltip-persistent="true">
499+
<aside id="tt0" class="mdc-tooltip mdc-tooltip--rich" aria-hidden="true" data-mdc-tooltip-persistent="true">
447500
<div class="mdc-tooltip__surface">
448501
<p class="mdc-tooltip__content">
449502
demo tooltip
450503
</p>
451504
</div>
452-
</div>
505+
</aside>
453506
</div>`);
454507
document.body.appendChild(fixture);
455508
});

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

Lines changed: 76 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,7 @@ describe('MDCTooltipFoundation', () => {
191191
'isRTL',
192192
'anchorContainsElement',
193193
'tooltipContainsElement',
194+
'focusAnchorElement',
194195
'registerEventHandler',
195196
'deregisterEventHandler',
196197
'registerDocumentEventHandler',
@@ -559,6 +560,43 @@ describe('MDCTooltipFoundation', () => {
559560
expectHideNotToBeCalled(foundation, mockAdapter);
560561
});
561562

563+
it('#handleKeydown does not restore focus to the anchorElement if the activeElement is not a HTMLElement',
564+
() => {
565+
const {foundation, mockAdapter} =
566+
setUpFoundationTest(MDCTooltipFoundation);
567+
if (document.activeElement instanceof HTMLElement) {
568+
document.activeElement.blur();
569+
}
570+
571+
foundation.handleKeydown({type: 'keydown', key: 'Escape'});
572+
573+
expect(mockAdapter.focusAnchorElement).not.toHaveBeenCalled();
574+
});
575+
576+
it('#handleKeydown does not restore focus to the anchorElement if the activeElement is not within tooltip',
577+
() => {
578+
const {foundation, mockAdapter} =
579+
setUpFoundationTest(MDCTooltipFoundation);
580+
mockAdapter.tooltipContainsElement.and.returnValue(false);
581+
582+
document.body.focus();
583+
foundation.handleKeydown({type: 'keydown', key: 'Escape'});
584+
585+
expect(mockAdapter.focusAnchorElement).not.toHaveBeenCalled();
586+
});
587+
588+
it('#handleKeydown restores focus to the anchorElement if the activeElement was within tooltip',
589+
() => {
590+
const {foundation, mockAdapter} =
591+
setUpFoundationTest(MDCTooltipFoundation);
592+
mockAdapter.tooltipContainsElement.and.returnValue(true);
593+
594+
document.body.focus();
595+
foundation.handleKeydown({type: 'keydown', key: 'Escape'});
596+
597+
expect(mockAdapter.focusAnchorElement).toHaveBeenCalled();
598+
});
599+
562600
it('#handleDocumentClick hides the tooltip immediately for plain tooltips',
563601
() => {
564602
const {foundation, mockAdapter} =
@@ -764,17 +802,51 @@ describe('MDCTooltipFoundation', () => {
764802
});
765803

766804
it(`#handleAnchorFocus shows the tooltip after a ${
767-
numbers.SHOW_DELAY_MS}ms delay`,
805+
numbers.SHOW_DELAY_MS}ms delay if relatedTarget is not a HTMLElement`,
768806
() => {
769807
const {foundation, mockAdapter} =
770808
setUpFoundationTest(MDCTooltipFoundation);
771-
foundation.handleAnchorFocus();
809+
810+
foundation.handleAnchorFocus({relatedTarget: null});
772811
expect(foundation.showTimeout).not.toEqual(null);
812+
jasmine.clock().tick(numbers.SHOW_DELAY_MS);
773813

814+
expectShowToBeCalled(foundation, mockAdapter);
815+
});
816+
817+
it(`#handleAnchorFocus shows the tooltip if the relatedTarget is not within tooltip`,
818+
() => {
819+
const {foundation, mockAdapter} =
820+
setUpFoundationTest(MDCTooltipFoundation);
821+
mockAdapter.tooltipContainsElement.and.returnValue(false);
822+
823+
foundation.handleAnchorFocus(
824+
{relatedTarget: document.createElement('div')});
825+
expect(foundation.showTimeout).not.toEqual(null);
774826
jasmine.clock().tick(numbers.SHOW_DELAY_MS);
827+
775828
expectShowToBeCalled(foundation, mockAdapter);
776829
});
777830

831+
it(`#handleAnchorFocus doesn't show the tooltip if the relatedTarget is within tooltip`,
832+
() => {
833+
const {foundation, mockAdapter} =
834+
setUpFoundationTest(MDCTooltipFoundation);
835+
mockAdapter.tooltipContainsElement.and.returnValue(true);
836+
837+
foundation.handleAnchorFocus(
838+
{relatedTarget: document.createElement('div')});
839+
expect(foundation.showTimeout).toEqual(null);
840+
jasmine.clock().tick(numbers.SHOW_DELAY_MS);
841+
842+
expect(mockAdapter.setAttribute)
843+
.not.toHaveBeenCalledWith('aria-hidden', 'false');
844+
expect(mockAdapter.removeClass)
845+
.not.toHaveBeenCalledWith(CssClasses.HIDE);
846+
expect(mockAdapter.addClass)
847+
.not.toHaveBeenCalledWith(CssClasses.SHOWING);
848+
});
849+
778850
it(`#handleAnchorClick shows the tooltip immediately when tooltip is hidden for persistent rich tooltips`,
779851
() => {
780852
const {foundation, mockAdapter} = setUpFoundationTestForRichTooltip(
@@ -894,12 +966,12 @@ describe('MDCTooltipFoundation', () => {
894966
() => {
895967
const {foundation, mockAdapter} =
896968
setUpFoundationTest(MDCTooltipFoundation);
897-
foundation.handleAnchorFocus();
969+
foundation.handleAnchorFocus({relatedTarget: null});
898970
jasmine.clock().tick(numbers.SHOW_DELAY_MS);
899971

900972
foundation.handleAnchorMouseLeave();
901973
jasmine.clock().tick(numbers.HIDE_DELAY_MS / 2);
902-
foundation.handleAnchorFocus();
974+
foundation.handleAnchorFocus({relatedTarget: null});
903975

904976
expect(mockAdapter.setAttribute)
905977
.toHaveBeenCalledWith('aria-hidden', 'false');

0 commit comments

Comments
 (0)