I have made menu items all buttons (instead of divs 😬) so they're nice and focusable etc.
But now I have what looks a little like a select, or a listbox, which is tabbable, but not navigable via arrow keys, and not allowing option choice via typing letters.
I would eventually consider using Adobe react-aria Select for it - I'm not sure I can do that on this pass.
But a menu/listy-looking thing that isn't navigable similarly to a <select> isn't great, right?
@sarajw I guess it depends on context and expectations for the widget:
If the widget is an input in a form, I would expose combobox semantics and implement the corresponding keyboard support. Or use a select because it’s a lot easier.
If the items in the dropdown part are links, I would see if I can get away with a basic disclosure pattern. It can have advanced keyboard functionality with Arrow keys and Home and End to make navigation through it easier. But doesn’t have to.
@mvsde In this case it's a choice of date ranges, or time ranges.
On choosing one, the charts and values in the page change to match the chosen date range.
I feel like it does kind of want to be a select. But it's complicated by one of the options being 'custom' which when activated, widens the whole menu thing to include a calendar where you can pick a date range.
@mvsde Yeeaaahhh. Of course I'm trying to leave things as much as they are as I can, or it goes into another design round trip which would take forever.
Ok, it now is still tabbable, but also navigable with arrows just as it looks like it should be. I wonder if it's a problem to have both, or if I should nix the options from the tabbing order. Hm.
@sarajw you want one or the other, not both. if it's indeed a menu-like interface (with menu semantics), then you should definitely implement roving tabindex.
@sarajw i'm confused, is it a menu or not? adding arrow key navigation without menu semantics is definitely the wrong move (unless you have other semantics, like listbox/option).
@yatil is correct in that most websites do not need role=menu, but it sounds like in your case you are literally building a menu. and most dynamic websites (which make up a small portion of all websites) do have a real need for a menu pattern.
@hi_mayank@sarajw I always recommend to not use menu unless it is a menu like file/edit/view/… The whole semantics are weird, roving tabindex is not the best UX for keyboard users who don’t use screen readers, and you limit yourself in what you can do in the menu.
Simple disclosures/comboboxes (opening dialogs) go a long way.
(But of course I can’t comment on this specific case.)
@yatil@hi_mayank when I'm back at the work computer tomorrow is it OK if I send you both a screenshot?
You're welcome to tell me to buzz off, as I'm getting dangerously into work territory where they should start paying. I'm asking here because I'm curious and want to know this stuff for my own learning too.
Yes it probably is a menu. I feel like it's visually like a select, but yes it's not in a form. It's a list of date ranges for a page full of data visualisation stuff.
Point noted, will look into menu/menuitem tomorrow.
@hi_mayank@yatil ah yes that's good. I think the listbox role probably is correct - I'm slightly confused about combobox still - as that seems to technically be a listbox with a text input at the top?
@sarajw@yatil yea, combobox is the "trigger" part of it.
i generally do <div tabindex=0 role="combobox"> for a custom select, and <input role="combobox"> for the filterable input.
last time i did this, i had some difficulties when labeling a <button role="combobox"> using aria-labelledby. but you might be fine with a button if you don't need to separately show the label and the "selected" value.
tbh this is also where i would probably reach for a library (provided you still test it)
@yatil@hi_mayank oh if only I could change the design and function, hahaha. One of these options is "custom range" and once chosen, the whole menu widens to display a date range picker.
@yatil@hi_mayank can't work out if you're actually making a Lego Gotham City (if yes shoowww usss) or if that was an extended metaphor I didn't get about trying to build something complicated out of tiny pieces... Either way I'm very thankful for the input :)
@anniegreens@yatil@hi_mayank yes these two are being awesomely helpful without being at all patronising, feeling very privileged to have access to their big juicy brains!
@yatil@mikemai2awesome@hi_mayank it's all good, between the 3 of you I've had plenty of good advice! I'll be experimenting with a roving tabindex later today I think...
@hi_mayank@yatil yeah. I'm flirting with Adobe react-aria elsewhere, but I've agreed with the PO I'll do a "good enough for now" (dangerous, I know) version - as even bringing in a library and having everything hook up right and work is a bit of a task in itself.
Currently it's a button with the selected item value (the chosen time period) as its text. I did wonder if I need to add a label. Currently it only visually hints that this is changable, with a calendaresque icon before it.
Add comment