-
Notifications
You must be signed in to change notification settings - Fork 231
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add styling for site search input 'flowing' into dropdown #4220
base: main
Are you sure you want to change the base?
Conversation
✅ You can preview this change here:
To edit notification comments on pull requests, go to your Netlify site configuration. |
67d59bd
to
001dc84
Compare
001dc84
to
f40b221
Compare
Chat about this with @hazalarpalikli off-github and unfortunately I haven't been able to move the scrollbar down to line up with the first item. It's really hard to 'move' the scrollable area of an element whilst still maintaining just one element. I've tried a few things like a white box shadow or a border to emulate white space above the menu but the tricky part is always getting the We could resolve this by using a menu 'wrapper' element with some top padding that would contain the In some more positive news, I've managed to resolve @selfthinker's bug. As far as I'm concerned this is now ready for accessibility reviewwhen @selfthinker has time, then it'll be ready for code review. |
I LOVE THIS!! |
Means that users who are very zoomed in can see that there is something below the input to interact with
Update: I spotted another visual issue. Because the separator was positioned as a block element inside the menu, it disappears when you scroll down: Good news though is that in solving this, I managed to solve @hazalarpalikli's scrollbar bug after all 🎉 The separator is now a pseudo element of the wrapper psotioned at the bottom of the input, only visible via Speaking of that, I've also added some space between the first list item and the input using a top border that I adjust via I've also done some very quick browser testing in Chrome and Safari macOS and its looking good there too. |
f40b221
to
65a9f5a
Compare
Change
Adds a visual cue to the site search so that users whre zoomed into the input know that there is a dialog below that they may be able to interact with. When a dialog is displayed, the input will be given 'bottomless' styling to remove it's bottom border, making it visually flow into the menu and drawing the eye down.
This applies any time there's a visible drop down, so for any number of results and when the 'no results' dialog displays.
Fixes #4015
Visual changes
Notes
This PR follows alphagov/accessible-autocomplete#753. See alphagov/accessible-autocomplete#753 (comment) for testing notes from that PR.
There's a little gap between the fake
:before
border at the top of the dropdown and the first item's top edge when highlighted. This is becuase we found through testing that some forced colour modes set the colour of the:before
element to be the same ass the background colour of the dropdown, effectively erasing it. If the top item is at the very top of the dropdown, right under the input, and is highlighted, it looks like the bottom border of the input making this effect even more subtle. The gap helps with drawing the eye down.