Version warning banner: inject on role="main" or main tag (#8079)

Ref pradyunsg/sphinx-basic-ng#12

Author: stsewd

docs/versions.rst

@@ -145,7 +145,23 @@ you can enable it in the admin section of your docs (:guilabel:`Admin` > :guilab
 
 .. note::
 
-   This feature is available only for :doc:`Sphinx projects </intro/getting-started-with-sphinx>`.
+   The banner will be injected in an HTML element with the ``main`` role or in the ``main`` tag.
+   For example:
+
+   .. code-block:: html
+
+      <div role="main">
+        <!-- The banner would be injected here -->
+        ...
+      </div>
+
+   .. code-block:: html
+
+      <main>
+        <!-- The banner would be injected here -->
+        ...
+      </main>
+
 
 Redirects on root URLs
 ----------------------

readthedocs/core/static-src/core/js/doc-embed/version-compare.js

@@ -25,11 +25,14 @@ function init(data) {
       .attr('href', currentURL)
       .text(data.slug);
 
-    var body = $("div.body");
-    if (!body.length) {
-        body = $("div.document");
+    var selectors = ['[role=main]', 'main', 'div.body', 'div.document'];
+    for (var i = 0; i < selectors.length; i += 1) {
+        var body = $(selectors[i]);
+        if (body.length) {
+            body.prepend(warning);
+            break;
+        }
     }
-    body.prepend(warning);
 }