csswg-drafts (original) (raw)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Description

Use cases & requests from web developers

https://twitter.com/ned/status/1051798190951940096

button { display: inline; } should work.
Yes, I want to make buttons that wrap lines like a normal inline elements, but retain the semantics and accessibility of a button.
that's the point: it should be able to just flow its contents, it's crucial for action items inserted in text as pseudolinks. For now we have to hack around with <span role=button tabindex=0 onkeydown=handleEnterOrSpace(event) onclick=handleClick(event)> or just use <a href=#>
https://twitter.com/micahgodbolt/status/1047218367432544257

So, what if you have some long text in a paragraph where on click, it performs an action (not an href)

You'd use a <button> right?

Okay, then how would you make that button LOOK like text in a paragraph.

https://codepen.io/micahgodbolt/pen/zmrxQd
https://www.scottohara.me/blog/2018/10/03/unbutton-buttons.html
This post discusses the problem, and explores styling buttons with display: contents but notes that it loses the ability to receive keyboard focus and there's no accessibility node so it's not exposed as a button to screen readers.

Defining layout model for buttons

In whatwg/html#4081 I'm working on specifying the layout model that buttons use. Currently my working draft for this is part of https://docs.google.com/document/d/1FE5YIoirPKxYbbnMd8kS6w39M8bzLTl5tf4wwOxR1wc/edit?usp=sharing

In particular, buttons have an inner anonymous box that is a block formatting context, and I think this is the cause of the inability to make buttons be inline.

Proposal

One way to solve this could be to add a pseudo-element to target the anonymous box, so that web developers can set it to 'display: inilne'. The button would still be focusable and be exposed the same in the accessibility tree.

Thoughts?

cc @tkent-google @MatsPalmgren @hober @FremyCompany