-
Notifications
You must be signed in to change notification settings - Fork 191
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[select] <selectedoption for=id>
as an alternative to split buttons and <button type=popover>
#1063
Comments
thanks for raising this joey as this is exactly the direction i was hoping for when i proposed the idea in the discussions we've been having about select. if selectedoption can be associated with a it also makes it a lot easier for browsers to implement, as the select's mappings don't need to potentially be variable to account for extra content presented in the page along with the select's button part for invoking the popup - it also then means that a browser is off the hook for having to determine "is this a split button, and if so, do keyboard behavior as a single tab stop - or is this not a split button and just happens to be two buttons in this select container, and thus two separate tab stops would be expected... etc." this direction simplifies a lot, and is not an unreasonable expectation to put on developers - particularly since developers that were making well supported accessible split buttons (and other composite custom controls) would likely be already following this sort of practice of having the controls be siblings, rather than nested, anyway. |
One more thing I forgot to clarify - if you put a <select>
<button>
<selectedoption></selectedoption>
</button>
...
</select> |
The Open UI Community Group just discussed
The full IRC log of that discussion<gregwhitworth> jarhar: I mentioned this idea that I wrote about some a11y stuff<gregwhitworth> jarhar: the idea is that we have support for split button and it will slot in numerous items and if it has type=popover is that it will denote which one toggles the popover <masonf> q+ <gregwhitworth> jarhar: the idea that I see is where you have a button that opens the select within another button <gregwhitworth> jarhar: the selectedoption element just looks up its ancestor tree to find out where to get its selected option from <gregwhitworth> jarhar: if we have a for attribute we can have the selectedoption element get its content from somewhere else <gregwhitworth> jarhar: you can then have the two buttons and it provides the improvements in the implementation and we don't have a new button type attribute and when you want to put the selectedoption elsewhere <gregwhitworth> masonf: I love the idea <gregwhitworth> masonf: split buttons are a real thing that we need to support <gregwhitworth> masonf: I like not having two buttons that are magical <bkardell_> yeah that was my immediate thought too <gregwhitworth> masonf: one comment I would make, actually from Anne, one tweak is rather than having an attribute that is on select that gets the selectedoption element <scotto6> q+ <gregwhitworth> masonf: it avoids having numerous elements around the document <gregwhitworth> ack masonf <jarhar> q? <gregwhitworth> masonf: it gets it so that implementation is easier to look it up due to referring in the other direction <gregwhitworth> scotto: I was going to thank jarhar for writing this up and the reversal makes a lot of sense so thank you for the idea Anne <gregwhitworth> ack scotto <masonf> q+ <gregwhitworth> jarhar: I still kind of like it being on selectedoption having for <scotto6> q+ <gregwhitworth> jarhar: I think that updating multiple other selectedoption elements wouldn't be too complicated versus one <gregwhitworth> jarhar: I like the idea being able to quickly looking it up on the select but in general I'm happy with either of these verses our current approach <gregwhitworth> jarhar: do you have any idea of what the attribute on the select would be called? <gregwhitworth> ack masonf <gregwhitworth> masonf: naming wise, I think we should pick a bad name and people will change it to something good :) <gregwhitworth> masonf: one question I was on the queue to ask is about usecases <gregwhitworth> masonf: in the inverted case you only have one selectedoption you can refer to but do you only allow just those two? <jarhar> q? <gregwhitworth> jarhar: if we do an inverted style where you can only specify one then you shouldn't support any selectedoption that are inside of the select or else we'll end up with a list of them that we'll have to clone stuff into <gregwhitworth> masonf: to make it easier to comment on, my proposal would be to support both but it would just be two <gregwhitworth> scotto: the only thing I was going to say, for the labele element on a form control... could it not be that there are multiple selected options in the DOM that the browser can be "no more after that" <gregwhitworth> scotto: the browser could treat it that way but it won't render it all over the place and stops cloning after that except for inside of the select element <gregwhitworth> q+ <gregwhitworth> ack scotto <gregwhitworth> scotto: for the label for it can only have one id it won't label every single one that has that ID it will only label the first one <gregwhitworth> mfreed: if you have two labels with one control does that still work? <gregwhitworth> scotto: you have to concat them together to make the acc name <gregwhitworth> scotto: it wouldn't be cloning them into separate options. <masonf> q+ <gregwhitworth> ack gregwhitworth <gregwhitworth> masonf: my only comment was to scotto thing. We're moving towards agreement of at max two, one outside and one inside <jarhar> q+ <gregwhitworth> masonf: it seems a bit funny to support <n> selectedoptions but the first one works where the other way around there is only one and I think it feels cleaner <gregwhitworth> ack masonf <gregwhitworth> jarhar: <gregwhitworth> jarhar: I thought of another reason that the inversion thing is good is that we can incrementally introduce this on other elements <jarhar> proposed resolution: add the selectedoption attribute to the select element which is an idref to a selectedoption element which lives outside of the select element as a replacement for multiple buttons in select and type=popover <gregwhitworth> jarhar: if we want to have an input with a selected option and could be feature detected on IDL <masonf> Proposed resolution: add an attribute called `myselectedoptionelementis=foo` to select, which can point to a single <selectedoption> element to update. The first contained <selectedoption> would also be updated. <gregwhitworth> masonf: it differs only in that it has a named attribute and outlines that the first child of the selectedoption will be updated <masonf> Proposed resolution: add an attribute called `selectedoptionelement=foo` to select, which can point to a single <selectedoption> element to update. The first contained <selectedoption> would also be updated. <jarhar> +1 <bkardell_> lgtm <dandclark> +1 <keithamus> +1 <scotto6> +1 <dbaron> (I was the code reviewer who told Joey that it was important to explicitly add a test that we *don't* ever ship 'appearance: bikeshed'.) <masonf> RESOLVED: add an attribute called `selectedoptionelement=foo` to select, which can point to a single <selectedoption> element to update. The first <selectedoption> contained within the <select> would also be updated. |
This was resolved here: openui#1063 (comment)
I created an explainer PR for this here: #1071 |
Maybe the name would be better changed to |
* Add selectedoptionelement attribute to select explainer This was resolved here: #1063 (comment) * update example
Instead of supporting the "split button" use case for selects by slotting multiple button elements and having the type=popover attribute to differentiate them, we will now support them with the selectedoptionelement attribute. This was decided here: openui/open-ui#1063 The type=popover behavior will automatically be applied to <button>s which are children of <select>. Change-Id: Ie43fcec33453e81742679272a4ca6cd892c4a886
Instead of supporting the "split button" use case for selects by slotting multiple button elements and having the type=popover attribute to differentiate them, we will now support them with the selectedoptionelement attribute. This was decided here: openui/open-ui#1063 The type=popover behavior will automatically be applied to <button>s which are children of <select>. Change-Id: Ie43fcec33453e81742679272a4ca6cd892c4a886 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5710709 Commit-Queue: Joey Arhar <jarhar@chromium.org> Reviewed-by: David Baron <dbaron@chromium.org> Cr-Commit-Position: refs/heads/main@{#1338166}
Instead of supporting the "split button" use case for selects by slotting multiple button elements and having the type=popover attribute to differentiate them, we will now support them with the selectedoptionelement attribute. This was decided here: openui/open-ui#1063 The type=popover behavior will automatically be applied to <button>s which are children of <select>. Change-Id: Ie43fcec33453e81742679272a4ca6cd892c4a886 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5710709 Commit-Queue: Joey Arhar <jarhar@chromium.org> Reviewed-by: David Baron <dbaron@chromium.org> Cr-Commit-Position: refs/heads/main@{#1338166}
Instead of supporting the "split button" use case for selects by slotting multiple button elements and having the type=popover attribute to differentiate them, we will now support them with the selectedoptionelement attribute. This was decided here: openui/open-ui#1063 The type=popover behavior will automatically be applied to <button>s which are children of <select>. Change-Id: Ie43fcec33453e81742679272a4ca6cd892c4a886 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5710709 Commit-Queue: Joey Arhar <jarhar@chromium.org> Reviewed-by: David Baron <dbaron@chromium.org> Cr-Commit-Position: refs/heads/main@{#1338166}
This was resolved here: openui/open-ui#1063 Change-Id: Ie7f464b8cbacbe9614a2e7d34ccf1805a93f3bbd
This was resolved here: openui/open-ui#1063 Change-Id: Ie7f464b8cbacbe9614a2e7d34ccf1805a93f3bbd Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5763175 Commit-Queue: Joey Arhar <jarhar@chromium.org> Reviewed-by: Mason Freed <masonf@chromium.org> Cr-Commit-Position: refs/heads/main@{#1339783}
This was resolved here: openui/open-ui#1063 Change-Id: Ie7f464b8cbacbe9614a2e7d34ccf1805a93f3bbd Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5763175 Commit-Queue: Joey Arhar <jarhar@chromium.org> Reviewed-by: Mason Freed <masonf@chromium.org> Cr-Commit-Position: refs/heads/main@{#1339783}
…=testonly Automatic update from web-platform-tests Remove button type=popover for select Instead of supporting the "split button" use case for selects by slotting multiple button elements and having the type=popover attribute to differentiate them, we will now support them with the selectedoptionelement attribute. This was decided here: openui/open-ui#1063 The type=popover behavior will automatically be applied to <button>s which are children of <select>. Change-Id: Ie43fcec33453e81742679272a4ca6cd892c4a886 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5710709 Commit-Queue: Joey Arhar <jarhar@chromium.org> Reviewed-by: David Baron <dbaron@chromium.org> Cr-Commit-Position: refs/heads/main@{#1338166} -- wpt-commits: a290a0cedac4af6ffb64f4816c6fa98a623d43d4 wpt-pr: 47488
…e, a=testonly Automatic update from web-platform-tests Implement selectedoptionelement attribute This was resolved here: openui/open-ui#1063 Change-Id: Ie7f464b8cbacbe9614a2e7d34ccf1805a93f3bbd Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5763175 Commit-Queue: Joey Arhar <jarhar@chromium.org> Reviewed-by: Mason Freed <masonf@chromium.org> Cr-Commit-Position: refs/heads/main@{#1339783} -- wpt-commits: e8ac9bf69400e3a634aa592633c4fb51bd7fda6f wpt-pr: 47551
…=testonly Automatic update from web-platform-tests Remove button type=popover for select Instead of supporting the "split button" use case for selects by slotting multiple button elements and having the type=popover attribute to differentiate them, we will now support them with the selectedoptionelement attribute. This was decided here: openui/open-ui#1063 The type=popover behavior will automatically be applied to <button>s which are children of <select>. Change-Id: Ie43fcec33453e81742679272a4ca6cd892c4a886 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5710709 Commit-Queue: Joey Arhar <jarhar@chromium.org> Reviewed-by: David Baron <dbaron@chromium.org> Cr-Commit-Position: refs/heads/main@{#1338166} -- wpt-commits: a290a0cedac4af6ffb64f4816c6fa98a623d43d4 wpt-pr: 47488
…e, a=testonly Automatic update from web-platform-tests Implement selectedoptionelement attribute This was resolved here: openui/open-ui#1063 Change-Id: Ie7f464b8cbacbe9614a2e7d34ccf1805a93f3bbd Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5763175 Commit-Queue: Joey Arhar <jarhar@chromium.org> Reviewed-by: Mason Freed <masonf@chromium.org> Cr-Commit-Position: refs/heads/main@{#1339783} -- wpt-commits: e8ac9bf69400e3a634aa592633c4fb51bd7fda6f wpt-pr: 47551
…=testonly Automatic update from web-platform-tests Remove button type=popover for select Instead of supporting the "split button" use case for selects by slotting multiple button elements and having the type=popover attribute to differentiate them, we will now support them with the selectedoptionelement attribute. This was decided here: openui/open-ui#1063 The type=popover behavior will automatically be applied to <button>s which are children of <select>. Change-Id: Ie43fcec33453e81742679272a4ca6cd892c4a886 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5710709 Commit-Queue: Joey Arhar <jarhar@chromium.org> Reviewed-by: David Baron <dbaron@chromium.org> Cr-Commit-Position: refs/heads/main@{#1338166} -- wpt-commits: a290a0cedac4af6ffb64f4816c6fa98a623d43d4 wpt-pr: 47488
…e, a=testonly Automatic update from web-platform-tests Implement selectedoptionelement attribute This was resolved here: openui/open-ui#1063 Change-Id: Ie7f464b8cbacbe9614a2e7d34ccf1805a93f3bbd Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5763175 Commit-Queue: Joey Arhar <jarhar@chromium.org> Reviewed-by: Mason Freed <masonf@chromium.org> Cr-Commit-Position: refs/heads/main@{#1339783} -- wpt-commits: e8ac9bf69400e3a634aa592633c4fb51bd7fda6f wpt-pr: 47551
…e, a=testonly Automatic update from web-platform-tests Implement selectedoptionelement attribute This was resolved here: openui/open-ui#1063 Change-Id: Ie7f464b8cbacbe9614a2e7d34ccf1805a93f3bbd Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5763175 Commit-Queue: Joey Arhar <jarharchromium.org> Reviewed-by: Mason Freed <masonfchromium.org> Cr-Commit-Position: refs/heads/main{#1339783} -- wpt-commits: e8ac9bf69400e3a634aa592633c4fb51bd7fda6f wpt-pr: 47551 UltraBlame original commit: 3e5ca2209a1faf47be352c5060f6890ab1748372
…e, a=testonly Automatic update from web-platform-tests Implement selectedoptionelement attribute This was resolved here: openui/open-ui#1063 Change-Id: Ie7f464b8cbacbe9614a2e7d34ccf1805a93f3bbd Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5763175 Commit-Queue: Joey Arhar <jarharchromium.org> Reviewed-by: Mason Freed <masonfchromium.org> Cr-Commit-Position: refs/heads/main{#1339783} -- wpt-commits: e8ac9bf69400e3a634aa592633c4fb51bd7fda6f wpt-pr: 47551 UltraBlame original commit: 3e5ca2209a1faf47be352c5060f6890ab1748372
Considering the future implementation of |
Our latest idea is that in order to support "split buttons" where one button has the
<selectedoption>
and does something author defined and another button actually opens the popover, we support slotting multiple<button>
s inside a<select>
into the in-page portion and signify which button opens the popover with<button type=popover>
.Instead of doing this, we could make
<selectedoption>
capable of living outside of the<select>
and link them together by supporting the existingfor
attribute on<selectedoption>
. This has some benefits:<selectedoption>
inside a<button>
.<button type=popover>
attribute and complicated algorithms to figure out which button(s) open the popover, which I am still trying to figure out how to implement.type=popover
attribute.Current way of making a split button:
What I am proposing:
In cases where the authors want the layout boxes of the two buttons to be siblings, they can put display:contents on the
<select>
. I think this also might be worth doing by default in the UA stylesheet.The text was updated successfully, but these errors were encountered: