Seeing Google Chrome message:
Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden
<svg> <svg aria-hidden="true" tabindex="0" viewBox="0 0 448 512" xmlns="https://www.w3.org/2000/svg">…</svg>
Video Tutorial for Fixing Blocked aria-hidden on an element because its descendant retained focus
JavaScript Code to Fix Blocked aria-hidden on an element because its descendant retained focus Errors
Wrap this code in < script > tag. JavaScript (will work for react angular or other js library).
document.addEventListener('DOMContentLoaded', function() {
// Select all SVG elements that have both 'aria-hidden="true"' AND 'tabindex="0"'.
// The attribute selector '[attribute="value"]' is used for precise targeting.
const problematicSVGs = document.querySelectorAll('svg[aria-hidden="true"][tabindex="0"]');
// Iterate over each found SVG element.
problematicSVGs.forEach(svg => {
// Remove the 'tabindex' attribute from the SVG element.
// This ensures that the SVG, which is already marked as hidden from accessibility
// trees, does not unexpectedly receive keyboard focus.
svg.removeAttribute('tabindex');
console.log('Removed tabindex="0" from an aria-hidden SVG:', svg);
});
// Optional: You might also want to log a message if no problematic SVGs were found.
if (problematicSVGs.length === 0) {
console.log('No aria-hidden SVGs with tabindex="0" found. All good!');
}
});
WordPress Code to Fix Blocked aria-hidden on an element because its descendant retained focus Errors
Place in WordPress Theme functions.php and replace with your Theme’s JS handle.
function rankya_do_fix_svg_blocked_aria_hidden() {
wp_add_inline_script(
'astra-theme-js', // Replace with a script handle your WordPress theme already uses, e.g., 'astra-theme-js' 'jupiter-core-js', or even 'jquery', or register a new one.
'document.addEventListener(\'DOMContentLoaded\', function() {
const problematicSVGs = document.querySelectorAll(\'svg[aria-hidden="true"][tabindex="0"]\');
problematicSVGs.forEach(svg => {
svg.removeAttribute(\'tabindex\');
console.log(\'Removed tabindex="0" from an aria-hidden SVG:\', svg);
});
if (problematicSVGs.length === 0) {
console.log(\'No aria-hidden SVGs with tabindex="0" found. All good!\');
}
});',
'after' // 'after' ensures it runs after the main script
);
}
add_action( 'wp_enqueue_scripts', 'rankya_do_fix_svg_blocked_aria_hidden' );
Basically, this issue is related to visitors using Assistive Technology and thus SVG elements with focus and tab-index set to 0 is incorrect coding for the assistive technology devices. Download sample codes here (.zip format)
