StarCitizenTools / mediawiki-skins-Citizen

A beautiful, usable, responsive MediaWiki skin with in-depth extension support. Originally developed for the Star Citizen Wiki.
https://www.mediawiki.org/wiki/Skin:Citizen
GNU General Public License v3.0
222 stars 54 forks source link

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

Open TarkusLee opened 3 months ago

TarkusLee commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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