Page MenuHomePhabricator

ext-quick-survey-panel is showing up inside mw-fr-revision-details
Open, LowPublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

What happens?:

  • survey is inside of FlaggedRevs's Codex Dialog

image.png (850×960 px, 79 KB)

What should have happened instead?:

  • survey should be somewhere else

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):

Event Timeline

Jdlrobson-WMF added subscribers: Catrope, Jdlrobson-WMF.

Looking closer at this the issue and chatting to @Catrope we would suggest using a Popover component instead:
https://doc.wikimedia.org/codex/main/components/demos/popover.html

Screenshot 2025-10-22 at 3.55.35 PM.png (1×2 px, 437 KB)

If you are still having issues with QuickSurveys we can look at it again,

I don’t see documentation on the CSS-only version of Popover. This popup essential information, so it should be available without JavaScript. (Currently it isn’t, but we shouldn’t lock ourselves in a component with which it’s impossible to fix this accessibility issue.)

If Popover used <details> (with a CSS-only version) instead of a <button> plus a teleport <div>, it could work here. (By the way, a <details> would be also be more accessible: as far as I see, there is currently no ARIA or other accessible connection between the toggle button and the popup in the basic example. I guess accessibility could be fixed using a number of ARIA attributes, but why not use semantic elements instead of ARIA attributes?)

Jdlrobson-WMF added a subscriber: DTorsani-WMF.

@Tacsipacsi using the dialog with teleport target would also work here, but I still think it's the wrong component.
@DTorsani-WMF can you advise about using CdxPopover as a CSS component?

@Jdlrobson We don't currently have Popover available as a CSS-only component. I would imagine we would like to, in order to fully support initiatives like CodexPHP, but will rely on @Catrope to advise on the feasibility and timeline of such a thing.

@Tacsipacsi using the dialog with teleport target would also work here

…which doesn’t seem to have a CSS-only version either. So it’s not better than Popover (and its modal nature would likely be a disimprovement hated by many people).

@Jdlrobson We don't currently have Popover available as a CSS-only component. I would imagine we would like to, in order to fully support initiatives like CodexPHP, but will rely on @Catrope to advise on the feasibility and timeline of such a thing.

Is there a task for that? I don’t think this task should be tagged Codex, but rather a subtask, to avoid derailing the discussion here. (By the way, if the component gets created, maybe the Vector 2022 dropdowns – personal menu, toolbox etc. – could also use it instead of the checkbox hack.)

Removing wrong user account mentioned.