Make WordPress Core

Opened 12 months ago

Closed 8 months ago

Last modified 6 months ago

#57949 closed defect (bug) (fixed)

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

Reported by: oglekler's profile oglekler Owned by: joedolson's profile joedolson
Milestone: 6.3 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots has-patch
Focuses: ui, accessibility Cc:

Description

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.

Attachments (10)

Current-search-appearance.png (44.9 KB) - added by oglekler 12 months ago.
Posts-Search.png (47.9 KB) - added by oglekler 12 months ago.
Proposal for Posts search
Media-Library-Search.png (22.2 KB) - added by oglekler 12 months ago.
Proposal for Media Library search
57949-posts-search.jpg (19.7 KB) - added by joedolson 8 months ago.
Post search
57949-media-list-search.jpg (25.1 KB) - added by joedolson 8 months ago.
Media search (list view)
57949-media-grid-search.jpg (25.6 KB) - added by joedolson 8 months ago.
Media search (grid view)
57949.diff (3.7 KB) - added by joedolson 8 months ago.
Patch to adjust position and layout of search
57949-after-commit-to-trunk.jpg (68.3 KB) - added by kebbet 8 months ago.
Media table list after commit to trunk
media-modal-search.jpg (8.5 KB) - added by joedolson 8 months ago.
57949.1.diff (1.8 KB) - added by joedolson 8 months ago.
Fix issues in media modal & intermediary breakpoint

Download all attachments as: .zip

Change History (34)

@oglekler
12 months ago

Proposal for Posts search

@oglekler
12 months ago

Proposal for Media Library search

#1 @sabernhardt
12 months ago

  • Component changed from Toolbar to Administration

This ticket was mentioned in Slack in #core-test by oglekler. View the logs.


12 months ago

#3 @oglekler
12 months ago

  • Keywords has-screenshots needs-design-feedback added

Related ticket: #57948

#4 @oglekler
12 months ago

  • Focuses accessibility added

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


11 months ago

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


11 months ago

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


10 months ago

#8 @joedolson
10 months ago

  • Milestone changed from Awaiting Review to 6.3
  • Owner set to joedolson
  • Status changed from new to accepted

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

This ticket was mentioned in Slack in #core by oglekler. View the logs.


9 months ago

This ticket was mentioned in Slack in #core by mr-cariol. View the logs.


9 months ago

#11 @oglekler
9 months ago

  • Keywords needs-patch added

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 🙏

This ticket was mentioned in Slack in #accessibility by sabernhardt. View the logs.


8 months ago

#13 @sabernhardt
8 months ago

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
8 months ago

Post search

@joedolson
8 months ago

Media search (list view)

@joedolson
8 months ago

Media search (grid view)

@joedolson
8 months ago

Patch to adjust position and layout of search

#14 @joedolson
8 months ago

  • Keywords has-patch added; needs-patch removed

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.

#15 @joedolson
8 months ago

  • Keywords commit added; needs-design-feedback removed
  • Type changed from enhancement to defect (bug)

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.

#16 @joedolson
8 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

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.

#17 @joedolson
8 months ago

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

#18 @kebbet
8 months ago

  • Keywords needs-patch added; has-patch commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

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
8 months ago

Media table list after commit to trunk

#19 @joedolson
8 months ago

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

#20 @joedolson
8 months ago

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

@joedolson
8 months ago

Fix issues in media modal & intermediary breakpoint

#21 @joedolson
8 months ago

@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.

#22 @kebbet
8 months ago

  • Keywords has-patch added; needs-patch removed

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

#23 @joedolson
8 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

#24 @archon810
6 months ago

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?

Note: See TracTickets for help on using tickets.