WordPress.org

Make WordPress Core

Opened 8 years ago

Closed 8 years ago

#22166 closed defect (bug) (fixed)

jQuery UI autocomplete needs tweaking (again)

Reported by: helenyhou Owned by: ryan
Milestone: 3.5 Priority: normal
Severity: normal Version: 3.5
Component: UI Keywords: has-patch
Focuses: Cc:

Description

Seems that the update to 1.9 has some side effects. The .ui-state-hover background change isn't working (haven't investigated why, might just be a matter of naming), and there is now some helpful text that appears beside the input.

http://f.cl.ly/items/1i0I1l1X38131g1u3m1Y/Screen%20Shot%202012-10-11%20at%2011.16.48%20AM.png

It looks okay, until the screen is narrower.

http://f.cl.ly/items/2F2z152a202D3u0W1D0J/Screen%20Shot%202012-10-11%20at%2011.18.38%20AM.png

Should probably figure out what to do with that, either styling or removing/hiding.

Attachments (1)

22166.diff (1.6 KB) - added by helenyhou 8 years ago.

Download all attachments as: .zip

Change History (8)

#1 @helenyhou
8 years ago

Styling history from last release: #20584

#2 @nacin
8 years ago

Per one of the jQuery UI developers, this is supposed to be hidden text. We need to update our style to match new structural CSS in the jQuery UI 1.9.0. This span has the class of ui-helper-hidden-accessible.

As also need to pass a messages option that is internationalized to the widget, see https://github.com/jquery/jquery-ui/commit/f4b2d7a4115814b64ff291e3518fe15f2dfbe390#L4R532. I'm working on JS-based plural forms for something koopersmith needs, so we can use that here.

@helenyhou
8 years ago

#3 @helenyhou
8 years ago

  • Keywords has-patch added; needs-patch removed

22166.diff adds .ui-helper-hidden-accessible to the same style block as .screen-reader-text, fixes the selector for the focus state, and changes the border color to match that of the new input focus styles. It looks a little weird in blue, but blue having gray border colors for inputs is a separate issue.

#4 @nacin
8 years ago

This .ui-helper-hidden-accessible class is already in wp-includes/css/jquery-ui-dialog.css. Assuming that we should *not* be including that CSS file here, then this change looks good.

#5 @helenyhou
8 years ago

Nope, no need for that file here. Reminds me of #18909 though.

#6 @sabreuse
8 years ago

Patch works for me.

#7 @ryan
8 years ago

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

In [22285]:

Update autocomplete CSS to make nice with jQuery UI 1.9. Give ui-helper-hidden-accessible the same treatment as screen-reader-text. Props helenyhou. fixes #22166

Note: See TracTickets for help on using tickets.