Testing AI build by creating accordion component in Drupal
MARKDOWN
**Verify that DDEV is available** If the `.ddev` directory does not exit, run `ddev config` command or create it directly to create suitable Drupal configuration file. Create a clean, latest **Drupal installation using Composer** if there is no existing installation. If Composer is available, install Drupal using the official command: `composer create-project drupal/recommended-project drupal` Add `drush/drush` dependency After installation, **if Drush is available**, perform a site install using the **minimal profile**. Follow current best practices and avoid deprecated commands.
MARKDOWN
Write a Drupal 11 module named {{ module_name }}. Use hook classes (OO hooks) instead of procedural hook functions. Follow Drupal 11 coding standards and best practices (PSR-4, strict typing, proper namespaces, dependency injection, services where appropriate). Keep the implementation clean, minimal, and production-ready. Do not include tests or deprecated APIs.
MARKDOWN
### Drupal Theme with Tailwind CSS (Full Integration) You are an expert Drupal front-end engineer. **Goal** Create a custom Drupal theme that uses **Tailwind CSS** with a fully working build setup. The result must compile Tailwind correctly and prove that it scans **both themes and modules** for class usage. --- ### Requirements #### Drupal * Target **Drupal 10/11** * Create a **custom theme** (not subtheme of a contrib theme) * Theme must: * Use `*.theme.yml`, `*.libraries.yml`, and `*.info.yml` correctly * Attach the compiled CSS via a library * Work with Twig templates #### Tailwind CSS * Use the **official Tailwind CSS npm package** * Use **PostCSS** (preferred) or Tailwind CLI * Tailwind config must: * Scan **all relevant files** for class usage: * `/themes/custom/**` * `/modules/custom/**` * Include: `*.twig`, `*.js`, `*.ts`, `*.vue`, `*.php` * Enable JIT mode (default in Tailwind v3+) Example content paths (adapt as needed): ```js content: [ './themes/custom/**/*.{twig,js,ts,vue,php}', './modules/custom/**/*.{twig,js,ts,vue,php}', ] ``` #### Build Setup * Assume `npm` is available * Provide: * `package.json` * `tailwind.config.js` * `postcss.config.js` * Include scripts: * `npm run build` * `npm run watch` #### File Structure Create a clear structure, for example: ``` themes/custom/my_theme/ ├── css/ │ └── tailwind.css ├── dist/ │ └── style.css ├── templates/ │ └── page.html.twig ├── my_theme.info.yml ├── my_theme.libraries.yml ├── package.json ├── tailwind.config.js ├── postcss.config.js ``` --- ### Validation & Testing (Mandatory) You **must verify** the setup works by: 1. Adding Tailwind utility classes in: * A **Twig template inside the theme** * A **Twig or PHP file inside a custom module** 2. Running the Tailwind build 3. Confirming: * The compiled CSS contains utilities used in **both locations** * No Tailwind purge issues occur 4. Documenting the test and expected output --- ### Output Expectations * Provide **exact file contents** (not pseudocode) * Explain **why each configuration is needed** * Highlight common Drupal + Tailwind pitfalls and how this setup avoids them * The final result must be copy-paste runnable --- ### Constraints * Do **not** use CDN Tailwind * Do **not** rely on Drupal core or contrib build tools * Do **not** assume Webpack or Vite unless explicitly required --- Deliver a production-ready Drupal theme with Tailwind CSS that compiles, scans modules and themes correctly, and is demonstrably working.
drupal.component.accordion
--- schema: spec/v1 id: drupal.component.accordion version: 1.0.0 title: Accordion Component for Drupal description: WCAG-Compliant Accordion Component for Drupal (SDC + Tailwind) tags: - drupal - module - component - sdc visibility: public requires: tools: - ddev - composer - drush runtime: {} --- ## WCAG-Compliant Accordion Component for Drupal (SDC + Tailwind) Create an **accessible accordion component** implemented as a **Drupal module** using **Drupal Single Directory Components (SDC)**. The component must meet **WCAG 2.2 AA** requirements and follow **WAI-ARIA Authoring Practices** for accordions. Styling must be done using **Tailwind CSS utility classes only**. --- ### Architecture & Drupal requirements - Implement the accordion as a **Drupal module** exposing one or more **SDC components**. - Each accordion is an SDC component with: - `component.yml` - Twig template - Optional JS behavior - Tailwind-based styling - Component must be renderable via: - Twig includes - Render arrays - Field formatter or block (optional, but architecture-ready) - Component input data should be passed via SDC props (e.g. `items`, `allow_multiple`, `expanded_by_default`). --- ### Markup & semantics - Accordion headers **must be real `<button>` elements**, not divs or links. - Each accordion item consists of: - A header button - A content panel - Panels must be present in the DOM at all times (no conditional rendering that removes content). **Required relationships** - Each header button: - Controls exactly one panel - Has a unique ID - Each panel: - References its header - Is hidden from assistive tech when collapsed --- ### ARIA & accessibility requirements Apply ARIA only where needed and correctly. **Header buttons** - `aria-expanded="true | false"` reflects current state - `aria-controls="panel-id"` **Panels** - `role="region"` - `aria-labelledby="header-id"` - Use `hidden`, `inert`, or equivalent to hide collapsed panels accessibly Do not duplicate native semantics (e.g. no `role="button"` on `<button>`). --- ### Keyboard interaction (WCAG 2.1.1, 2.4.3) The accordion must be fully keyboard-operable: **Required** - `Tab` / `Shift+Tab`: enter and exit accordion normally - `Enter` or `Space`: toggle the focused header **Recommended (ARIA pattern)** - `ArrowDown`: move focus to next header - `ArrowUp`: move focus to previous header - `Home`: move focus to first header - `End`: move focus to last header Focus must **remain on the header button** when toggling. --- ### State management - Support: - **Single-open mode** (opening one panel closes others) - **Multi-open mode** - State must stay in sync across: - DOM visibility - `aria-expanded` - Tailwind state classes --- ### Styling (Tailwind CSS) - Use Tailwind utility classes exclusively. - No inline styles. - Visual states must be distinguishable **without color alone**: - Expanded vs collapsed - Focused vs unfocused - Focus styles must be clearly visible and meet contrast requirements. - Use Tailwind variants or state classes to reflect expanded state. --- ### Motion & reduced motion - If transitions are used: - Respect `prefers-reduced-motion` - Avoid height animations that break screen readers - Animations must never interfere with focus or announcements. --- ### JavaScript behavior (Drupal-friendly) - Attach JS using **Drupal behaviors**. - Must support: - Multiple accordions on the same page - Dynamic rendering (AJAX, BigPipe, etc.) - No global state leakage. - Component must function without JS (all panels expanded by default). --- ### Screen reader expectations - Screen readers must announce: - Header as “button” - Expanded / collapsed state - Content inside expanded panels must be read in natural order. - Collapsed panels must not be reachable by screen readers. --- ### Robustness & degradation - Works with mouse, keyboard, touch, and assistive technologies. - Graceful fallback if JavaScript fails. - No reliance on CSS-only hacks that break accessibility. --- ### Install Drupal modules - Install `drupal/paragraphs` module ### Configurations - Create **text** paragraph type - it consists of a long formatted text field - **field_text_body**. - Create **accordion_item** paragraph type, this contains **field_accordion_item_title** and **field_accordion_item_body** - The **field_accordion_item_body** supports referencing paragraphs and, by default, allows **text** paragraph type. - Create an **accordion** paragraph type. - Add accordion main title field **field_accordion_title** - Add **field_field_accordion_item**, and this needs to reference the **accordion_item** paragraph type --- ### Integrate Drupal SDC accordion component - Use the hook class to create paragraphs view alter and make it to use the newly created accordion component. --- ### Deliverables - Drupal module structure - SDC component files - Twig markup with proper semantics - Tailwind-based styling - Drupal behavior JS - Accessibility rationale explaining: - ARIA usage - Keyboard handling - WCAG success criteria addressed - List of common accessibility pitfalls avoided
{
"specs": [
"MARKDOWN",
"MARKDOWN",
"MARKDOWN",
"drupal.component.accordion"
]
}