Invalid markup in admin bar search

[scribu]

Having a <div> tag inside an <a> tag is invalid HTML:

<a href="#" tabindex="1">
<div id="adminbarsearch-wrap">
<form id="adminbarsearch" method="get" action="http://lomo.dev">
<input id="adminbar-search" class="adminbar-input" type="text" onclick="return false;" placeholder="Căutare" maxlength="150" value="" tabindex="1" name="s">
<input class="adminbar-button" type="submit" value="Căutare">
</form>
</div>
</a>

The <a> tag was not present in WP 3.2.

[nacin]

I imagine this was added to ensure tabbing accessibility. Probably another way to do it, but it gets the job done. In fairness, it is valid HTML5.

[ocean90]

Right, it's valid HTML5, but looks ugly. See also #19149 where it is a problem.

Would be nice to add items without links, related: #15519.

[scribu]

I imagine this was added to ensure tabbing accessibility.

Tabbing works just fine without it.

PS: When did we abandon the "tabindex is evil" mantra?

[scribu]

Re tabbing: #19088

[ocean90]

I imagine this was added to ensure tabbing accessibility.

It'S more the API,it doesn't work without. tabindex comes after the new search implementation, see #19088.

[azaozz]

Yes, tabindex is evil... Until you need it :)

The browsers follow the html layout when "tabbing", the admin bar is at the bottom of the html but is shown at the top of the screen.

[nacin]

Replying to azaozz:

Yes, tabindex is evil... Until you need it :)

The browsers follow the html layout when "tabbing", the admin bar is at the bottom of the html but is shown at the top of the screen.

Tabbing through it at the bottom might be a better approach. (Often, menus are at the bottom anyway for accessibility reasons.) It needs to be accessible, but chances are people would rather tab through the page first.

[azaozz]

Replying to nacin:

Tabbing through it at the bottom might be a better approach.

Tried that too but seemed "unnatural". The admin menu's HTML is at the top so tabbing goes through it first (there are tabindex-es there that aren't needed). Then tabbing goes through the whole page that may be quite long, for example the comments admin screen, and then it returns to the top for the admin bar.

Of course we can remove the tabindex attribs and let it follow that path if needed.

[azaozz]

HTML 5.0 allows blocks inside <a> tags, but doesn't seem <form> or <input> is allowed. Also some browsers seem to handle that by auto-correcting the html, splitting the link and wrapping each inline element inside the block with an <a>.

In any case having an <input> inside a link confuses the browser when tabbing/setting focus.

[koopersmith]

In [19328]:

Allow linkless items in the admin bar. Improve non-jQuery admin bar tabbing. fixes #19277, #19149, #19164, #15519. see #18197, #19088.