diff --git a/goldens/cdk/dialog/index.api.md b/goldens/cdk/dialog/index.api.md index 55e96b171d0c..4a5b14e94831 100644 --- a/goldens/cdk/dialog/index.api.md +++ b/goldens/cdk/dialog/index.api.md @@ -144,7 +144,7 @@ export class DialogConfig, container: C) => StaticProvider[]); - restoreFocus?: boolean | string | HTMLElement; + restoreFocus?: RestoreFocusValue; role?: DialogRole; scrollStrategy?: ScrollStrategy; templateContext?: Record | (() => Record); @@ -195,6 +195,9 @@ export class DialogRef { // @public export type DialogRole = 'dialog' | 'alertdialog'; +// @public +export type RestoreFocusValue = boolean | string | HTMLElement; + // @public (undocumented) export function throwDialogContentAlreadyAttachedError(): void; diff --git a/goldens/material/bottom-sheet/index.api.md b/goldens/material/bottom-sheet/index.api.md index 94225e8a2317..989bbea60343 100644 --- a/goldens/material/bottom-sheet/index.api.md +++ b/goldens/material/bottom-sheet/index.api.md @@ -18,6 +18,7 @@ import { InjectionToken } from '@angular/core'; import { Injector } from '@angular/core'; import { Observable } from 'rxjs'; import { OnDestroy } from '@angular/core'; +import { RestoreFocusValue } from '@angular/cdk/dialog'; import { ScrollStrategy } from '@angular/cdk/overlay'; import { TemplateRef } from '@angular/core'; import { ViewContainerRef } from '@angular/core'; @@ -63,7 +64,7 @@ export class MatBottomSheetConfig { maxHeight?: number | string; minHeight?: number | string; panelClass?: string | string[]; - restoreFocus?: boolean; + restoreFocus?: RestoreFocusValue; scrollStrategy?: ScrollStrategy; viewContainerRef?: ViewContainerRef; } diff --git a/goldens/material/dialog/index.api.md b/goldens/material/dialog/index.api.md index 0866fb739fb0..3264b6953a07 100644 --- a/goldens/material/dialog/index.api.md +++ b/goldens/material/dialog/index.api.md @@ -26,6 +26,7 @@ import { Observable } from 'rxjs'; import { OnChanges } from '@angular/core'; import { OnDestroy } from '@angular/core'; import { OnInit } from '@angular/core'; +import { RestoreFocusValue } from '@angular/cdk/dialog'; import { ScrollStrategy } from '@angular/cdk/overlay'; import { SimpleChanges } from '@angular/core'; import { Subject } from 'rxjs'; @@ -143,7 +144,7 @@ export class MatDialogConfig { minWidth?: number | string; panelClass?: string | string[]; position?: DialogPosition; - restoreFocus?: boolean; + restoreFocus?: RestoreFocusValue; role?: DialogRole; scrollStrategy?: ScrollStrategy; viewContainerRef?: ViewContainerRef; diff --git a/goldens/material/dialog/testing/index.api.md b/goldens/material/dialog/testing/index.api.md index 64e0f3067cb4..56cd33f4eb61 100644 --- a/goldens/material/dialog/testing/index.api.md +++ b/goldens/material/dialog/testing/index.api.md @@ -22,6 +22,7 @@ import * as i0 from '@angular/core'; import { Injector } from '@angular/core'; import { Observable } from 'rxjs'; import { OnDestroy } from '@angular/core'; +import { RestoreFocusValue } from '@angular/cdk/dialog'; import { ScrollStrategy } from '@angular/cdk/overlay'; import { Subject } from 'rxjs'; import { TemplateRef } from '@angular/core'; diff --git a/src/cdk/dialog/dialog-config.ts b/src/cdk/dialog/dialog-config.ts index 4585b11e4ba0..00833da2f21c 100644 --- a/src/cdk/dialog/dialog-config.ts +++ b/src/cdk/dialog/dialog-config.ts @@ -16,6 +16,16 @@ import {FocusOrigin} from '../a11y'; /** Options for where to set focus to automatically on dialog open */ export type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading'; +/** + * Value that determines the focus restoration behavior for a dialog. + * The values represent the following behaviors: + * - `boolean` - when true, will return focus to the element that was focused before the dialog + * was opened, otherwise won't restore focus at all. + * - `string` - focus will be restored to the first element that matches the CSS selector. + * - `HTMLElement` - focus will be restored to the specific element. + */ +export type RestoreFocusValue = boolean | string | HTMLElement; + /** Valid ARIA roles for a dialog. */ export type DialogRole = 'dialog' | 'alertdialog'; @@ -121,15 +131,8 @@ export class DialogConfig { */ autoFocus?: AutoFocusTarget | string | boolean = 'first-tabbable'; - /** - * Whether the bottom sheet should restore focus to the - * previously-focused element, after it's closed. - */ - restoreFocus?: boolean = true; + /** Configures the focus restoration behavior. See `RestoreFocusValue` for more information. */ + restoreFocus?: RestoreFocusValue = true; /** Scroll strategy to be used for the bottom sheet. */ scrollStrategy?: ScrollStrategy; diff --git a/src/material/dialog/dialog-config.ts b/src/material/dialog/dialog-config.ts index 0cfb0ae86234..899e0e1a58ce 100644 --- a/src/material/dialog/dialog-config.ts +++ b/src/material/dialog/dialog-config.ts @@ -9,7 +9,7 @@ import {ViewContainerRef, Injector} from '@angular/core'; import {Direction} from '@angular/cdk/bidi'; import {ScrollStrategy} from '@angular/cdk/overlay'; -import {DialogConfig} from '@angular/cdk/dialog'; +import {DialogConfig, RestoreFocusValue} from '@angular/cdk/dialog'; /** Options for where to set focus to automatically on dialog open */ export type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading'; @@ -129,11 +129,8 @@ export class MatDialogConfig { */ autoFocus?: AutoFocusTarget | string | boolean = 'first-tabbable'; - /** - * Whether the dialog should restore focus to the - * previously-focused element, after it's closed. - */ - restoreFocus?: boolean = true; + /** Configures the focus restoration behavior. See `RestoreFocusValue` for more information. */ + restoreFocus?: RestoreFocusValue = true; /** Whether to wait for the opening animation to finish before trapping focus. */ delayFocusTrap?: boolean = true;