From d2f9fbd055c8a53779b432ac50b894b49b114a22 Mon Sep 17 00:00:00 2001
From: Rohit Sharma <rohit2sharma95@gmail.com>
Date: Mon, 11 May 2020 15:15:42 +0530
Subject: [PATCH] Removed role="document" from the modal dialog (#30755)

---
 js/tests/visual/modal.html        |  6 ++--
 site/docs/4.4/components/modal.md | 46 +++++++++++++++----------------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index 87e83581502c..872c8d402fae 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -35,7 +35,7 @@
       <h1>Modal <small>Bootstrap Visual Test</small></h1>
 
       <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-        <div class="modal-dialog" role="document">
+        <div class="modal-dialog">
           <div class="modal-content">
             <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -122,7 +122,7 @@ <h4>Overflowing text to show scroll behavior</h4>
       </div>
 
       <div class="modal fade" id="firefoxModal" tabindex="-1" role="dialog" aria-labelledby="firefoxModalLabel" aria-hidden="true">
-        <div class="modal-dialog" role="document">
+        <div class="modal-dialog">
           <div class="modal-content">
             <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -148,7 +148,7 @@ <h4 class="modal-title" id="firefoxModalLabel">Firefox Bug Test</h4>
       </div>
 
       <div class="modal fade" id="slowModal" tabindex="-1" role="dialog" aria-labelledby="slowModalLabel" aria-hidden="true" style="transition-duration: 5s;">
-        <div class="modal-dialog" role="document" style="transition-duration: inherit;">
+        <div class="modal-dialog" style="transition-duration: inherit;">
           <div class="modal-content">
             <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
diff --git a/site/docs/4.4/components/modal.md b/site/docs/4.4/components/modal.md
index 2258d73546b4..9766766c7991 100644
--- a/site/docs/4.4/components/modal.md
+++ b/site/docs/4.4/components/modal.md
@@ -35,7 +35,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
 
 <div class="bd-example bd-example-modal">
   <div class="modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog" role="document">
+    <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title">Modal title</h5>
@@ -57,7 +57,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
 
 {% highlight html %}
 <div class="modal" tabindex="-1" role="dialog">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title">Modal title</h5>
@@ -82,7 +82,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
 Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
 
 <div class="modal fade" id="exampleModalLive" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="exampleModalLiveLabel">Modal title</h5>
@@ -115,7 +115,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
 
 <!-- Modal -->
 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
@@ -140,7 +140,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
 When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
 
 <div class="modal fade" id="staticBackdropLive" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5>
@@ -173,7 +173,7 @@ When backdrop is set to static, the modal will not close when clicking outside i
 
 <!-- Modal -->
 <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
@@ -199,7 +199,7 @@ When backdrop is set to static, the modal will not close when clicking outside i
 When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
 
 <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
@@ -244,7 +244,7 @@ When modals become too long for the user's viewport or device, they scroll indep
 You can also create a scrollable modal that allows scroll the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`.
 
 <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-scrollable" role="document">
+  <div class="modal-dialog modal-dialog-scrollable">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
@@ -288,7 +288,7 @@ You can also create a scrollable modal that allows scroll the modal body by addi
 
 {% highlight html %}
 <!-- Scrollable modal -->
-<div class="modal-dialog modal-dialog-scrollable" role="document">
+<div class="modal-dialog modal-dialog-scrollable">
   ...
 </div>
 {% endhighlight %}
@@ -298,7 +298,7 @@ You can also create a scrollable modal that allows scroll the modal body by addi
 Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 
 <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered" role="document">
+  <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
@@ -318,7 +318,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 </div>
 
 <div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true">
-  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
+  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5>
@@ -352,12 +352,12 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 
 {% highlight html %}
 <!-- Vertically centered modal -->
-<div class="modal-dialog modal-dialog-centered" role="document">
+<div class="modal-dialog modal-dialog-centered">
   ...
 </div>
 
 <!-- Vertically centered scrollable modal -->
-<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
+<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
   ...
 </div>
 {% endhighlight %}
@@ -367,7 +367,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 [Tooltips]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) and [popovers]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/popovers/) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
 
 <div class="modal fade" id="exampleModalPopovers" tabindex="-1" role="dialog" aria-labelledby="exampleModalPopoversLabel" aria-hidden="true">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5>
@@ -411,7 +411,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` within the `.modal-body`. Then, use the normal grid system classes as you would anywhere else.
 
 <div class="modal fade" id="gridSystemModal" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="gridModalLabel">Grids in modals</h5>
@@ -502,7 +502,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
 
 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="exampleModalLabel">New message</h5>
@@ -566,7 +566,7 @@ If the height of a modal changes while it is open, you should call `$('#myModal'
 
 ### Accessibility
 
-Be sure to add `role="dialog"` and `aria-labelledby="..."`, referencing the modal title, to `.modal`, and `role="document"` to the `.modal-dialog` itself. Additionally, you may give a description of your modal dialog with `aria-describedby` on `.modal`.
+Be sure to add `role="dialog"` and `aria-labelledby="..."`, referencing the modal title, to `.modal`. Additionally, you may give a description of your modal dialog with `aria-describedby` on `.modal`.
 
 ### Embedding YouTube videos
 
@@ -617,13 +617,13 @@ Our default modal without modifier class constitutes the "medium" size modal.
 </div>
 
 {% highlight html %}
-<div class="modal-dialog modal-xl" role="document">...</div>
-<div class="modal-dialog modal-lg" role="document">...</div>
-<div class="modal-dialog modal-sm" role="document">...</div>
+<div class="modal-dialog modal-xl">...</div>
+<div class="modal-dialog modal-lg">...</div>
+<div class="modal-dialog modal-sm">...</div>
 {% endhighlight %}
 
 <div class="modal fade" id="exampleModalXl" tabindex="-1" role="dialog" aria-labelledby="exampleModalXlLabel" aria-hidden="true">
-  <div class="modal-dialog modal-xl" role="document">
+  <div class="modal-dialog modal-xl">
     <div class="modal-content">
 
       <div class="modal-header">
@@ -640,7 +640,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
 </div>
 
 <div class="modal fade" id="exampleModalLg" tabindex="-1" role="dialog" aria-labelledby="exampleModalLgLabel" aria-hidden="true">
-  <div class="modal-dialog modal-lg" role="document">
+  <div class="modal-dialog modal-lg">
     <div class="modal-content">
 
       <div class="modal-header">
@@ -657,7 +657,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
 </div>
 
 <div class="modal fade" id="exampleModalSm" tabindex="-1" role="dialog" aria-labelledby="exampleModalSmLabel" aria-hidden="true">
-  <div class="modal-dialog modal-sm" role="document">
+  <div class="modal-dialog modal-sm">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title h4" id="exampleModalSmLabel">Small modal</h5>