Accessible instant action radio group
I'm creating a view mode "toggle" for my page that is pretty much exactly like view in whatever file explorer you use that will toggle between List and Tiles.
In the first 2 screenshots I can see that windows uses a select/menu and I'm not sure what macos version would be called. However, ideally I'd like my design to be 2 buttons next to each other, like what google docs have for
Align (screenshot 3) options but not in a dropdown, just 2 buttons (tiles/list) next to each other that function like radiobox group (are mutually exclusive).
The issue I'm having is that the buttons will have an immediate action and I came across Adrian Roselli's post 'Under-Engineered Toggles Too' where he says
Use <button> if: ... flipping the toggle has an immediate effect,https://adrianroselli.com/2019/08/under-engineered-toggles-too.html And I'm not sure if that applies here too. Any input is appreciated
Adrian Roselli
Under-Engineered Toggles Too
Updated Intro Whether you use a or for your toggle depends on a few factors: Use if: you can count on JavaScript being available, flipping the toggle has an immediate effect, the toggle will never have an indeterminate state. Continue reading this post. Use …
1 Reply
I found menuitemradio on mdn https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role
But I don't want the elements to be inside a menu :/
I also found toolbar https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/toolbar_role
But here it says
Only use the toolbar role to group 3 or more controls.And I only have 2 controls 🤔