Remove skip to content btn if anchor does not exist

elementor · Feb 14, 2025 · 415bda6 · 415bda6
1 parent 39d0bed
commit 415bda6
Showing 1 changed file with 56 additions and 49 deletions.
diff --git a/modules/core/components/skip-link.php b/modules/core/components/skip-link.php
@@ -5,67 +5,74 @@
 use EA11y\Modules\Settings\Classes\Settings;
 
 if ( ! defined( 'ABSPATH' ) ) {
-    exit; // Exit if accessed directly.
+	exit; // Exit if accessed directly.
 }
 
 class Skip_Link {
-    private $settings;
+	private $settings;
 
-    public function get_name(): string {
-        return 'skip-link';
-    }
+	public function get_name(): string {
+		return 'skip-link';
+	}
 
-    public function enqueue_skip_link_styles() {
-        wp_enqueue_style(
-            'ea11y-skip-link',
-            EA11Y_ASSETS_URL . '/css/skip-link.css',
-            [],
-            EA11Y_VERSION
-        );
-    }
+	public function enqueue_skip_link_styles() {
+		wp_enqueue_style(
+			'ea11y-skip-link',
+			EA11Y_ASSETS_URL . '/css/skip-link.css',
+			[],
+			EA11Y_VERSION
+		);
+	}
 
-    public function render_skip_link() {
-        ?>
-      <script>
-        const onSkipLinkClick = () => {
-          const htmlElement = document.querySelector('html');
+	public function render_skip_link() {
+		?>
+		<script>
+			const onSkipLinkClick = () => {
+				const htmlElement = document.querySelector('html');
 
-          htmlElement.style['scroll-behavior'] = 'smooth';
+				htmlElement.style['scroll-behavior'] = 'smooth';
 
-          setTimeout( () => htmlElement.style['scroll-behavior'] = null, 1000 );
-        }
-      </script>
+				setTimeout( () => htmlElement.style['scroll-behavior'] = null, 1000 );
+			}
+			document.addEventListener("DOMContentLoaded", () => {
+				if (!document.querySelector('<?php echo esc_url( $this->settings['anchor'] ); ?>')) {
+					document.querySelector('.ea11y-skip-to-content-link').remove();
+				}
+			});
+		</script>
 
-        <a class="ea11y-skip-to-content-link"
-           href="<?php echo esc_url( $this->settings['anchor'] );?>"
-           tabindex="1"
-           onclick="onSkipLinkClick()">
-            <?php esc_attr_e('Skip to content', 'pojo-accessibility') ?>
+		<a class="ea11y-skip-to-content-link"
+			href="<?php echo esc_url( $this->settings['anchor'] ); ?>"
+			tabindex="1"
+			onclick="onSkipLinkClick()"
+		>
+			<?php esc_attr_e( 'Skip to content', 'pojo-accessibility' ); ?>
 
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-                <path d="M18 6V12C18 12.7956 17.6839 13.5587 17.1213 14.1213C16.5587 14.6839 15.7956 15 15 15H5M5 15L9 11M5 15L9 19"
-                      stroke="black"
-                      stroke-width="1.5"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"/>
-            </svg>
-        </a>
+			<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+				<path d="M18 6V12C18 12.7956 17.6839 13.5587 17.1213 14.1213C16.5587 14.6839 15.7956 15 15 15H5M5 15L9 11M5 15L9 19"
+					stroke="black"
+					stroke-width="1.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		</a>
 
-        <div class="ea11y-skip-to-content-backdrop"></div>
-        <?php
-    }
+		<div class="ea11y-skip-to-content-backdrop"></div>
+		<?php
+	}
 
-    /**
-     * Module constructor.
-     */
-    public function __construct() {
-        $this->settings = get_option( Settings::SKIP_TO_CONTENT );
+	/**
+	 * Module constructor.
+	 */
+	public function __construct() {
+		$this->settings = get_option( Settings::SKIP_TO_CONTENT );
 
-        if ($this->settings && ! empty( $this->settings['enabled'] )) {
-            remove_action( 'wp_footer', 'the_block_template_skip_link' );
+		if ( $this->settings && ! empty( $this->settings['enabled'] ) ) {
+			remove_action( 'wp_footer', 'the_block_template_skip_link' );
 
-            add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_skip_link_styles' ] );
-            add_action( 'wp_head', [ $this, 'render_skip_link' ] );
-        }
-    }
+			add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_skip_link_styles' ] );
+			add_action( 'wp_head', [ $this, 'render_skip_link' ] );
+		}
+	}
 }