Fixing NU HTML validator errors

Hi! First, thanks for this handy plugin!

I’d like to suggest a change for an issue I am having. This plugin is adding a <style> tag in the body that which results in the error “Element style not allowed as child of element body in this context.” as noted by Nu HTML validator (https://validator.nu/). This is a requirement for some accessiblity testing I am doing – that there is no HTML parsing errors.

Currently using version 2.6.5. In this version the style code is output by mystickymenu\welcome-bar.php at line 1405 – 1981. The solution that worked for me is moving the style out of the mysticky_welcome_bar_frontend function which uses add_action( ‘wp_footer’, ‘mysticky_welcome_bar_frontend‘ ); and into a new function which uses add_action(‘wp_head’, ‘mysticky_welcome_bar_frontend_styles’); to put the <style> into the head instead of the body.

So my code is added below mysticky_welcome_bar_frontend and looks like this:

function mysticky_welcome_bar_frontend_styles()
{

	$welcomebar = get_option( 'mysticky_option_welcomebar' );

	if ( ( isset($welcomebar['mysticky_welcomebar_expirydate']) && $welcomebar['mysticky_welcomebar_expirydate'] !='' && strtotime( date('m/d/Y')) > strtotime($welcomebar['mysticky_welcomebar_expirydate']) ) || !isset($welcomebar['mysticky_welcomebar_enable'] ) || (isset($welcomebar['mysticky_welcomebar_enable']) && $welcomebar['mysticky_welcomebar_enable'] == 0) ) {
		return;
	}

	if( isset($welcomebar['mysticky_welcomebar_font']) && $welcomebar['mysticky_welcomebar_font'] == 'System Stack' ){
		$welcomebar['mysticky_welcomebar_font'] = '-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
	}
	
	$welcomebar['mysticky_welcomebar_font'] = (isset($welcomebar['mysticky_welcomebar_font']) && $welcomebar['mysticky_welcomebar_font'] == 'Inherit') ? strtolower($welcomebar['mysticky_welcomebar_font']) : $welcomebar['mysticky_welcomebar_font'];

 ?>
 	<style>
/* The CSS code ... */
        </style>
<?php
}
add_action('wp_head', 'mysticky_welcome_bar_frontend_styles');

A couple other changes I made is adding attributes to the close button to make it keyboard and screen reader accessible (tabindex, role. and aria-label).

<span class="mysticky-welcomebar-close" style="color:#ffffff" tabindex="0" role="button" aria-label="close">X</span>

// JS snippet to allow close button to work with keyboard.
$('.mysticky-welcomebar-close').on('keydown', function(e) {
        if(e.keyCode == '13'){
		$(this).trigger('click');
	}
});

Unfortunately I will have to re-add these changes after any updates. So, I was wondering if it is possible for your team to incorporate something similar into the plugin?

Cheers!

• This topic was modified 11 months, 3 weeks ago by patternmb.
• This topic was modified 11 months, 3 weeks ago by patternmb.