Update accessibility.mdx

[mbgower]

addresses a shortcoming in the current keyboard guidance on the a11y tab as discussed in #4342 (comment)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
carbondesignsystem	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 20, 2024 6:54pm

[Kritvi-bhatia17]

This looks great, @mbgower—thanks for fixing that!

I just had one small question. For the Combo Box, you've mentioned:

Enter or the Up or Down arrow keys will open the list of options, as will typing any matching character or string of characters (which will also filter the list to only show items that match the typed string).

I wanted to confirm—based on the current implementation, does the Up arrow key also open the menu for Dropdown and Multiselect components? If yes, should we update the documentation to include this? For example:

Dropdown

The default dropdown opens with Enter, Space, Up, or Down arrow keys. If an option is already selected, or if the Down arrow is used to open the component, the focus moves to the first or currently selected option. Arrow keys allow navigating through the options, and pressing Space or Enter selects the focused option and closes the dropdown. Pressing Esc or Tab closes the dropdown without making any changes.

Multiselect

The multiselect opens with Enter, Space, Up, or Down arrow keys, which are also used to toggle the selection of any option. The focus handling is similar to the default dropdown: focus moves to the options list if an item is already selected, or if the component is opened with the Down arrow. Once items are selected, they appear as tags in the field, with a count of selected items and an 'x' for clearing. Pressing Esc closes the multiselect, and pressing Delete while the focus is in the collapsed field clears all selected options.

Would love your input on this!

[mbgower]

I wanted to confirm—based on the current implementation, does the Up arrow key also open the menu for Dropdown and Multiselect components? If yes, should we update the documentation to include this?

Hi Kritvi,
Before I answer, I should emphasize that back when I originally made this documentation, it was as a result of checking the current implementation, discussing any issues I saw with that, and then documenting either the existing or (if it was agreed something was wrong) remediated behaviour.

The only documentation changes I made here were in response to the focus handling changes you have advocated. AFAIK, no other keyboard interaction was changed as part of this.

Did you look at the current interaction? What I'm seeing is that the Multi-select does not open on the Up Arrow. So if you're seeing it opening on Up arrow, maybe the behaviour is coming from a different OS/browser combination? It would be good for you to try to isolate where you're seeing that behaviour, and get it corrected.

IMO, the multi-select shouldn't open on Up arrow, because the option list does not wrap: I cannot arrow down on the last item (or up on the first one) to wrap around to the other end of the list. I'm assuming the reason the combo box does open on Up arrow is because it does support a wrap around on the option list. Therefore, Up arrow makes sense to open, since it opens the list and puts focus on the bottom item in the list.

By the same take, dropdowns do not wrap, and therefore pushing the Up arrow from the top of the list accomplishes nothing. So, by the same token, Up arrow should not open a closed dropdown. I see that at some point Carbon altered the default dropdown's behaviour to open by pressing the Up arrow. As per my comments about the multi-select, I'm going to suggest that is a bug that should be fixed, making it only open on Space, Enter or Down arrow. @tay1orjones, do you concur?

[Kritvi-bhatia17]

Got it Michael, thanks for explaining that!
Rest LGTM 🚀

[mbgower]

Just to make sure this didn't get lost in the noise, regarding the current storybook implementation of Dropdown where it opens on Up arrow...

I'm going to suggest that is a bug that should be fixed, making it only open on Space, Enter or Down arrow. @tay1orjones, do you concur?

@Kritvi-bhatia17 I suggest opening a bug on this and carry on that conversation.

[tay1orjones]

@mbgower if the dropdown is set to open upwards does it still make sense to open on down arrow?

We don't switch the chevron based on top/bottom. Following that same logic I agree down arrow only makes sense. 👍

@Kritvi-bhatia17 feel free to quote/copy these into the new issue once you've opened it

[mbgower]

@tay1orjones sorry, I'm causing confusion. I'm talking about the fact that the closed dropdown input opens when the user presses Up arrow, not just when they press Enter, Space, or Down arrow

That doesn't make any sense, given there is no ability to wrap around the options list (i.e., pressing Up arrow at the top of the open list does nothing). The Multi-Select dropdown behaves properly.

---

The combo box does open with all 4 keys, but this makes sense (to me) since the options list, unlike dropdown, wraps (i.e., it is an infinite loop). So in the same way a user of a dropdown opens it and puts focus to the first item by pressing Down arrow, in the combobox, I can open and put focus to the bottom item by pressing Up arrow.