search

algolia / docsearch

:blue_book: The easiest way to add search to your documentation.
https://docsearch.algolia.com
MIT License
3.97k stars 384 forks source link

Invalid HTML is being generated #1491

Open brc-dd opened 2 years ago

brc-dd commented 2 years ago

Description

  1. Go to https://docsearch.algolia.com/ and open the search box.
  2. Here is a screenshot of the elements: image

According to the HTML5 spec, a button element cannot be inside an anchor tag. In fact, "there must be no interactive content descendant". Reference: https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element

Expected Behavior

Valid HTML to be generated.

shortcuts commented 2 years ago

Thanks for reporting! Indeed we shouldn't nest anchors or buttons.

I wonder what a good alternative of the current display could be, I see absolute buttons being one but not sure if it's also accessible, definitely needs investigation.

There is also other accessibility issues listed in #1370, tagging for visibility.

brc-dd commented 2 years ago

Yeah, I can't think of anything other than absolute buttons too. Another weird thing I noticed, Twitter is doing this:

div(role='option')
  Text here, dismiss button inside this:
  div(role='button') X

Though this is valid HTML, it's doing the same thing as DocSearch - both that option and button role divs are clickable.

patrickhlauke commented 1 year ago

As much as I hate those "ping" type comments ... wondering if there's any news/movement on this at all? Need any help on it?