fix(dialog): dialog content not being read out by screen readers

Currently we focus the first focusable element inside a dialog as per the accessibility recommendations, however moving focus to the first item causes some screen readers not to read out the rest of the dialog content. These changes switch to focusing the dialog 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.

Fixes #10591.

Author: crisbeto

e2e/components/dialog-e2e.spec.ts

@@ -59,7 +59,7 @@ describe('dialog', () => {
     await element(by.id('default')).click();
 
     await waitForDialog();
-    await expectFocusOn('mat-dialog-container input');
+    await expectFocusOn('mat-dialog-container');
   });
 
   it('should restore focus to the element that opened the dialog', async () => {
@@ -76,7 +76,7 @@ describe('dialog', () => {
     await element(by.id('default')).click();
 
     await waitForDialog();
-    await pressKeys(Key.TAB, Key.TAB, Key.TAB);
+    await pressKeys(Key.TAB, Key.TAB, Key.TAB, Key.TAB);
     await expectFocusOn('#close');
   });
 

src/lib/dialog/dialog-config.ts

@@ -92,8 +92,11 @@ export class MatDialogConfig<D = any> {
   /** Aria label to assign to the dialog element */
   ariaLabel?: string | null = null;
 
+  // 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 dialog's content.
   /** Whether the dialog should focus the first focusable element on open. */
-  autoFocus?: boolean = true;
+  autoFocus?: boolean = false;
 
   /**
    * Whether the dialog should restore focus to the

src/lib/dialog/dialog.spec.ts

@@ -949,18 +949,32 @@ describe('MatDialog', () => {
     beforeEach(() => document.body.appendChild(overlayContainerElement));
     afterEach(() => document.body.removeChild(overlayContainerElement));
 
-    it('should focus the first tabbable element of the dialog on open', fakeAsync(() => {
+    it('should focus the dialog container by default', fakeAsync(() => {
       dialog.open(PizzaMsg, {
-        viewContainerRef: testViewContainerRef
+        viewContainerRef: testViewContainerRef,
       });
 
       viewContainerFixture.detectChanges();
       flushMicrotasks();
 
       expect(document.activeElement!.tagName)
-          .toBe('INPUT', 'Expected first tabbable element (input) in the dialog to be focused.');
+          .toBe('MAT-DIALOG-CONTAINER', 'Expected dialog container to be focused.');
     }));
 
+    it('should focus the first tabbable element of the dialog on open when autoFocus is enabled',
+      fakeAsync(() => {
+        dialog.open(PizzaMsg, {
+          viewContainerRef: testViewContainerRef,
+          autoFocus: true
+        });
+
+        viewContainerFixture.detectChanges();
+        flushMicrotasks();
+
+        expect(document.activeElement!.tagName)
+            .toBe('INPUT', 'Expected first tabbable element (input) in the dialog to be focused.');
+      }));
+
     it('should allow disabling focus of the first tabbable element', fakeAsync(() => {
       dialog.open(PizzaMsg, {
         viewContainerRef: testViewContainerRef,