CSS Expanding Search: Keyboard Accessibility

[Cheffheid]

I'm not sure how I feel about the input box disappearing when keyboard focus moves from the input to the submit button while there is a query in the field. This is mainly going to be weird for people that use a keyboard to navigate, but can also still see what's going on on the screen.

In the best case scenario, it means you can't easily double check your search query before hitting submit (you can work around this by making sure before you tab over to the button, but still tedious if you don't expect this disappearing act to happen though).

Worst case scenario, a user gets flat out confused about what just happened and may not understand that hitting the submit button will still work regardless of the input being visible or not.

I don't have a good solution for this without the use of JS though, because a "previous sibling" selector doesn't really exist and changing the order of the markup is only going to make things worse. :(

[carrieforde]

Ah, see, this is why we have an accessibility expert. 😄

I need to stew on this a bit to figure out what we could do here. As you said, trying to do this without JS is a bit tricky.

Clearly, if you think of something, submit a PR!

[Cheffheid]

Just dropping some notes, before I miss my train of thought:

:focus-within would be perfect for this (thanks for the reminder on that @xBLADEx :)), but support is pretty shitty right now because it's still a work in progress (https://caniuse.com/#feat=css-focus-within).

Alternatively, I wonder if we can use required on the input and then abuse :valid to "check" if it has a value. This will effectively prevent empty search queries too, and may still cause the same issue depending on the browser implementation of required.

Chrome seems to be okay with moving focus back to the input when submit is hit while the field is left empty (effectively unhiding it). I'm going to need to run a few more tests on other browsers to see what happens. And also see how screen readers announce the error when one is used, if at all.

Some quick pens:
https://codepen.io/Cheffheid/pen/zzZmyV (focus-within)

https://codepen.io/Cheffheid/pen/MopPNL (valid abuse)