Example custom select is not keyboard focusable

[2kool2]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

What specific section or headline is this issue about?

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#customizing_select_styles

What information was incorrect, unhelpful, or incomplete?

The example is incomplete.
While the custom select options accept tab key interaction, the custom select itself doesn't appear in the keychain and cannot be activated by keyboard.
You have to click with a mouse first, then you can use the tab key.

What did you expect to see?

I expected the custom select to appear in the keychain.
That is, findable and operable via keyboard only.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

Perhaps adding tabindex=0 to the custom select would suffice, but I've not tested.

MDN metadata

Page report details

• Folder: en-us/web/html/element/select
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/html/element/select/index.md
• Last commit: 7d86bc5
• Document last modified: 2022-11-02T05:33:58.000Z

[advitiya7]

Hey i want to contribute to this,csn anyone please explain the problem? Thank you

[2kool2]

Hey i want to contribute to this,csn anyone please explain the problem? Thank you

In the final example "Result", the "Custom controls" component doesn't appear in the keyboard chain.
That is, if I move keyboard focus onto the preceding "Standard controls" select, then press the TAB key, keyboard focus should move into the Custom Control. It doesn't, focus moves to the next anchor "Technical summary".

Does that help any?

[advitiya7]

What does keyboard focus mean? Like i am not able to get the problem

[advitiya7]

Is there some way i can experience it or observe what is going wrong

[2kool2]

Is there some way i can experience it or observe what is going wrong

Navigate to the page anchor:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#technical_summary

With the keyboard, press SHIFT + TAB.

Keyboard focus moves from the anchor to the "Standard controls" select element under the heading Result.
Which probably has a blue outline indicating focus.
It shouldn't of landed there.
It should've moved focus to the "Custom controls" dropdown.

[advitiya7]

when the focus is on result the and we press tab it is going to custom but when the focus is on standard control it is going to technical summary so i have to bring the focus to custom controls i think,i got the solution we might have to change the tab index

[advitiya7]

Hey i want to contribute to this,csn anyone please explain the problem? Thank you

In the final example "Result", the "Custom controls" component doesn't appear in the keyboard chain. That is, if I move keyboard focus onto the preceding "Standard controls" select, then press the TAB key, keyboard focus should move into the Custom Control. It doesn't, focus moves to the next anchor "Technical summary".

Does that help any?

i have corrected this it is now moving to custom controls on pressing tab

[advitiya7]

Hey i want to contribute to this,csn anyone please explain the problem? Thank you

In the final example "Result", the "Custom controls" component doesn't appear in the keyboard chain. That is, if I move keyboard focus onto the preceding "Standard controls" select, then press the TAB key, keyboard focus should move into the Custom Control. It doesn't, focus moves to the next anchor "Technical summary".
Does that help any?

i have corrected this it is now moving to custom controls on pressing tab

Screencast from 02-04-23 11:35:37 PM IST.webm
you can see the screencast it is now working but only when i make changes in html by doing inspect element ,the same change is not showing while i change the code via editor don't know what the issue

[2kool2]

Screencast looks good, though I'd need to test code in-situ to fully confirm.

[advitiya7]

@2kool2 i just changed the tab index in the html , it is working by inspecting the local host mdn website and making the changes there but. Not when i make the same change in the actual codebase