fix(bottom-sheet): bottom-sheet content not being read out by screen readers (#14534)

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.

Author: crisbeto

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

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,