Add a treatment for consistent appearance of content on focus
This issue arose from https://github.com/primer/react/pull/2593.
The SplitPageLayout component uses a small form with an input and submit button to allow for adjusting the pane width without the need for pointer input. This form is visually hidden, meaning that in its current implementation that only screen reader users will be aware of its presence.
Controls such as this need to also be visually apparent on focus. While only the SplitPageLayout component has this need right now, I anticipate other components needing similar functionality—and therefore a consistent visual treatment—as our Primer accessibility work continues.
Currently there is no one set way to handle this kind of content. The closest examples I am aware of are our Skip to main content link and our dashboard favorites reordering functionality:
I am thinking that this is worth codifying as something that can be used as a subcomponent for other components, to help ensure a consistent, accessible experience that feels like it is a part of Primer. We'll likely want something along the lines of how our Dialog component looks.