fix(dialog): Move aria roles from dialog root to dialog surface… (#5239)

Author: joyzhong

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

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>

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>

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>

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>

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

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>

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>

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>

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>