Problem/Motivation

The Link render element supports supplying attributes both in $element['#attributes'] and $element['#options']['attributes']. These are combined with an array + operator, which does not combine classes when they are present in both array elements.

Steps to reproduce

As a site builder:

The Twig extension add_class() sets the class in the #attributes. For a link, there may already be a class in the #options. This happens in radix v6 for local tasks and is exhibited when viewing a page which is a secondary local task. The primary local task has a class of "is-active" and radix adds classes "nav-link" and "active", which fails.

  1. Install Radix v6.
  2. Create a page with primary and secondary local tasks.
  3. Visit the page with the secondary local task.
  4. Notice that the primary task tab is display incorrectly and contains only the "is-active" class.

As a developer:

  1. Create a custom module with a controller.
  2. Make the controller render this element:
    [
      '#type' => 'link',
      '#title' => 'title',
      '#url' => Url::fromUri('https://www.drupal.org')->setOption('class', ['url-option-class']),
      '#attributes' => [
        'class' => ['attributes-class'],
      ],
      '#options' => [
        'attributes' => [
          'class' => ['options-attributes-class'],
        ],
      ],
    ]
    
  3. Visit the controller page, inspect the link and check that only attributes-class class is added to the link.

Proposed resolution

Merge the classes from ['#attributes']['class'] and ['#options']['attributes']['class'] when rendering a link.

Remaining tasks

  • Fix. Done
  • Tests. Done

User interface changes

None

Introduced terminology

None

API changes

Now link elements render both ['#attributes']['class'] and ['#options']['attributes']['class'] classes.

Data model changes

None

Release notes snippet

Now link render elements render both ['#attributes']['class'] and ['#options']['attributes']['class'] classes. Some unexpected visual changes may arise due to new classes possibly being added to links.

Issue fork drupal-3494015

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:

Comments

danchadwick created an issue. See original summary.

danchadwick’s picture

Status: Active » Needs review
StatusFileSize
new735 bytes

Here's a patch created on D10.3, but I suspect it applies fine to 11.x

quietone’s picture

Version: 11.1.x-dev » 11.x-dev

Changes are made on on 11.x (our main development branch) first, and are then back ported as needed according to our policies.

danchadwick’s picture

StatusFileSize
new1.01 KB

Argh. Apparently core (and maybe contrib) creates attribute array class elements as both strings and arrays, so a cast to (array) is needed. I'd call that a bug, but that's another issue.

Here's a revised patch.

smustgrave’s picture

Status: Needs review » Needs work
Issue tags: +Needs Review Queue Initiative, +Needs tests

thank you for reporting

Fixes should be in MRs vs patches

Also will need a test case to show the problem.

vidorado made their first commit to this issue’s fork.

vidorado’s picture

Status: Needs work » Needs review
Issue tags: -Needs tests

I've just created a MR and added a Kernel test :)

vidorado’s picture

Issue summary: View changes
smustgrave’s picture

Status: Needs review » Reviewed & tested by the community
1) Drupal\KernelTests\Core\Render\Element\RenderElementTypesTest::testLink
"#type 'link' anchor tag with extra classes in both ['#attributes'] and ['#options']['attributes']" input rendered correctly.
Failed asserting that an array is not empty.
/builds/issue/drupal-3494015/core/tests/Drupal/KernelTests/Core/Render/Element/RenderElementTypesTest.php:331
FAILURES!
Tests: 5, Assertions: 21, Failures: 1.

Shows test coverage, reviewing that file too looks like a good number of scenarios covered.

Rest of the change appears fine

Not sure if this requires a CR for merging 2 arrays now but will let committer decide.

longwave’s picture

Status: Reviewed & tested by the community » Fixed

While this is a bug fix it's also a minor behaviour change as mentioned in the IS, so only committing this to 11.x to avoid breaking existing sites in a patch release. The MR also doesn't apply cleanly to 10.5.x so only committing this to 11.x; if you think this is worthwhile to backport please reopen with an MR against 10.5.x.

Committed ee78cfa and pushed to 11.x. Thanks!

  • longwave committed ee78cfa7 on 11.x
    Issue #3494015 by vidorado, danchadwick, smustgrave: Link render element...

longwave’s picture

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.