Custom controls must have associated labels
into a fancy dropdown, it won't automatically be inserted into the tab order. You need to
manually check that all custom controls are keyboard focusable. See also
Keyboard access fundamentals.
How to manually test
To test that the custom control is focusable, press the
TAB key to navigate
through the site and verify the elements that become focused.
Are you able to reach all of the interactive controls on the page? If not, you may need
tabindex to improve the focusability of those controls. See also
Control focus with
How to fix
To make a custom control focusable, insert the custom control element into the natural
tab order using
tabindex="0". For example:
<div tabindex="0" class="focusable"> Focus me with the TAB key </div> <div tabindex="0" class="focusable"> Focus me with the TAB key </div>
Why this matters
For users who either cannot or choose not to use a mouse, keyboard navigation is the primary means of reaching everything on a screen. Good keyboarding experiences depend on a logical tab order and easily discernable focus styles. If a keyboard user can't see what's focused, they have no way of interacting with the page.