Added: Fix for adding skip links when they are not there

[pattonwebz]

This PR adds a fix to the plugin that users can add a skip link to their pages with.

• It provides a checkbox to enable the feature and a text input to type in the target ID
• The target ID field access a comma separated list of possible IDs to target. The list can include the # or not and it will be handled appropriately.
• When enabled it inlines some JS that will attempt to detect if there is a valid skip link already and if so do nothing
  • If no skip link is found it will attempt to find one of the IDs referenced in the targets list.
  • If it finds an ID then it will clone a skip link and some styles for it from a <template> tag added to the page.

If you are using a FSE enabled theme like Twenty Twenty-Four then it has some features to add a skip links that lives outside the theme so for testing you will need to remove it and add an ID to target. With Twenty Twenty-Four this code works but you may have to tweak main tag to something else if you have a different theme being tested.

remove_action( 'wp_footer', 'the_block_template_skip_link' );
add_action('wp_footer', function () {
	?>
<script>
	// find the first main tag on the page and add id of 'main-content' if it doesn't have one.
	if ( ! document.querySelector( 'main' ).id ) {
		document.querySelector( 'main' ).id = 'main-content';
	}

	// find the first nav on the page and add id of 'main-navigation' if it doesn't have one.
	if ( ! document.querySelector( 'nav' ).id ) {
		document.querySelector( 'nav' ).id = 'main-navigation';
	}
</script>
	<?php
} );

Checklist

• PR is linked to the main issue in the repo (or via card ID in the branch name)
• Tests are added that cover changes

[SteveJonesDev]

This is missing all the settings outlined on the card.

[SteveJonesDev]

I haven't fully tested functionality but this looks good to merge in. There is a lot of structure we need in the PR so that we can base off the develop branch for other fixes.