[split-button] pre-spec research

[yinonov]

split-Button - spec

A split button is a dual-function menu button that offers a default action as well as the possibility of choosing a different action by selecting from a set of alternatives.

Nielsen Norman Group

Moreover, split button can be specified as 2 different behaviors:

1. as defined by NNG 👆 set of alternatives set the main action
2. set of alternatives are eagerly invoked actions as presented here

Implementation details:

the button UI is composed of 2 buttons:

1. main action
2. popup trigger chevron like suffixed button

• should they both be included in the tabbing navigation order or align to roving pattern?

• Would focus alone on chevron suffixed button open the popup menu?

• Keep state of where the focus was if the menu closes and opens back?

Some of the points raised and details will really require 1 finite defined behavior mentioned above

argyleink/gui-challenges#63 already touches the topic

[css-meeting-bot]

The Open UI Community Group just discussed Split Button Accessibility.

The full IRC log of that discussion

<gregwhitworth> Topic: Split Button Accessibility
<gregwhitworth> github: https://github.com/openui/open-ui/issues/408
<bkardell_> gregwhitworth: effectively they are wanting to figure out the behaviour for split buttons -- buttons that have a main action on one side, and a dropdown on the other -- kind of looks like a complicated select menu
<bkardell_> gregwhitworth: basically, how should tabbing and focus work is the first question
<bkardell_> chrisdholt_: the strongest opinion I have is that it should be two tab stops - maybe two buttons.
<bkardell_> chrisdholt_: this is basically a componsite. In the investigation we did for FAST at MS, a lot of implementations reasons were because it was legacy rather than because they thought it was right
<hdv> q+ to say +1 for composite with two distinct stops and buttons
<bkardell_> chrisdholt_: some of them seemed to have issues in keyboarding and discoverability. Someone raised if focus group is related, maybe - but I think it is kind of different interactive element pieces - a button and a menu button which have clear patterns already
<gregwhitworth> ack hdv
<Zakim> hdv, you wanted to say +1 for composite with two distinct stops and buttons
<bkardell_> hdv: I agree it is kind of two pieces basically that are displayed together. It makes more sense to plug into the existing patterns on the web already - if you go outside that, we have to invent a lot
<masonf> q+
<bkardell_> gregwhitworth: I am curious about getting a proposal on this up sooner rather than later. I wouldn't say it is 'simple' but I'd be curious if the FAST team for example has a thing that would be pretty easy to convert into a proposal we could talk about
<gregwhitworth> ack q
<bkardell_> masonf: is it two buttons or a button and a select menu... both appearancewise and semantically
<bkardell_> flackr: i think it doesn't have to be that
<bkardell_> gregwhitworth: that's why I was saying there are variants, normally this would be in a menu scenario but is that thing more like a select menu or a select ...
<flackr> q+
<bkardell_> chrisdholt_: more often when I am seeing a select used in that way it is not intending to be a form element. A lot of the ones we see are more of like a traditional menu/menubutton relationship - or at least that is the intent. There could totally be other cases
<gregwhitworth> ack masonf
<gregwhitworth> ack flackr
<bkardell_> chrisdholt_: one of the reasons we haven't built this is because it might be solvable with just some css - research seems useful
<bkardell_> flackr: it could be annoying if you have a lot of these buttons where you had a lot of these buttons each with two tab stops - but I agree with the concern that there is not an obvious seeming way to make that interaction work - one way would be to borrow from something like checkbox
<bkardell_> s/checkbox/radio
<bkardell_> gregwhitworth: this is why I suggested there might be a relationship with focusgroup
<bkardell_> q+
<bkardell_> gregwhitworth: we could have smart defaults you can undo
<gregwhitworth> ack bkardell_
<bkardell_> chrisdholt_: when we discussed these in the context of focus group it definitely came up as a potential use case
<gregwhitworth> bkardell_: wanted to note that Travis agrees there is a relation with the toggle proposal and focus group which relates to the tabs proposal
<gregwhitworth> bkardell_: we need to work out unwinding some of these proposals
<gregwhitworth> bkardell_: had a side convo about this that's maybe worth thinking about word and spec
<gregwhitworth> bkardell_: possibly define without saying what activates it
<gregwhitworth> bkardell_: whether you indicate it via an attribute is different than specifying a focus group definition
<bkardell_> scribenick: bkardell_
<bkardell_> gregwhitworth: I will ping that person and see if they have interst in moving foward with research for splitbuttons... it would be interesting to keep us updated if something happens in that discussion
<bkardell_> gregwhitworth: I would also be interested in hearing more about where that spec lives/will be - in openui

[yinonov]

Hot topic nowadays. For starters, is it safe to say that the discussion clearly sees the popup options as setting the main action and not immediately invoke an action?

[chrisdholt]

Got topic nowadays. For starters, is it safe to say that the discussion clearly sees the popup options as setting the main action and not immediately invoke an action?

I’d probably expect research to reveal that. I will note, that isn’t the pattern I’ve most commonly seen. I typically see these as a primary action and then alternate/secondary actions which can be taken/invoked. I think research will be a good place to initially validate these kinds of assumptions.

[github-actions[bot]]

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.

[rajsite]

Are there established patterns for the aria of split buttons today in web? It does not look like there is an existing aria pattern: https://github.com/w3c/aria-practices/issues/2316 But curious if design systems have a common convention that works well with users.

[chrisdholt]

Are there established patterns for the aria of split buttons today in web? It does not look like there is an existing aria pattern: w3c/aria-practices#2316 But curious if design systems have a common convention that works well with users.

I don’t think this has any common pattern, but I’m a big proponent that these are TWO buttons and this two tab stops. Button has a standard element and pattern, split button is a layout that logically and presentationally groups these, often a menu button (pattern) and a button (pattern).. I’m pretty averse to the “one tab stop” approach because it implies two buttons can be one.

(There’s my strong opinion for the day 😁)

[github-actions[bot]]

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.