Skip to content

Instantly share code, notes, and snippets.

@Kaleidea
Last active February 6, 2022 00:45
Show Gist options
  • Save Kaleidea/b9ff4e4dd7047d1d56c93e1421a49f56 to your computer and use it in GitHub Desktop.
Save Kaleidea/b9ff4e4dd7047d1d56c93e1421a49f56 to your computer and use it in GitHub Desktop.
<search> element with <div> functionality

Div functionality

This solution satisfies the original use-case defined as "people who don't want form behavior": <search> without the action attribute behaves as <div role=search>, the same as the original proposal.

Breakdown of individual form features:

  • Form submission is disabled if the action attribute is unspecified.
  • Autocomplete is not affected (it is already enabled by default for <input type=search>).
  • There is no form validation unless the developer explicitly sets it up.
  • There is no reset button unless the developer adds one.
  • <search> is registered in document.forms, this has no effect unless the developer iterates forms, in which case this is expected.
  • Form controls within <search> are associated to it. This has no unwanted effect. In fact, it is a reasonable expectation to wire up the form controls within a search element since <search> "contains a set of form controls [...] related to performing a search".

The above features are available to the developer optionally, if needed. The original proposal lacks these features and developers have to work around with a nesting pattern that contradicts the common sense expectation, leading to a steeper learning curve, errors and a different a11y tree, that brings up long-dormant bugs.

With these considerations it is unreasonable to restrict the <search> element to <div> semantics and exclude probably the most common usage. Doing so would have negative effects in the long term.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment