diff --git a/packages/mdc-dialog/README.md b/packages/mdc-dialog/README.md
index cdf8145cc8f..a449aade04e 100644
--- a/packages/mdc-dialog/README.md
+++ b/packages/mdc-dialog/README.md
@@ -40,13 +40,13 @@ npm install @material/dialog
 ### HTML Structure
 
 ```html
-<div class="mdc-dialog"
-     role="alertdialog"
-     aria-modal="true"
-     aria-labelledby="my-dialog-title"
-     aria-describedby="my-dialog-content">
+<div class="mdc-dialog">
   <div class="mdc-dialog__container">
-    <div class="mdc-dialog__surface">
+    <div class="mdc-dialog__surface"
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby="my-dialog-title"
+      aria-describedby="my-dialog-content">
       <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
       <h2 class="mdc-dialog__title" id="my-dialog-title"><!--
      -->Dialog Title<!--
@@ -114,13 +114,13 @@ dialog.listen('MDCDialog:opened', () => {
 The Simple Dialog contains a list of potential actions. It does not contain buttons.
 
 ```html
-<div class="mdc-dialog"
-     role="alertdialog"
-     aria-modal="true"
-     aria-labelledby="my-dialog-title"
-     aria-describedby="my-dialog-content">
+<div class="mdc-dialog">
   <div class="mdc-dialog__container">
-    <div class="mdc-dialog__surface">
+    <div class="mdc-dialog__surface"
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby="my-dialog-title"
+      aria-describedby="my-dialog-content">
       <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
       <h2 class="mdc-dialog__title" id="my-dialog-title"><!--
      -->Choose a Ringtone<!--
@@ -150,13 +150,13 @@ The Confirmation Dialog contains a list of choices, and buttons to confirm or ca
 radio buttons (indicating single selection) or checkboxes (indicating multiple selection).
 
 ```html
-<div class="mdc-dialog"
-     role="alertdialog"
-     aria-modal="true"
-     aria-labelledby="my-dialog-title"
-     aria-describedby="my-dialog-content">
+<div class="mdc-dialog">
   <div class="mdc-dialog__container">
-    <div class="mdc-dialog__surface">
+    <div class="mdc-dialog__surface"
+      role="alertdialog"
+      aria-modal="true"
+      aria-labelledby="my-dialog-title"
+      aria-describedby="my-dialog-content">
       <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
       <h2 class="mdc-dialog__title" id="my-dialog-title"><!--
      -->Choose a Ringtone<!--
diff --git a/test/screenshot/spec/mdc-dialog/mixins/container-fill-color.html b/test/screenshot/spec/mdc-dialog/mixins/container-fill-color.html
index 1ec7bca7689..0c760933b1e 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/container-fill-color.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/container-fill-color.html
@@ -40,14 +40,14 @@
       <button class="test-dialog-open-button" data-test-dialog-id="test-dialog" autofocus>Open Dialog</button>
 
       <div class="mdc-dialog mdc-dialog--open test-dialog test-dialog--container-fill-color"
-           role="alertdialog"
-           aria-modal="true"
-           aria-labelledby="test-dialog__title"
-           aria-describedby="test-dialog__content"
            id="test-dialog">
         <div class="mdc-dialog__scrim"></div>
         <div class="mdc-dialog__container">
-          <div class="mdc-dialog__surface">
+          <div class="mdc-dialog__surface"
+              role="alertdialog"
+              aria-modal="true"
+              aria-labelledby="test-dialog__title"
+              aria-describedby="test-dialog__content">
             <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="test-dialog__title"><!--
            -->“The Count of Monte Cristo” by Alexandre <span class="test-font--redact-all">Dumas</span>.<br>
               Published in 1844 and translated by Robin Buss.<br>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/content-ink-color.html b/test/screenshot/spec/mdc-dialog/mixins/content-ink-color.html
index 913007ba7ab..958e268069e 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/content-ink-color.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/content-ink-color.html
@@ -40,14 +40,14 @@
       <button class="test-dialog-open-button" data-test-dialog-id="test-dialog" autofocus>Open Dialog</button>
 
       <div class="mdc-dialog mdc-dialog--open test-dialog test-dialog--content-ink-color"
-           role="alertdialog"
-           aria-modal="true"
-           aria-labelledby="test-dialog__title"
-           aria-describedby="test-dialog__content"
            id="test-dialog">
         <div class="mdc-dialog__scrim"></div>
         <div class="mdc-dialog__container">
-          <div class="mdc-dialog__surface">
+          <div class="mdc-dialog__surface"
+              role="alertdialog"
+              aria-modal="true"
+              aria-labelledby="test-dialog__title"
+              aria-describedby="test-dialog__content">
             <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="test-dialog__title"><!--
            -->“The Count of Monte Cristo” by Alexandre <span class="test-font--redact-all">Dumas</span>.<br>
               Published in 1844 and translated by Robin Buss.<br>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/max-height.html b/test/screenshot/spec/mdc-dialog/mixins/max-height.html
index b29871aa492..b44d37f0657 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/max-height.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/max-height.html
@@ -40,14 +40,14 @@
       <button class="test-dialog-open-button" data-test-dialog-id="test-dialog" autofocus>Open Dialog</button>
 
       <div class="mdc-dialog mdc-dialog--open test-dialog test-dialog--max-height"
-           role="alertdialog"
-           aria-modal="true"
-           aria-labelledby="test-dialog__title"
-           aria-describedby="test-dialog__content"
            id="test-dialog">
         <div class="mdc-dialog__scrim"></div>
         <div class="mdc-dialog__container">
-          <div class="mdc-dialog__surface">
+          <div class="mdc-dialog__surface"
+              role="alertdialog"
+              aria-modal="true"
+              aria-labelledby="test-dialog__title"
+              aria-describedby="test-dialog__content">
             <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="test-dialog__title"><!--
            -->“The Count of Monte Cristo” by Alexandre <span class="test-font--redact-all">Dumas</span>.<br>
               Published in 1844 and translated by Robin Buss.<br>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/max-width.html b/test/screenshot/spec/mdc-dialog/mixins/max-width.html
index 5f88712f911..e649d1a0b69 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/max-width.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/max-width.html
@@ -40,14 +40,14 @@
       <button class="test-dialog-open-button" data-test-dialog-id="test-dialog" autofocus>Open Dialog</button>
 
       <div class="mdc-dialog mdc-dialog--open test-dialog test-dialog--max-width"
-           role="alertdialog"
-           aria-modal="true"
-           aria-labelledby="test-dialog__title"
-           aria-describedby="test-dialog__content"
-           id="test-dialog">
+          id="test-dialog">
         <div class="mdc-dialog__scrim"></div>
         <div class="mdc-dialog__container">
-          <div class="mdc-dialog__surface">
+          <div class="mdc-dialog__surface"
+              role="alertdialog"
+              aria-modal="true"
+              aria-labelledby="test-dialog__title"
+              aria-describedby="test-dialog__content">
             <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--5-line" id="test-dialog__title"><!--
            -->“The Count of Monte Cristo” by Alexandre <span class="test-font--redact-all">Dumas</span>.<br>
               Published in 1844 and translated by Robin Buss.<br>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/min-width.html b/test/screenshot/spec/mdc-dialog/mixins/min-width.html
index 472447dd247..39441ef9d21 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/min-width.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/min-width.html
@@ -40,14 +40,14 @@
       <button class="test-dialog-open-button" data-test-dialog-id="test-dialog" autofocus>Open Dialog</button>
 
       <div class="mdc-dialog mdc-dialog--open test-dialog test-dialog--min-width"
-           role="alertdialog"
-           aria-modal="true"
-           aria-labelledby="test-dialog__title"
-           aria-describedby="test-dialog__content"
-           id="test-dialog">
+          id="test-dialog">
         <div class="mdc-dialog__scrim"></div>
         <div class="mdc-dialog__container">
-          <div class="mdc-dialog__surface">
+          <div class="mdc-dialog__surface"
+              role="alertdialog"
+              aria-modal="true"
+              aria-labelledby="test-dialog__title"
+              aria-describedby="test-dialog__content">
             <h2 class="mdc-dialog__title test-dialog__title" id="test-dialog__title">Title</h2>
             <div class="mdc-dialog__content test-dialog__content" id="test-dialog__content">
               <div class="test-dialog__content-rect">
diff --git a/test/screenshot/spec/mdc-dialog/mixins/scrim-color.html b/test/screenshot/spec/mdc-dialog/mixins/scrim-color.html
index 2e2b1e2cd65..01eaf3e02e4 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/scrim-color.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/scrim-color.html
@@ -40,14 +40,14 @@
       <button class="test-dialog-open-button" data-test-dialog-id="test-dialog" autofocus>Open Dialog</button>
 
       <div class="mdc-dialog mdc-dialog--open test-dialog test-dialog--scrim-color"
-           role="alertdialog"
-           aria-modal="true"
-           aria-labelledby="test-dialog__title"
-           aria-describedby="test-dialog__content"
-           id="test-dialog">
+          id="test-dialog">
         <div class="mdc-dialog__scrim"></div>
         <div class="mdc-dialog__container">
-          <div class="mdc-dialog__surface">
+          <div class="mdc-dialog__surface"
+              role="alertdialog"
+              aria-modal="true"
+              aria-labelledby="test-dialog__title"
+              aria-describedby="test-dialog__content">
             <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="test-dialog__title"><!--
            -->“The Count of Monte Cristo” by Alexandre <span class="test-font--redact-all">Dumas</span>.<br>
               Published in 1844 and translated by Robin Buss.<br>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/scroll-divider-color.html b/test/screenshot/spec/mdc-dialog/mixins/scroll-divider-color.html
index ae883fc1b85..7dd2c56ac44 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/scroll-divider-color.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/scroll-divider-color.html
@@ -40,14 +40,14 @@
       <button class="test-dialog-open-button" data-test-dialog-id="test-dialog" autofocus>Open Dialog</button>
 
       <div class="mdc-dialog mdc-dialog--open test-dialog test-dialog--scroll-divider-color"
-           role="alertdialog"
-           aria-modal="true"
-           aria-labelledby="test-dialog__title"
-           aria-describedby="test-dialog__content"
-           id="test-dialog">
+          id="test-dialog">
         <div class="mdc-dialog__scrim"></div>
         <div class="mdc-dialog__container">
-          <div class="mdc-dialog__surface">
+          <div class="mdc-dialog__surface"
+              role="alertdialog"
+              aria-modal="true"
+              aria-labelledby="test-dialog__title"
+              aria-describedby="test-dialog__content">
             <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="test-dialog__title"><!--
            -->“The Count of Monte Cristo” by Alexandre <span class="test-font--redact-all">Dumas</span>.<br>
               Published in 1844 and translated by Robin Buss.<br>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/shape-radius.html b/test/screenshot/spec/mdc-dialog/mixins/shape-radius.html
index 3c7ee76be44..0fad3299bc6 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/shape-radius.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/shape-radius.html
@@ -40,14 +40,14 @@
       <button class="test-dialog-open-button" data-test-dialog-id="test-dialog" autofocus>Open Dialog</button>
 
       <div class="mdc-dialog mdc-dialog--open test-dialog test-dialog--shape-radius"
-           role="alertdialog"
-           aria-modal="true"
-           aria-labelledby="test-dialog__title"
-           aria-describedby="test-dialog__content"
-           id="test-dialog">
+          id="test-dialog">
         <div class="mdc-dialog__scrim"></div>
         <div class="mdc-dialog__container">
-          <div class="mdc-dialog__surface">
+          <div class="mdc-dialog__surface"
+              role="alertdialog"
+              aria-modal="true"
+              aria-labelledby="test-dialog__title"
+              aria-describedby="test-dialog__content">
             <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="test-dialog__title"><!--
            -->“The Count of Monte Cristo” by Alexandre <span class="test-font--redact-all">Dumas</span>.<br>
               Published in 1844 and translated by Robin Buss.<br>
diff --git a/test/screenshot/spec/mdc-dialog/mixins/title-ink-color.html b/test/screenshot/spec/mdc-dialog/mixins/title-ink-color.html
index 3fc53695aa6..49ad75d4315 100644
--- a/test/screenshot/spec/mdc-dialog/mixins/title-ink-color.html
+++ b/test/screenshot/spec/mdc-dialog/mixins/title-ink-color.html
@@ -40,14 +40,14 @@
       <button class="test-dialog-open-button" data-test-dialog-id="test-dialog" autofocus>Open Dialog</button>
 
       <div class="mdc-dialog mdc-dialog--open test-dialog test-dialog--title-ink-color"
-           role="alertdialog"
-           aria-modal="true"
-           aria-labelledby="test-dialog__title"
-           aria-describedby="test-dialog__content"
-           id="test-dialog">
+          id="test-dialog">
         <div class="mdc-dialog__scrim"></div>
         <div class="mdc-dialog__container">
-          <div class="mdc-dialog__surface">
+          <div class="mdc-dialog__surface"
+              role="alertdialog"
+              aria-modal="true"
+              aria-labelledby="test-dialog__title"
+              aria-describedby="test-dialog__content">
             <h2 class="mdc-dialog__title test-dialog__title test-dialog__title--3-line" id="test-dialog__title"><!--
            -->“The Count of Monte Cristo” by Alexandre <span class="test-font--redact-all">Dumas</span>.<br>
               Published in 1844 and translated by Robin Buss.<br>