Migration guide

Contents

1. How to migrate current applications of role=search
   1. Simple cases
   2. Nesting
   3. Not <div> or <form>
   4. Usage patterns
2. How to update JS code and libraries
   1. Tagname conditions
   2. Ancestor selector
   3. Switch-case

How to migrate current applications 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??
• <search> element in use - lang:html <search>.*</search>

How to update JS code and libraries

Common use-cases:

Tagname conditions

• element.tagName.toLowerCase() === 'form'
• element.tagName.toUpperCase() === 'FORM'
• element.tagName === 'FORM'
• Variations with double quotes, element.nodeName, element.localName

-> element instanceof HTMLFormElement

Ancestor selector

• element.closest('form') -> element.closest('form,search')

Switch-case

• case 'FORM' ->

  case 'FORM':
  case 'SEARCH':