From 5e826b1ed43a40116fbe5afbfc8c11c839739183 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sat, 15 Dec 2018 17:42:30 +0100
Subject: [PATCH] fix(bottom-sheet): bottom-sheet content not being read out by
 screen readers

Currently we focus the first focusable element inside a bottom sheet as per the accessibility recommendations, however moving focus to the first item causes some screen readers not to read out the rest of the bottom sheet content. These changes switch to focusing the bottom sheet container by default which allows screen readers to read out everything. If users press tab, they'll land on the first tabbable element anyways. The old behavior can still be opted into via the autoFocus option.

Relates to #10591.
---
 src/lib/bottom-sheet/bottom-sheet-config.ts |  5 ++++-
 src/lib/bottom-sheet/bottom-sheet.spec.ts   | 22 +++++++++++++++++----
 2 files changed, 22 insertions(+), 5 deletions(-)

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<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
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,