Possible invalid HTML in Field description in forms

Created on 21 May 2021, over 3 years ago
Updated 21 June 2024, 6 months ago

Problem/Motivation

The field descriptions in forms are wrapped with a small tag.
small tags may only contain Phrasing content (see for example https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small).
Allowed HTML tags for field descriptions are:
<a> <b> <big> <code> <del> <em> <i> <ins> <pre> <q> <small> <span> <strong> <sub> <sup> <tt> <ol> <ul> <li> <p> <br> <img>.
Several of those are not Phrasing content, e.g. <ol>, <ul> and <li>.

So this can lead to invalid HTML (though browsers will adjust the invalid HTML like inserting implicit closing tags).

Steps to reproduce

  • Create node type with a field
  • Add field description containing <ul> and <li> tags.
  • Use radix theme to edit/create content
  • Open the add content form for the node type
  • Validate the form's HTML
  • That will result in warnings like:
    • missing </small> before <li>
    • inserting implicit <small>

Proposed resolution

Change <small> tags to <div class="small"> in the form templates:

  • form-element.html.twig
  • form-element--checkbox.html.twig
  • form-element--radio.html.twig
  • fieldset.html.twig

There is already scss/css for .small (same as for tag <small>: font-size: $small-font-size; }), so that would not change the appearance.

Remaining tasks

Create patch.

User interface changes

None.

API changes

None.

Data model changes

None.

🐛 Bug report
Status

Closed: outdated

Version

4.10

Component

User interface

Created by

🇩🇪Germany gngn

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024