Accessibility Dropdown > Radio buttons are not clickable

[clairep94]

Most appropriate sections of the p5.js website?

Other (specify if possible)

What is your operating system?

Mac OS

Web browser and version

No response

Actual Behavior

• Open accessibility options dropdown
• Click on any row, but on the text --> can toggle the option on/off
• Click on the same row, but on the radio icon --> has no effect

Expected Behavior

• Would expect that clicking on the radio icon would also toggle the option on/off

Steps to reproduce

Reproduction demo:

Screen.Recording.2026-09-01.at.23.57.30.mov

I think the issue is within the Dropdown component here where the onClick handler is around a button that wraps only the text

Wondering if we should also update the variant types, since it says "radio", but in the comments it says in the "radio" variant, we can have multiple items selected --> so this should be "checkbox"

& maybe we swap the button pattern for an input type=checkbox?

Would you like to work on the issue?

Sure

[Ekagrashharma]

I’d be happy to work on this issue if @clairep94 isn’t already planning to work on it.

[ksen0]

@Ekagrashharma if you'd like to work on an issue, please be sure to describe your approach! But in this case @clairep94 volunteered first so it is up to them.

@clairep94 grat catch and thanks for volunteering, yours if you still want to work on it.

Re: radio vs checkbox - if it makes no difference to texts or to functionality please feel free to replace. cc @doradocodes @Nwakaego-Ego if you have other thoughts on this

[Nwakaego-Ego]

Thank you, @clairep94, for reporting this. I also noticed the same behaviour in the language selector, which also uses the shared dropdown component.
From what I found in DevTools, clicking the circle targets the parent li, and the button is not included in the event path. Clicking the text does pass through the button and works. In the component, the circle icon and text button are separate elements, the onClick handler is only on the button, and the icon has pointer-events: none.
On the radio-versus-checkbox question, I agree with your suggestion, the checkbox matches the Accessibility Settings.

[tirthraj01]

Hi! I've opened a PR with the fix here: #1603. It moves the icon inside the button element to ensure full-row clickability and adds the checkbox variant for accessibility settings.

[Nwakaego-Ego]

Hi @tirthraj01, thank you for your interest in this issue and for taking the time to propose a fix. Before starting work or opening a pull request, please read through the issue discussion and wait to be assigned. You can find more information about our contribution process in the [community guidelines] here.

This issue was already assigned to @clairep94, who reported it and indicated that they would like to work on it. Following this process helps prevent duplicated work and respects the contributor who has already been assigned. Please keep this process in mind for future contributions.

[tirthraj01]

Hi @Nwakaego-Ego, thank you for letting me know, and my sincere apologies to you and @clairep94! I was eager to help and completely overlooked that @clairep94 was already assigned.

I completely understand and respect the contribution process. I definitely don't want to step on anyone's toes.

If @clairep94 is still actively working on this, please feel free to proceed with their solution or use PR #1603 as a reference if helpful. If @clairep94 is busy or would prefer to pass this along, PR #1603 is tested and ready with all CI checks passing.

Either way, happy to follow your lead, and I’ll make sure to ask and wait for assignment on future issues. Thanks again for your guidance!