feat: #3631526 Polish the generator form: AI label, example buttons, disclosure and cost line
Issue: #3631526 "Initialize the AI Media module"
Chunk 8 of the UX and integration plan (20 October 2026): generator form polish (plan sections 4 and 6.4).
Depends on !14 (closed) (3631526-safety-tab), which depends on !13 (closed), !12 (closed), !11 (closed), !10 (closed), !9 (closed), !8 (closed) and !6 (merged). Until those merge, this diff includes them; the change of this MR is its last commit.
What changed
Top to bottom, in the Media Library tab and on the Add media page (one shared builder):
- AI label: the field title reads "Describe the image" (SVG, video, document) followed by an "AI" label with a decorative sparkle, in the admin theme's badge class (Gin and Default Admin new flag, AI Media's outline pill in Claro). Text, not color alone.
- Help, one line: "Say the subject, the setting and the style." The help is no longer hyphenated mid-word (
hyphens: manual). - Examples as up to three buttons under the field, in Tab order after it, each named "Use this example: ". Pressing one fills the field and returns focus to it. They replace the quoted list.
- Disclosure, its own full size line under the examples, read with the field (its ID is added to the field's
aria-describedby), so an admin theme that folds descriptions behind a help icon (Gin's description toggle) does not hide it (second commit, found while taking the screenshots): "Made by AI with {provider}. Your description is sent to {provider}. Check the result before you use it." With site context: "Uses site context from this site (N items)." for images, "Uses site context from this site." for chat generators. - Options, closed: Shape first, with pixel sizes ("Square, 1024 x 1024"), then Format, Quality, Model, then the generator's own options. The closed title shows the choice, "Options (Square, PNG)", and updates as it changes.
- Cost line under Generate: "Each press is a paid request to {provider}." Not shown for providers listed as free (
cost_notice.free_providers, defaultechoai) or when the site turns it off (cost_notice.enabled), both on the Editor options tab. No amounts or estimates. - While running: the button reads "Generating…" and the page announces (polite) "Generating image. This can take up to a minute."; errors stay assertive, as before.
No update hook: cost_notice is new in config/install and the schema; an existing site without it shows the cost line until the setting is saved.
How it was tested
- Plain Drupal 11.4 (
aimplan1), Echo provider, headless Firefox:- axe-core 4.10.2 (WCAG 2.0, 2.1 and 2.2 A and AA): 0 violations on the image form, the document form with Options open, and the Add media page form, in Claro, Gin and Default Admin at 1440 and 1920.
- Accessibility tree (Playwright's ARIA snapshot, Firefox): the field is named "Describe the document AI", its description holds the help and the disclosure, the examples are a group "Example descriptions" of buttons named with their text, then "Options (PDF)" and "Generate document".
- Keyboard: from the field, Tab reaches the two examples, Options, then Generate; Enter on an example fills the field and puts focus back in it.
- Varbase E2E, Firefox:
04-01-01-form(new label, help, disclosure, generating message, no cost line with Echo, an example fills the field, the closed Options title) and06-01-01-settings(examples as buttons, the cost line shown when Echo is not listed as free) pass; the full suite on a fresh CI-like site, see below. - Kernel tests (26) pass. phpcs (Drupal, DrupalPractice), phpstan level 1, cspell, eslint (core config on
js/, and step definitions), stylelint: clean.
Not tested
- No NVDA or Orca pass: no screen reader is available in this environment. The accessibility tree and keyboard order above were checked instead; a real screen reader pass is still needed for the acceptance criterion.
- Real providers (Echo only), so the cost line with a paid provider was seen only by removing Echo from the free list.
- Mobile widths (out of scope).
AI-Generated: Yes. Written with Claude Code (Claude Opus 5.5) under the Drupal AI policy; tested by the author before submission.
Checkpoints:
- File an issue
- Addition/Change/Update/Fix
- Testing to ensure no regression
- Automated unit testing coverage
- Automated functional testing coverage
- UX/UI designer responsibilities
- Readability
- Accessibility
- Performance
- Security
- Developer Documentation
- User Guide Documentation
- Reviewed by human
- Code review by maintainers
- Full testing and approval
- Credit contributors
- Review with the product owner
- Release notes snippet
- Release