@@ -130,7 +130,7 @@ export class FocusTrap {
130
130
* Waits for the zone to stabilize, then either focuses the first element that the
131
131
* user specified, or the first tabbable element.
132
132
* @returns Returns a promise that resolves with a boolean, depending
133
- * on whether focus was moved successfuly .
133
+ * on whether focus was moved successfully .
134
134
*/
135
135
focusInitialElementWhenReady ( ) : Promise < boolean > {
136
136
return new Promise < boolean > ( resolve => {
@@ -142,7 +142,7 @@ export class FocusTrap {
142
142
* Waits for the zone to stabilize, then focuses
143
143
* the first tabbable element within the focus trap region.
144
144
* @returns Returns a promise that resolves with a boolean, depending
145
- * on whether focus was moved successfuly .
145
+ * on whether focus was moved successfully .
146
146
*/
147
147
focusFirstTabbableElementWhenReady ( ) : Promise < boolean > {
148
148
return new Promise < boolean > ( resolve => {
@@ -154,7 +154,7 @@ export class FocusTrap {
154
154
* Waits for the zone to stabilize, then focuses
155
155
* the last tabbable element within the focus trap region.
156
156
* @returns Returns a promise that resolves with a boolean, depending
157
- * on whether focus was moved successfuly .
157
+ * on whether focus was moved successfully .
158
158
*/
159
159
focusLastTabbableElementWhenReady ( ) : Promise < boolean > {
160
160
return new Promise < boolean > ( resolve => {
@@ -195,7 +195,7 @@ export class FocusTrap {
195
195
196
196
/**
197
197
* Focuses the element that should be focused when the focus trap is initialized.
198
- * @returns Whether focus was moved successfuly .
198
+ * @returns Whether focus was moved successfully .
199
199
*/
200
200
focusInitialElement ( ) : boolean {
201
201
// Contains the deprecated version of selector, for temporary backwards comparability.
@@ -217,6 +217,12 @@ export class FocusTrap {
217
217
console . warn ( `Element matching '[cdkFocusInitial]' is not focusable.` , redirectToElement ) ;
218
218
}
219
219
220
+ if ( ! this . _checker . isFocusable ( redirectToElement ) ) {
221
+ const focusableChild = this . _getFirstTabbableElement ( redirectToElement ) as HTMLElement ;
222
+ focusableChild ?. focus ( ) ;
223
+ return ! ! focusableChild ;
224
+ }
225
+
220
226
redirectToElement . focus ( ) ;
221
227
return true ;
222
228
}
@@ -226,7 +232,7 @@ export class FocusTrap {
226
232
227
233
/**
228
234
* Focuses the first tabbable element within the focus trap region.
229
- * @returns Whether focus was moved successfuly .
235
+ * @returns Whether focus was moved successfully .
230
236
*/
231
237
focusFirstTabbableElement ( ) : boolean {
232
238
const redirectToElement = this . _getRegionBoundary ( 'start' ) ;
@@ -240,7 +246,7 @@ export class FocusTrap {
240
246
241
247
/**
242
248
* Focuses the last tabbable element within the focus trap region.
243
- * @returns Whether focus was moved successfuly .
249
+ * @returns Whether focus was moved successfully .
244
250
*/
245
251
focusLastTabbableElement ( ) : boolean {
246
252
const redirectToElement = this . _getRegionBoundary ( 'end' ) ;
@@ -253,7 +259,7 @@ export class FocusTrap {
253
259
}
254
260
255
261
/**
256
- * Checks whether the focus trap has successfuly been attached.
262
+ * Checks whether the focus trap has successfully been attached.
257
263
*/
258
264
hasAttached ( ) : boolean {
259
265
return this . _hasAttached ;
@@ -396,7 +402,7 @@ export class CdkTrapFocus implements OnDestroy, AfterContentInit, OnChanges, DoC
396
402
set enabled ( value : boolean ) { this . focusTrap . enabled = coerceBooleanProperty ( value ) ; }
397
403
398
404
/**
399
- * Whether the directive should automatially move focus into the trapped region upon
405
+ * Whether the directive should automatically move focus into the trapped region upon
400
406
* initialization and return focus to the previous activeElement upon destruction.
401
407
*/
402
408
@Input ( 'cdkTrapFocusAutoCapture' )
0 commit comments