Using browser find-in-page function (CTRL+F) opens Wiki search panel

[TarkusLee]

Using browser find-in-page function (CTRL+F) opens Wiki search panel. This is undesirable behavior because the browser find-in-page hotkey is used to find content within the current page, but the Wiki search panel is used to find a different page based on some name or content.

To reproduce, visit a wiki running the latest version of the skin, and attempt to search with CTRL+F.

Wiki where issue is present: https://www.cleanhit.wiki/Main_Page

[alistair3149]

It is probably not related to the Ctrl + F hotkey but it stemmed from the change where we use <summary> and <details> elements to replace checkbox hack. It makes all the menu searchable, which is an intended effect.

However, the menu should be collapsed after the matching text is no longer in the menu. It is a tough issue to solve since the browser does not emit any events for find in page search.

I am not too versed in web accessibility in menu navigations but from my limited understanding and research, the alternatives that I can think of are:

1. Use the old checkbox setup. That is less accessible to screen readers but at least the ARIA roles and keyboard navigations are there.
2. For no-JS users, use pure CSS hover for dropdown menu. The menu can be awkward to use for mouse users, requires some CSS hackery, and will need a lot of JS enhancements to make it accessible.
3. Fallback to non-dropdown menu for no-JS users. It might be difficult to maintain and requires additional styles.
4. Abandon no-JS users. That is not desirable because Citizen always maintains no-JS support and only uses JS for enhancements.

Therefore, I don't really have a solution at the moment and I am more inclined to see how WMF is planning to implement it on Vector 2022, given that they have more expertise in the area than I do.

[TarkusLee]

Understood. If you wish, you can close the issue, or leave it up. Whichever you prefer.