diff --git a/src/lib/bottom-sheet/bottom-sheet-config.ts b/src/lib/bottom-sheet/bottom-sheet-config.ts index 415d8f5aa9f5..4f12cf867fb0 100644 --- a/src/lib/bottom-sheet/bottom-sheet-config.ts +++ b/src/lib/bottom-sheet/bottom-sheet-config.ts @@ -47,8 +47,11 @@ export class MatBottomSheetConfig { */ closeOnNavigation?: boolean = true; + // Note that this is disabled by default, because while the a11y recommendations are to focus + // the first focusable element, doing so prevents screen readers from reading out the + // rest of the bottom sheet content. /** Whether the bottom sheet should focus the first focusable element on open. */ - autoFocus?: boolean = true; + autoFocus?: boolean = false; /** * Whether the bottom sheet should restore focus to the diff --git a/src/lib/bottom-sheet/bottom-sheet.spec.ts b/src/lib/bottom-sheet/bottom-sheet.spec.ts index 0d2bda257de4..f50d02855eb4 100644 --- a/src/lib/bottom-sheet/bottom-sheet.spec.ts +++ b/src/lib/bottom-sheet/bottom-sheet.spec.ts @@ -514,18 +514,32 @@ describe('MatBottomSheet', () => { beforeEach(() => document.body.appendChild(overlayContainerElement)); afterEach(() => document.body.removeChild(overlayContainerElement)); - it('should focus the first tabbable element of the bottom sheet on open', fakeAsync(() => { + it('should focus the bottom sheet container by default', fakeAsync(() => { bottomSheet.open(PizzaMsg, { - viewContainerRef: testViewContainerRef + viewContainerRef: testViewContainerRef, }); viewContainerFixture.detectChanges(); flushMicrotasks(); - expect(document.activeElement!.tagName) - .toBe('INPUT', 'Expected first tabbable element (input) in the sheet to be focused.'); + expect(document.activeElement!.tagName).toBe('MAT-BOTTOM-SHEET-CONTAINER', + 'Expected bottom sheet container to be focused.'); })); + it('should focus the first tabbable element of the bottom sheet on open when' + + 'autoFocus is enabled', fakeAsync(() => { + bottomSheet.open(PizzaMsg, { + viewContainerRef: testViewContainerRef, + autoFocus: true + }); + + viewContainerFixture.detectChanges(); + flushMicrotasks(); + + expect(document.activeElement!.tagName).toBe('INPUT', + 'Expected first tabbable element (input) in the sheet to be focused.'); + })); + it('should allow disabling focus of the first tabbable element', fakeAsync(() => { bottomSheet.open(PizzaMsg, { viewContainerRef: testViewContainerRef,