WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#19164 closed defect (bug) (fixed)

Invalid markup in admin bar search

Reported by: scribu Owned by: koopersmith
Milestone: 3.3 Priority: normal
Severity: normal Version: 3.3
Component: Toolbar Keywords: has-patch
Focuses: Cc:

Description

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.

Attachments (1)

19164.diff (733 bytes) - added by scribu 3 years ago.

Download all attachments as: .zip

Change History (12)

comment:1 @nacin3 years ago

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.

comment:2 @ocean903 years ago

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.

@scribu3 years ago

comment:3 @scribu3 years ago

  • Keywords has-patch added

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?

comment:4 @scribu3 years ago

Re tabbing: #19088

comment:5 @ocean903 years ago

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.

comment:6 follow-up: @azaozz3 years ago

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.

comment:7 in reply to: ↑ 6 ; follow-up: @nacin3 years ago

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.

comment:8 in reply to: ↑ 7 @azaozz3 years ago

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.

comment:9 @azaozz3 years ago

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.

comment:10 @ryan3 years ago

  • Component changed from Administration to Admin Bar

comment:11 @koopersmith3 years ago

  • Owner set to koopersmith
  • Resolution set to fixed
  • Status changed from new to closed

In [19328]:

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

Note: See TracTickets for help on using tickets.