Add optional aria-label and title fields, resolves #25

sebastian-lenz · Aug 23, 2018 · f33feed · f33feed
1 parent 3ddc2c0
commit f33feed
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 10 deletions.
diff --git a/src/fields/LinkField.php b/src/fields/LinkField.php
@@ -41,6 +41,16 @@ class LinkField extends Field
    */
   public $defaultText = '';
 
+  /**
+   * @var bool
+   */
+  public $enableAriaLabel = false;
+
+  /**
+   * @var bool
+   */
+  public $enableTitle = false;
+
   /**
    * @var array
    */
@@ -90,6 +100,8 @@ public function normalizeValue($value, ElementInterface $element = null) {
       'allowCustomText' => $this->allowCustomText,
       'allowTarget'     => $this->allowTarget,
       'defaultText'     => $this->defaultText,
+      'enableAriaLabel' => $this->enableAriaLabel,
+      'enableTitle'     => $this->enableTitle,
       'owner'           => $element,
     ];
 
@@ -98,16 +110,25 @@ public function normalizeValue($value, ElementInterface $element = null) {
       $attr += array_filter(
         json_decode($value, true) ?: [],
         function ($key) {
-          return in_array($key, [ 'customText', 'target', 'type', 'value' ]);
+          return in_array($key, [
+            'ariaLabel',
+            'customText',
+            'target',
+            'title',
+            'type',
+            'value'
+          ]);
         },
         ARRAY_FILTER_USE_KEY
       );
 
       // If it is an array and the field `isCpFormData` is set, we are saving a cp form
     } else if (is_array($value) && isset($value['isCpFormData'])) {
       $attr += [
+        'ariaLabel'  => $this->enableAriaLabel && isset($value['ariaLabel']) ? $value['ariaLabel'] : null,
         'customText' => $this->allowCustomText && isset($value['customText']) ? $value['customText'] : null,
         'target'     => $this->allowTarget && isset($value['target']) ? $value['target'] : null,
+        'title'      => $this->enableTitle && isset($value['title']) ? $value['title'] : null,
         'type'       => isset($value['type']) ? $value['type'] : null,
         'value'      => $this->getLinkValue($value)
       ];

diff --git a/src/models/Link.php b/src/models/Link.php
@@ -26,7 +26,12 @@ class Link extends Model
   public $allowTarget;
 
   /**
-   * @var string
+   * @var string|null
+   */
+  public $ariaLabel;
+
+  /**
+   * @var string|null
    */
   public $customText;
 
@@ -35,11 +40,26 @@ class Link extends Model
    */
   public $defaultText;
 
+  /**
+   * @var bool
+   */
+  public $enableAriaLabel;
+
+  /**
+   * @var bool
+   */
+  public $enableTitle;
+
   /**
    * @var string
    */
   public $target;
 
+  /**
+   * @var string|null
+   */
+  public $title;
+
   /**
    * @var string
    */
@@ -67,6 +87,13 @@ public function __construct($config = []) {
     parent::__construct($config);
   }
 
+  /**
+   * @return null|string
+   */
+  public function getAriaLabel() {
+    return $this->ariaLabel;
+  }
+
   /**
    * @return null|\craft\base\ElementInterface
    */
@@ -104,11 +131,22 @@ public function getLink($attributesOrText = null) {
     }
 
     $attr = [ 'href' => $url ];
+
+    $ariaLabel = $this->getAriaLabel();
+    if (!empty($ariaLabel)) {
+      $attr['arial-label'] = $ariaLabel;
+    }
+
     $target = $this->getTarget();
-    if (!is_null($target)) {
+    if (!empty($target)) {
       $attr['target'] = $target;
     }
 
+    $title = $this->getTitle();
+    if (!empty($title)) {
+      $attr['title'] = $title;
+    }
+
     // If a string is passed, override the text component
     if (is_string($attributesOrText)) {
       $text = $attributesOrText;
@@ -183,6 +221,13 @@ public function getText() {
     return \Craft::t('site', $this->defaultText);
   }
 
+  /**
+   * @return null|string
+   */
+  public function getTitle() {
+    return $this->title;
+  }
+
   /**
    * Try to use provided custom text or field default.
    * Allows user to specify a fallback string if the custom text and default are not set.

diff --git a/src/templates/_input.twig b/src/templates/_input.twig
@@ -30,6 +30,16 @@
 
     {% if hasSettings %}
       <div class="linkfield--settings{{ type == '' ? ' hidden' }}">
+        {% if settings.allowTarget %}
+          {{ forms.checkboxField({
+            id: name~'-Target',
+            name: name~'[target]',
+            value: '_blank',
+            label: 'Open link in new window?'|t('typedlinkfield'),
+            checked: value.target is defined and value.target == '_blank' ? true : null
+          }) }}
+        {% endif %}
+
         {% if settings.allowCustomText %}
           {{ forms.textField({
             id: name~'-customText',
@@ -40,13 +50,21 @@
           }) }}
         {% endif %}
 
-        {% if settings.allowTarget %}
-          {{ forms.checkboxField({
-            id: name~'-Target',
-            name: name~'[target]',
-            value: '_blank',
-            label: 'Open link in new window?'|t('typedlinkfield'),
-            checked: value.target is defined and value.target == '_blank' ? true : null
+        {% if settings.enableAriaLabel %}
+          {{ forms.textField({
+            id: name~'-AriaLabel',
+            name: name~'[ariaLabel]',
+            label: 'Aria label'|t('typedlinkfield'),
+            value: value.ariaLabel is defined ? value.ariaLabel : ""
+          }) }}
+        {% endif %}
+
+        {% if settings.enableTitle %}
+          {{ forms.textField({
+            id: name~'-Title',
+            name: name~'[title]',
+            label: 'Title'|t('typedlinkfield'),
+            value: value.title is defined ? value.title : ""
           }) }}
         {% endif %}
       </div>

diff --git a/src/templates/_settings-general.twig b/src/templates/_settings-general.twig
@@ -27,3 +27,15 @@
   name: 'allowTarget',
   checked: settings.allowTarget
 }) }}
+
+{{ forms.checkboxField({
+  label: 'Enable aria label support'|t('typedlinkfield'),
+  name: 'enableAriaLabel',
+  checked: settings.enableAriaLabel
+}) }}
+
+{{ forms.checkboxField({
+  label: 'Enable title support'|t('typedlinkfield'),
+  name: 'enableTitle',
+  checked: settings.enableTitle
+}) }}