aria label on link

metabolism · Apr 2, 2024 · ff4cd9b · ff4cd9b
1 parent dc882ba
commit ff4cd9b
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 5 deletions.
diff --git a/acf-extensions.php b/acf-extensions.php
@@ -2,14 +2,14 @@
 /*
     Plugin Name: Advanced Custom Fields Extensions
     Description: Advanced Custom Fields add on. Create components, component field, hidden field and latest post field
-    Version: 1.3.9
+    Version: 1.3.10
     Author: Metabolism
     License: MIT
 */
 
 defined('ABSPATH') or die('No script kiddies please!');
 
-define('ACF_EXTENSIONS_VERSION', '1.3.9');
+define('ACF_EXTENSIONS_VERSION', '1.3.10');
 
 /**
  * Load up the translation files

diff --git a/changelog.md b/changelog.md
@@ -1,6 +1,9 @@
 CHANGELOG
 ---------
 
+## 1.3.10
+- Added aria label input on link selector
+
 ## 1.3.9
 - License changed to MIT
 

diff --git a/composer.json b/composer.json
@@ -1,6 +1,6 @@
 {
   "name":"metabolism/acf-extensions",
-  "version": "1.3.9",
+  "version": "1.3.10",
   "type": "wordpress-plugin",
   "description": "ACF Extensions plugin with components, hidden field, dynamic select, inline micro editor, Instagram post, children and latest posts field",
   "license": "MIT",

diff --git a/js/input.js b/js/input.js
@@ -1,5 +1,14 @@
 ;(function($) {
 
+    function wpse_getLink() {
+        var _ed = window.tinymce.get( window.wpActiveEditor );
+        if ( _ed && ! _ed.isHidden() ) {
+            return _ed.dom.getParent( _ed.selection.getNode(), 'a[href]' );
+        }
+        return null;
+    }
+
+    // add collapse / expand all on flexible field
     $(document).ready(function (){
 
         $('.acf-components-collapse').click(function (){
@@ -38,9 +47,48 @@
                 });
             }
         });
+
+        /**
+         * Modify link attributes to include aria label
+         */
+        wpLink.getAttrs = function() {
+
+            wpLink.correctURL();
+
+            return {
+                'aria-label' : $.trim( $( '#wp-link-aria_label' ).val() ),
+                'href'       : $.trim( $( '#wp-link-url' ).val() ),
+                'target'     : $( '#wp-link-target' ).prop( 'checked' ) ? '_blank' : ''
+            };
+        }
     })
 
-    acf.fields.textarea_counter = acf.field.extend({
+    // add new aria label field
+    $(document).on( 'wplink-open', function( wrap ) {
+
+        // Custom HTML added to the link dialog
+        if( $('#wp-link-aria_label').length < 1 )
+            $('#link-options .link-target').before( '<div class="wp-link-text-field"><label><span>Aria label</span> <input type="text" id="wp-link-aria_label"/></label></div>');
+
+        // Get the current link selection:
+        var _node = wpse_getLink();
+
+        if( _node ) {
+
+            // Fetch the rel attribute
+            var _aria_label = $( _node ).attr( 'aria-label' );
+
+            // Update the checkbox
+            $('#wp-link-aria_label').val( _aria_label );
+        }
+        else{
+
+            $('#wp-link-aria_label').val('');
+        }
+
+    });
+
+    acf.field.extend({
         type: 'textarea',
         events: {
             'input textarea': 'change_count',
@@ -65,7 +113,7 @@
         }
     });
 
-    acf.fields.text_counter = acf.field.extend({
+    acf.field.extend({
         type: 'text',
         events: {
             'input input': 'change_count',
@@ -89,6 +137,34 @@
         }
     });
 
+    acf.field.extend({
+        type: 'link',
+        events: {
+            'click a[data-name="add"]': 'onClickEdit',
+            'click a[data-name="edit"]': 'onClickEdit',
+            'change .link-node': 'onChange'
+        },
+
+        onClickEdit: function (e) {
+            var $input = e.$el.closest('.acf-input');
+
+            if( !$input.find('.input-aria_label').length ){
+
+                let name = $input.find('.input-title').attr('name');
+                $input.find('.acf-hidden').append('<input type="hidden" class="input-aria_label" name="'+name.replace('[title]', '[aria_label]')+'" value="">')
+            }
+
+            $('#wp-link-aria_label').val( $input.find('.input-aria_label').val() )
+        },
+        onChange: function (e) {
+
+            var $input = e.$el.closest('.acf-input');
+
+            if( $('#wp-link-aria_label').length && $input.find('.input-aria_label').length)
+                $input.find('.input-aria_label').val( $('#wp-link-aria_label').val() )
+        }
+    });
+
     var dynamicSelect = acf.Field.extend({
         type: 'dynamic_select',
         select2: false,