fix(forms): improve accessibility of custom form control JS example

[xopsio]

Improves the accessibility of the custom form control example in Example 4.

This updates the HTML and JavaScript so the custom control has clearer combobox/listbox semantics, better keyboard handling, and avoids click propagation and blur issues when selecting options.

Fixes #31250

[github-actions]

Preview URLs (1 page)

• /en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_4

(comment last updated: 2026-04-09 08:15:43)

[chrisdavidmills]

Hi there, @xopsio, and thank you for your work on improving the accessibility of this example.

The code updates seem reasonable to me. There are a couple of issues with your approach, however:

1. The guide that this example is part of would also need to be updated to explain the code changes you have made: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls.
2. The guide is in multiple parts. You've updated Example 4 to add the accessibility improvements; however, it is Example 5 that deals with making the custom widget accessible: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls/Example_5.

I would suggest that you add your changes to Example 5 instead, and update the information on accessibility in the guide to talk about your new changes.

[xopsio]

Thanks, I understand. I’ll move the accessibility-related changes to Example 5 and update the main guide to explain them.