Add the mask icon "color" attribute

Whatch out - this will break W3C markup validation .. https://realfavicongenerator.net/faq

macOS Safari

Can I define a theme color without an icon for the Safari pinned tab?

No. Even the doubtful
(a link markup without its href attribute) is ignored by Safari.
When using the W3C Validator, I get the error "Attribute color not allowed on element link at this point".

What to do about this?
Apple specifications for the Mask Icon are not compliant with W3C. It's that simple. This issue is completely harmless. Browers simply ignore this declaration. By the way it is only supported by macOS Safari.

If W3C validation is a concern, the only workaround is to remove the whole Mask Icon declaration (ie.
). Simply removing the color attribute does not work. If the attribute is not present, macOS Safari ignores the Mask Icon entirely, making it completely useless.

Just in case somebody (like my customer) wants to have an "apple conform Mask icon" with the color attribute (you have to accept a HTML validation warning).

Setting to needs-review - even if it probably should not hardwire the color and offer some way to edit the color via UI!

Sorry, wrong paths in the patch file.

@DamienMcKenna

There needs to be an option in the form for this.

I agree - but I do not know how to do this.

Overriding the function form() (in this case in metatag_favicons/src/Plugin/metatag/Tag/MaskIcon.php) just seems to change the element type form default 'textfield' to 'checkbox' or 'textarea'.
But how do I add an additional option?

I looked at https://www.drupal.org/docs/8/modules/metatag but did not find anything usefull.

Can you (or anybody else) point me in the right direction?

Thank you.

I still think that function form(array $element = []) just returns one form element - at least in all the classes I looked at:

• Referrer
• Robots
• PinterestNohover
• PinterestNopin
• PinterestNosearch
• TwitterCardsType

All of these override form(array $element = []) - but they just change the '#type' (e.g. 'select').

I did manage to show an input for color, but I cannot save the color value (or get it into the config).

I tried something like this (also see comments):

class MaskIcon extends LinkRelBase {
  // The color attribute.
  protected $color;

  public function form(array $element = []) {
    // "Normal" form element wrapped with 'mask-icon' - otherwise new element 'mask_color' is not visible.
    $form['mask-icon'] = parent::form($element);

    // New form element for color.
    $form['mask_color'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Mask icon color'),
      '#default_value' => $this->color,
      '#maxlength' => 7,
      '#required' => FALSE,
      '#description' => $this->t('Color attribute for mask icon in hexadecimal format, e.g. \'#0000ff\'. Setting it will break HTML validation. If not set macOS Safari ignores the Mask Icon entirely, making the Icon: SVG completely useless.'),
    ];
    return $form;
  }

  // Try to save "normal" value and color
  public function setValue($value) {
    parent::setValue($value);

    // Get color from request.
    // Gets value when submitting the form - but value is lost when generating output or showing the form again.
    $color = $this->request->get('mask_color', '');
    $this->color = $color;
  }

  public function output() {
    $element = parent::output();

    if ($element && $this->color) {
      $element['#attributes']['color'] = $this->color;
    }

    return $element;
  }
}

I think I need to extend the schema metatag_favicons.metatag_tag.schema.yml ...

Btw: is there a reason the key is metatag.metatag_tag.mask_ico in metatag_favicons.metatag_tag.schema.yml when the id in the plugin is id = "mask-icon"?
The other ids seem to the same as the according schema keys (e.g. "apple_touch_icon_72x72").
The exported config has the key "mask-icon" (like the plugin).

Thanx for any feedback.

#12 worked for me, thanx.

Patch only applies to current dev, not to current stable 8.x-1.11, but hey.

Created a reroll.

Patch attached fixes the failing tests, because of a missing config schema, and adds an upgrade path for old values.

This issue still needs tests but currently MetatagTagsTestBase only supports meta tags with only 1 value. So we should edit MetatagTagsTestBase so it's possible to support multiple values or add a separate test for the mask-icon metatag.

CS fixes.

@DamienMcKenna,

An update script is already included in #17:

+++ b/metatag.post_update.php
@@ -0,0 +1,28 @@
+<?php
+
+/**
+ * @file
+ * Post update functions for Metatag.
+ */
+
+use Drupal\Core\Config\Entity\ConfigEntityUpdater;
+use Drupal\metatag\Entity\MetatagDefaults;
+
+/**
+ * Convert mask-icon to array values.
+ */
+function metatag_post_update_convert_mask_icon_to_array_values(&$sandbox) {
+  $config_entity_updater = \Drupal::classResolver(ConfigEntityUpdater::class);
+  $config_entity_updater->update($sandbox, 'metatag_defaults', function (MetatagDefaults $metatag_defaults) {
+    if ($metatag_defaults->hasTag('mask-icon')) {
+      $tags = $metatag_defaults->get('tags');
+      $tags['mask_icon'] = [
+        'href' => $metatag_defaults->getTag('mask-icon'),
+      ];
+      unset($tags['mask-icon']);
+      $metatag_defaults->set('tags', $tags);
+      return TRUE;
+    }
+    return FALSE;
+  });
+}

Patch attached adds test coverage for the mask_icon.

And an upgrade path for entities. I based this one on one of the update hooks that was removed since the Drupal 9 compatibility changes.

Updated IS, Test coverage and update script to fix existing field data is provided.

I removed the maxlength from the color element, since that prevents the usage of tokens.

Patch no longer applied, so I created a reroll.

Just cause I am still using core 8.8 (yeah, I know...): here is a version of #34 which applies to 8.x-1.16

Only difference is in metatag_favicons/config/schema/metatag_favicons.metatag_tag.schema.yml:
182c182
< -metatag.metatag_tag.mask-icon:
---
> -metatag.metatag_tag.mask_ico: