<search> element migration guide with <form> functionality

search-element-migration.md

How to migrate current application of role=search

Simple cases

• <div role=search> -> <search>
• <form role=search> -> <search action="">
• <form role=search action="..."> -> <search action="...">

Nesting

• <div role=search> ... <form> -> <search> ... <div>
• If there are additional form controls in the <div> that shouldn't be submitted, those conceptually do not belong in search and should be refactored.
• <form> ... <div role=search> -> <search> ... <div>
• <form> ... <div role=search> where the form contains additional elements outside search is very rare: <form> <... role=search></...> + <...>. Anno ASP Forms resulted in a full-page <form>, where role=search would have been just one part of the form. A new element is not expected to be used with such old technology, therefore it is a better trade-off to not support this pattern.

Not <div> or <form>

• other elements used with role=search (ignore the custom components) are mostly anti-patterns that will benefit from refactoring to adopt the <search> element.

Usage patterns

Note: Sourcegraph indexes open-source projects only. It does not cover the World Wide Web, but there are many public git scraping projects that mirror a piece of the Web.

• <div role=search> <form> is rare, 79 results. All other patterns are 500+.
• <form> <... role=search>
• <form>, single <div role=search>
• <div role=search>, no <form> within
• <form role=search>, no <div> within.
• <form role=search>, single <div>.
• <form role=search>, multiple <div> - complex trees.
• Exotic search landmarks - not <form>, not <div>: -> input, ul, li, components, aside, table, span, section??