Advanced link fields

[brandonkelly]

Description

Adds a new “Advanced Fields” setting to Link fields, where developers can choose which “advanced” fields they want to be available to authors. (Target and URL Suffix have both been moved into there.)

When any of them are selected, inputs will get an “Advanced” toggle, and each of the advanced fields will be hidden under it. (Collapsed by default.)

Related issues

• [5.x] Option for anchor in all link field types #15813
• FR: Hide Label & Target Fields If No Link Selected (Link Field) #16239
• CKEditor Title Attributes for Anchor Tags ckeditor#167

[linear]

CMS-1354 Advanced link fields

[gcamacho079]

• The “Advanced” toggle button can’t be operated via keyboard. This should use a button element with the following attributes: aria-expanded that toggles between true/false on expand/close, and an aria-controls value that references the ID of the advanced field container
• URL type and value inputs should have explicit visible labels
• The aria-describedby reference on the inputs with the “More info” doesn’t exist. For example, the following issue is found on the URL Suffix input: 'ARIA attribute element ID does not exist on the page: aria-describedby="fields-link1-url-suffix-instructions"'.
  In this case, I recommend adding an aria-hidden element in the heading or input container with the referenced ID and duplicating the instruction text inside. While it may cause some confusion that the instructions are hidden behind the tooltip and read as part of the input description, it’s a better experience than requiring users to navigate back to the toggle tip to access the instructions.
• The input/heading containers require some extra padding when viewing at 320px
• I noticed when I add a value to the URL Suffix input and save the entry, then return to the entry, the class, ID, and rel inputs end up with random values (see screenshot below).

[brandonkelly]

@gcamacho079 Thanks! Addressed everything but the individual labels – that’s not a regression by this PR so we’ll address it separately.

[alexanderbuergin]

Very cool! Thanks @brandonkelly

[Michael-Paragonn]

Love this! ❤️

But I have to ask; with Craft as dependent as it is on custom fields, it seems a bit incongruous to have these advanced fields be a limited assortment of "hard-coded" options. I mean, what you do have absolutely does make sense, it just begs the question of why there isn't a "custom field" type of option.

IRL use cases for custom fields on links:

• Link style: Many times, a client will want to have the option to show a link in a button-style, rather than a "text link" style. It would simplify things if us developers could provide a dropdown field to select that on the link itself.
  
• Progressive enhancement: A link which goes to a "utility" page of some sort (login/register/search/subscribe/etc) by default, but if JS is enabled, the functionality of those pages gets loaded into a <dialog> instead.
• Marketing: Typically it's more user-friendly to allow content authors to add marketing URL params in a visual manner instead of a technical one. Having them type out "?ref=campaign_name" in the URL suffix field is a technical approach; allowing them to select (via a Relationship field) the associated Campaign entry is a visual approach.

Taken to the "extreme", perhaps links could benefit from being Entry Types themselves?

[brandonkelly]

@Michael-Paragonn Feel free to post that as a new discussion!