Preload font

[Adlago]

In front/global/globalTemplate has this code

{{if !\IPS\Request::i()->isAjax()}}
			<link rel="preload" as="font" type="font/woff2" href='{url="applications/core/interface/fontawesome/webfonts/fa-solid-900.woff2" base="none" noprotocol="true"}' crossorigin="anonymous">
			{{if view.global_view_mode == 'default'}}
				<link rel="preload" as="script" media="(min-width:980px)" href='{url="applications/core/interface/theme/navigationMoreMenu.js" base="none" noprotocol="true"}'>
			{{endif}}
		{{endif}}

A link rel preload font increases the total blocking time. I noticed this already in version 4.x - in which version it was easy to remove this link rel preload.
How in version 5 can this preload font code be removed since using a hook does not access this code?

[Adlago]

If this

<!--!Font Awesome Free 6 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
	

is removed from the includeCSS template, then changes to the head are easily implemented.
Is there an option to remove this from the includeCSS template?

[Matt]

I need to do something with that font file. I'll add it to my list. Ideally it'd be added to the resources area anyway.

[Adlago]

On 11/8/2024 at 5:14 PM, Matt said:

I need to do something with that font file. I'll add it to my list. Ideally it'd be added to the resources area anyway.

Rather, using "preload" in the head should not be fixed, but an option for administrators - who wishes to enable it, who decides to disable it.
According to my analysis, the presence of a preload font in the head increases the total blocking time. Yes, it provides instant appearance of mobile navigation icons, and it is good to exist in version 4.x.
In version 5.0 - when using a footer location for a navigation menu, the use of a preload font only creates an increase in total blocking time - therefore, in my opinion, using "preload" in a head should only be an option, and not a hard addition in a template.

[Baian007]

To Traverse up the DOM to check if any ancestor has aria-hidden="true" and Traverse up the DOM to check if any ancestor previously had aria-hidden,

I added this to js file in the theme

document.addEventListener('focusin', function(event) {
let element = event.target;
while (element) {
if (element.hasAttribute('aria-hidden') && element.getAttribute('aria-hidden') === 'true') {
console.warn('Removing aria-hidden from ancestor of focused element to prevent accessibility issues.', element);
// Temporarily remove aria-hidden
element.setAttribute('data-aria-hidden-temp', 'true');
element.removeAttribute('aria-hidden');
}
element = element.parentElement;
}
});

document.addEventListener('focusout', function(event) {
let element = event.target;

while (element) {
if (element.hasAttribute('data-aria-hidden-temp')) {
console.warn('Restoring aria-hidden to ancestor after focus out.', element);
element.setAttribute('aria-hidden', 'true');
element.removeAttribute('data-aria-hidden-temp');
}
element = element.parentElement;
}
});

 

[Adlago]

5 hours ago, Baian007 said:

To Traverse up the DOM to check if any ancestor has aria-hidden="true" and Traverse up the DOM to check if any ancestor previously had aria-hidden,

I added this to js file in the theme

Do you have a TBT value monitor with and without this code?