The search box can become too long since it adjusts to the viewport of the browser window. On a 36" monitor and the browser window extended to the maximum of the screen you are able to enter up to 472 characters (and more). From a readability and cognition standpoint the line length shouldnt exceed ~80 characters (WCAG2.2. SC 1.4.8). In a similar vein was the recommendation from the folks at Smashing Magazine in the Search UX webinar. You should aim for 60+ characters on desktop and around 45 characters on mobile for the search box width.
Reduce the maximum width of the search field or make it even a fixed width?
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes, plain diff MR !481
Comments
Comment #4
tabestan commentedThis proposed solution reduces the search box maxlength to 80 characters on desktop and 45 characters on screens smaller than 768px.
Comment #5
r.aubin commented@rkoller, was the intent of this issue to reduce the allowable character length of this input or the visible width of the input field?
Adjusting the width of the input based on viewport size so it doesn't end up really wide would be nice, but is a separate thing from the allowable input character length. Also, the WCAG section you referenced pertains to blocks of text, not form inputs, so I don't think that should apply here and the input's maxLength shouldn't be different for users with different viewport sizes.
The open MR that @Tabestan put together addresses just the maxLength not the input's physical size.
Comment #7
gauravvvv commentedI have updated the physical width of the search box for desktop and mobile device as 80ch and 45ch respectively for desktop and mobile devices.
Comment #8
kanchan bhogade commentedMR is failing and in the Issue summary also MR is "Open Failed Pipeline"
Moving ti "needs work"
Comment #9
gauravvvv commentedMR is passing the tests now.
Comment #10
zetagraph commented@tabestan, @rkoller we are rearranging things visually in this issue
The search box is going to always span the full width of the browser window. There is no need to limit the box width or the character count as far as I can tell.
CC: @raubin, @gauravvvv
Comment #11
chrisfromredfinPostponing this pending #3318817: Improve the categories filter type in context to the rest of the filter component ui