Use the new HTML <search> element (#11704)

Author: picnixz

CHANGES.rst

@@ -17,6 +17,11 @@ Deprecated
 Features added
 --------------
 
+* #11701: HTML Search: Adopt the new `<search>`_ element.
+  Patch by Bénédikt Tran.
+
+  .. _`<search>`: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search
+
 Bugs fixed
 ----------
 

sphinx/themes/agogo/layout.html

@@ -39,13 +39,13 @@ <h3>{{ _('Table of Contents') }}</h3>
           {{ toctree(includehidden=True) }}
           {%- endblock %}
           {%- block sidebarsearch %}
-          <div role="search">
+          <search role="search">
             <h3 style="margin-top: 1.5em;">{{ _('Search') }}</h3>
             <form class="search" action="{{ pathto('search') }}" method="get">
                 <input type="text" name="q" />
                 <input type="submit" value="{{ _('Go') }}" />
             </form>
-          </div>
+          </search>
           {%- endblock %}
 {% endmacro %}
 

sphinx/themes/basic/searchbox.html

@@ -8,14 +8,14 @@
     :license: BSD, see LICENSE for details.
 #}
 {%- if pagename != "search" and builder != "singlehtml" %}
-<div id="searchbox" style="display: none" role="search">
+<search id="searchbox" style="display: none" role="search">
   <h3 id="searchlabel">{{ _('Quick search') }}</h3>
     <div class="searchformwrapper">
     <form class="search" action="{{ pathto('search') }}" method="get">
       <input type="text" name="q" aria-labelledby="searchlabel" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/>
       <input type="submit" value="{{ _('Go') }}" />
     </form>
     </div>
-</div>
+</search>
 <script>document.getElementById('searchbox').style.display = "block"</script>
 {%- endif %}

sphinx/themes/basic/searchfield.html

@@ -11,13 +11,13 @@
     :license: BSD, see LICENSE for details.
 #}
 {%- if pagename != "search" and builder != "singlehtml" %}
-<div id="searchbox" style="display: none" role="search">
+<search id="searchbox" style="display: none" role="search">
     <div class="searchformwrapper">
     <form class="search" action="{{ pathto('search') }}" method="get">
       <input type="text" name="q" aria-labelledby="searchlabel" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search"/>
       <input type="submit" value="{{ _('Go') }}" />
     </form>
     </div>
-</div>
+</search>
 <script>document.getElementById('searchbox').style.display = "block"</script>
 {%- endif %}