task: #3633788 Put the generator examples and the AI disclosure in tooltips to save space

Closes https://www.drupal.org/i/3633788

What changed

  • The generator form is shorter: the example buttons and the "Made by AI with … Your description is sent to …" paragraph are gone from the page. The description field stays empty.
  • Under it, one small row: Examples opens a popover with up to 8 examples (picking one fills the field, focuses it and announces it), and an info button opens a toggletip with the AI disclosure and the site context line.
  • The disclosure is still in the field's aria-describedby, so screen readers hear it with the field whether the toggletip is open or not.
  • Native popover, placed under its button; inside the Media Library dialog Escape closes only the popover, a second Escape closes the dialog.
  • Eight better default examples for image, SVG and video (config/install, no update hook: pre-release). The setting allows up to 8.

Testing

  • Kernel: MediaLibraryAiTabsTest::testExamplesAndDisclosurePopovers. Full suite: 87 tests pass; phpcs and phpstan clean.
  • e2e: the form feature opens Examples and the info toggletip before checking them.
  • Manually in Gin: Add media page and Media Library, Examples and info popovers, picking an example.

Screenshots

From a local Varbase 11 site in Gin.

Media Library, Image tab in Generate with AI mode

Examples popover in the Media Library

AI disclosure toggletip in the Media Library

Examples popover on the Add Image page

AI disclosure toggletip on the Add Image page

AI-Generated: Yes

Checkpoints

  • Issue linked
  • Coding standards (phpcs, phpstan)
  • Automated tests
  • Tested manually in Gin
  • Tested manually in Default Admin
  • Reviewed by a human
  • Code review by maintainers

🤖 Generated with Claude Code

Edited by Rajab Natshah

Merge request reports

Loading
Loading