Keyboard-accessible resize

Matthias Zöchling wrote on August 28, 2024 at 17:54

In reply to: @mia@front-end.social, @zachleat@zachleat.com, @Jamessw@mastodon.cloud, @Edent@mastodon.social.

resize, and some A11Y fallbacks:
cssence.com/2022/pure-css-image-compare

James Stuckey Weber wrote on August 29, 2024 at 23:36

In reply to: @CSSence@mas.to.

Great write up! The animation on focus fallback is a great idea.

I’m pondering what UIs could be possible if we made the handle a stylable pseudo element and keyboard control.

Matthias Zöchling wrote on August 30, 2024 at 05:02

In reply to: @Jamessw@mastodon.cloud.

Good question. Given that dragging a resizeable element in a CSS grid adjusts the whole grid gives us possibilities we’ve last had in the olden days (which IIRC were also not keyboard-accessible):

<frameset cols="120, *">

How could it work? Like how an <input type="file">’s button is stylable via the ::file-selector-button?

James Stuckey Weber wrote on August 30, 2024 at 14:24

In reply to: @CSSence@mas.to.

Yeah, I think having it be a `part-like` pseudo element, like ::after, ::before, or ::file-selector-button would make sense. It could be interesting to have it anchored to the resized element, so you could do things like height: anchor-size(height); position-area: left to position and size it.