docsearch icon indicating copy to clipboard operation
docsearch copied to clipboard

Published 20 hours ago • verified publisher icon algolia

Invalid HTML is being generated

Open brc-dd opened this issue 3 years ago • 3 comments
trafficstars

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.

brc-dd avatar Aug 08 '22 08:08 brc-dd

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.

shortcuts avatar Aug 08 '22 22:08 shortcuts

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.

brc-dd avatar Aug 14 '22 17:08 brc-dd

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?

patrickhlauke avatar Nov 17 '22 08:11 patrickhlauke