Dropdown of togglable radio checkboxes

[LittleWhiteLoti]

I'm trying to decide how this would best be approached to make it accessible. Would a dropdown of checkboxes work?

[levimcg]

@LittleWhiteLoti

Thanks for opening up this discussion! Could you give me a bit more context around what type of interaction/functionality you are trying to create?

Here are a couple of questions that might help you decide what is right for your app/site.

1. Radios and checkboxes are two different elements that provide distinct input values to form data. Radios are for mutually exclusive selections where only one value can be selected at a time. Checkboxes allow for multiple values of a set to be selected/input at the same time. For example you can mark multiple checkboxes that share the same name attribute as selected, but you can only select one radio input from a group that have the same name attribute in a form. You'll need to first decide which mode of input (radios or checkboxes) are needed for your use case. Should the use be able to select only one, or multiple values in the interaction you are building?
2. Can you give a bit more context about what is going on in your interface that requires hiding the list of options in a dropdown? Without knowing what you're trying to accomplish my first recommendation would be to instead put the list of input options visible in the page layout/form if possible. Which will also inherently make it more accessible and easier for everyone to use.
3. If putting the list of options inside of a dropdown, you may want to think about using buttons with aria-role="menuitemradio", or aria-role="menuitemcheckbox" attributes instead, although I would only recommend this as a last resort. The Rivet dropdown component menu will accept <button> elements as children and style them appropriately, but it will be up to you to managed the aria-checked="true/false" states with JavaScript based on the user interaction. This would be the hardest solution to get right from an accessibility perspective.
   1. MDN web docs for the menuitemradio role
   2. MDN we docs for the menuitemcheckbox role

[LittleWhiteLoti]

The functionality is a dropdown to choose which columns of a table are shown. When you open the dropdown it shows a checkbox list of columns, shown or not. When a checkbox is in the unchecked state the column from the table disappears and vice-versa.