jQuery UI autocomplete needs tweaking (again)

[helenyhou]

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.

It looks okay, until the screen is narrower.

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

Styling history from last release: #20584

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.

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.

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.

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

Patch works for me.

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