Problem/Motivation

The AJAX API uses MessageCommand to dynamically add messages from an response. We need an alternative so the AJAX API can be deprecated.

Proposed resolution

  1. Identify and standardize CSS selectors for the message containers of each supported type across the status-messages templates supported in core.
  2. Document the required selector path for message container elements in the templates.
  3. Modify status-messages templates so that message list containers are always present, but hidden by CSS when empty. This eliminates the concept of a fallback element
  4. Create a status-message-item theme hook and template so that themes can change the structure of status message markup.
  5. Adjust StatusMessages to generate status-message-item
  6. Individual status messages rendered by HtmxRenderer are wrapped in the new hx-partial tag supported by #3555916: Update to htmx 4 and moved into place when the response is processed by htmx.

Remaining tasks

  1. Add a test once the htmx 4 upgrade is committed

User interface changes

None

Introduced terminology

None

API changes

None

Data model changes

A new theme hook is introduced with associated template.

Release notes snippet

None

Issue fork drupal-3546787

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

fathershawn created an issue. See original summary.

fathershawn’s picture

fathershawn
Primary language English
Location New York
commented
Project: Drupal core » Documentation
Version: 11.x-dev »
Component: documentation » New documentation
Issue summary: View changes
fathershawn’s picture

fathershawn
Primary language English
Location New York
commented
Title: Implement MessageCommand in htmx » Replace MessageCommand with an HTMX implementation
Project: Documentation » Drupal core
Version: » main
Component: New documentation » ajax system
Issue summary: View changes
Issue tags: +HTMX initiative
fathershawn’s picture

fathershawn
Primary language English
Location New York
commented
Issue summary: View changes
Issue tags: +Needs CR
fathershawn’s picture

fathershawn
Primary language English
Location New York
commented
Parent issue: #3535179: [Plan] Provide guidance for refactoring existing Ajax API commands »
Related issues: +#3535179: [Plan] Provide guidance for refactoring existing Ajax API commands
fathershawn’s picture

fathershawn
Primary language English
Location New York
commented
Issue summary: View changes
fathershawn’s picture

fathershawn
Primary language English
Location New York
commented
Title: Replace MessageCommand with an HTMX implementation » PP-1 Replace MessageCommand with an HTMX implementation
fathershawn’s picture

fathershawn
Primary language English
Location New York
commented
Issue summary: View changes
Related issues: +#3555916: Update to htmx 4
fathershawn’s picture

fathershawn
Primary language English
Location New York
commented
Issue summary: View changes
fathershawn’s picture

fathershawn
Primary language English
Location New York
commented
Status: Active » Postponed

Postponing until the update is merged.

fathershawn’s picture

fathershawn
Primary language English
Location New York
commented
Related issues: +#3396318: AJAX MessageCommand markup and styling differs from Theme default
fathershawn’s picture

fathershawn
Primary language English
Location New York
commented
Issue summary: View changes
fathershawn’s picture

fathershawn
Primary language English
Location New York
commented

I some how lost my code for this on my local but phpStorm's local history bailed me out. I think I have it restored and now pushed up for those who want a preview.

fathershawn’s picture

fathershawn
Primary language English
Location New York
commented
Related issues: +#3587678: Ensure status message ARIA landmarks are unique
fathershawn’s picture

fathershawn
Primary language English
Location New York
commented
Issue summary: View changes
fathershawn’s picture

fathershawn
Primary language English
Location New York
commented
Status: Postponed » Active
fathershawn’s picture

fathershawn
Primary language English
Location New York
commented
Title: PP-1 Replace MessageCommand with an HTMX implementation » Replace MessageCommand with an HTMX implementation

fathershawn opened merge request !16995

fathershawn’s picture

fathershawn
Primary language English
Location New York
commented
Issue summary: View changes
Status: Active » Needs review
fathershawn’s picture

fathershawn
Primary language English
Location New York
commented

Added a demonstration controller to test_htmx.
Used AI to create a first draft FunctionalJavascript test that I then improved to use the controller to verify the refactoring works as expected.

fathershawn’s picture

fathershawn
Primary language English
Location New York
commented

After a Slack conversation with @mgifford, I removed the aria label attributes. As a live region, the h2 element is read by the screen reader and the aria attributes cause it to say the same information twice in a row: "Status messages, Status messages"

fathershawn’s picture

fathershawn
Primary language English
Location New York
commented
Status: Needs review » Needs work

Seems there are tests that use that attribute for their selector. Example:

Drupal\Tests\content_translation\Functional\ContentTranslationEnableTest::testEnable
Element matching xpath "//div[@data-drupal-messages]//div[(contains(@aria-label, "Warning message") or contains(@aria-labelledby, "warning")) and contains(., "This site has only a single language enabled. Add at least one more language in order to translate content.")]" not found.
fathershawn’s picture

fathershawn
Primary language English
Location New York
commented

Reverting into a follow-up issue