Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/lib/bottom-sheet/bottom-sheet-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,11 @@ export class MatBottomSheetConfig<D = any> {
*/
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
Expand Down
22 changes: 18 additions & 4 deletions src/lib/bottom-sheet/bottom-sheet.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down