Problem/Motivation

If a content type description contains an <a> tag it results in a broken display of the Add content administration page when using the Seven theme.

Steps to reproduce:

  1. Spin up a sandbox site on SimplyTest.me: http://ply.st/drupal/8.0.x
  2. Install as Standard Drupal 8 profile with default configuration.
  3. Navigate to the Add content type page: admin/structure/types/add
  4. Add a new content type with the following settings:
    • Name: Test
    • Description: Test with <a href="https://drupal.org">Link</a>
  5. Navigate to the Add content page: node/add

This is present in the following templates:

  • admin-block-content.html.twig
  • block-content-add-list.html.twig
  • node-add-list.html.twig

The issue is due to the description variable being wrapped with an anchor tag, which causes the DOM to be re-arranged to comply with standards.

Proposed resolution

  1. Remove the wrapping anchor tag; Potentially cause a regression issue with #1488962: Increase touch target size of admin menu lists
  2. Sanitize the Description variable, removing anchor tags; Potentially reduce usability
  3. Replicate the wrapping anchor tag with Javascript; Potentially cause an issue for non-JS users

Remaining tasks

User interface changes

API changes

Data model changes

Comments

Deciphered created an issue. See original summary.

Deciphered’s picture

Issue appears to be limited to the Seven theme. Investigating further.

Deciphered’s picture

So the issue is pretty straight forward:

Seven's version of node-add-list.html.twig Wraps the entire output of the page, label and description, with an <a> tag to make it all clickable. The result of this is any <a> tag in the description will cause the browser (in my case, Chrome) to re-structure the DOM to make the markup compliant (can't have an <a> inside an <a>).

The solution however is not so straight forward. Terminating the tag after the label (so it doesn't wrap the description) both effects the look of the page as well as the behaviour.

The simplest solution would be to strip the <a> tag from the Content type description in seven_preprocess_node_add_list(), however as user experience goes it is actually beneficial to be able to include links in a Content type description.

Opinions welcomed.

therealssj’s picture

How about we change the structure to be something like this https://jsfiddle.net/jvc16mqk/
Have an outer div and make entire div clickable with href of node/add.
Description will have a check, if it contains an anchor tag then put it outside the div and apply required formatting otherwise keep description inside div.

Cottser’s picture

Component: node system » Seven theme

Hmmmm.

Cottser’s picture

I suspect this applies to more than just /node/add (blocks as well?) based on the related issue. Based on a quick look I don't see links in the description being discussed there.

Edit: see these other templates:

  • admin-block-content.html.twig
  • block-content-add-list.html.twig
Deciphered’s picture

Title: Content Type description containing with <a> tag breaks Add content layout. » Descriptions containing links break admin menu lists.
Issue summary: View changes
therealssj’s picture

Status: Active » Needs review
FileSize
3 KB
86.24 KB

This is one way you can fix this.
Only for /node/add.
This is just a test. I might not have followed coding standards.

emma.maria’s picture

Issue tags: +CSS, +frontend, +Twig, +Seven

I can review and take a look at the coding standards.

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.