Make the search field placement consistent on small screens and add toggle button into toolbar

[oglekler]

Right now Media library on small screens has search field on top, but it deteriorates the Toolbar, on the other hand Posts search is placed underneath of the posts list with forced positioning, and you need to scroll down to search something even if in all other use cases it is always on top of the page and results are underneath the search field. I am suggesting to adjust search appearance and add toggle button. It can remember its state for people who use it often, or can be toggled in Screen options.

[oglekler]

Proposal for Posts search

[oglekler]

Proposal for Media Library search

[oglekler]

Related ticket: #57948

[joedolson]

I think this would be a nice, simple enhancement. Related to #31818.

[oglekler]

Hi! @mr-cariol,
you wrote that you didn't manage to finish it, but possibly you can write here your ideas where and what should be done. Will be great, if you will be able to share a working patch, even if it is not perfect.

Thank you 🙏

[sabernhardt]

I would prefer not to add a toggle button to expand/collapse. Search fields probably should be as noticeable as the filtering links.

The plugins search forms and Media Library's grid mode even update results as you type instead of when clicking a Search button or pressing the Enter key. Introducing a button just to open the search form seems to go against that idea.

[joedolson]

Post search

[joedolson]

Media search (list view)

[joedolson]

Media search (grid view)

[joedolson]

Patch to adjust position and layout of search

[joedolson]

I agree with @sabernhardt that adding a toggle to access the search would reduce findability and add an extra step to performing the function. On mobile, since scrolling and pagination are a tedious way to find things, I'd consider search to be the primary finding aid, so let's not add barriers to it.

Patch:

1) Moves the search form back above the posts table. This is a fairly significant accessibility issue - the search form had been moved below the posts table using position: absolute;, so it had a mismatched keyboard sequence.

2) Adjusts mobile styles for search forms to be consistent.

3) Changes the media list view search form to match the structure of other views, with a submit button & label that indicates the post type.

4) Does *not* change the structure of the grid view. I'm not willing to remove the label in favor of a placeholder, as that would decrease the accessibility of the field. If we could add a submit button for the search, I'd remove the visible label, but that would be a significant rewrite of the media library search, and I'm not sure it's justified for this change.

[joedolson]

This is a small change that fixes an accessibility bug, so I'm marking it for commit. I'm also changing this from enhancement to bug, because the issue with the search form being visually at the bottom of the screen is a bug.

[joedolson]

In 56023:

Administration: Consistent positioning and size of search form.

Move the visual positioning of the posts search form into it's DOM position. Fixes an accessibility bug where the keyboard focus sequence did not match the visual order. Change the media search form in list view to match the format of other post views. Give search forms a consistent layout on mobile.

Props oglekler, sabernhardt, joedolson.
Fixes #57949.

[joedolson]

@oglekler Though this doesn't include the toggle suggestion, we can discuss that further; feel free to reopen for further discussion.

[kebbet]

Search field looks incorectly placed in Media table list between screen size 783 pixels and 1000 pixels. Missing padding/margin below search field. Looked OK before [56023]. Screenshot will be attached soon.

[kebbet]

Media table list after commit to trunk

[joedolson]

Ah; it's wider after adding the button. Will adjust.

[joedolson]

I think this also caused a problem in the media modal.

[joedolson]

Fix issues in media modal & intermediary breakpoint

[joedolson]

@kebbet if you have a chance to double check this fix, please do. Patch restores some of the removed CSS but constrains it to the modal view & adds a breakpoint override.

[kebbet]

The issue I experienced in the media table view is fixed with 57949.1.diff. Thanks for quick response!

[joedolson]

In 56026:

Administration: Fix visual regression in media search input.

Follow up to [r56023]. Improve handling of breakpoint between 782 and 1000px for media grid view & repair styles for media modal search input.

Props kebbet, joedolson.
Fixes #57949.

[archon810]

For those of us who are used to and prefer the search field being at the bottom on mobile (it takes up valuable space at the top now and is used infrequently), is there an easy way to roll this back? Or perhaps a setting for a top or bottom placement?