Problem/Motivation
Currently, when using the outline checker, inline SVGs are pulled in with the text of the H element, but given the behavior of textContent, this can lead to reading of inline style tags:
Display:
Outline:
Note that the SVG element has aria-hidden=true:
<h2 class="coe-widget-title">
<span class="prefix-icon">
<svg role="presentation" aria-hidden="true" id="Layer_1" data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.01 23.51">
<defs>
<style>.cls-1{fill:#a91e22;}.cls-2{fill:#c2c2c2;}</style>
</defs>
<title>double-arrow</title>
<polygon class="cls-1"
points="14.42 11.75 11.76 9.08 11.75 9.08 2.67 0 0 2.67 9.08 11.75 0 20.84 2.67 23.51 11.75 14.42 11.76 14.42 14.42 11.76 14.42 11.75 14.42 11.75"></polygon>
<polygon class="cls-2"
points="25.01 11.75 22.34 9.08 22.34 9.08 13.25 0 10.58 2.67 19.67 11.75 10.58 20.84 13.25 23.51 22.34 14.42 22.34 14.42 25.01 11.76 25.01 11.75 25.01 11.75"></polygon>
</svg>
</span>This is some text!</h2>
Steps to reproduce
Create a header element that includes an inline SVG that includes a style tag.
Proposed resolution
Ideally, processing should scrub the style tag, or respect aria-hidden. textContent does not do this directly. I am not a JS person, but below is an AI proposed solution.
function processInlineSVG(element) {
// Clone the element to preserve the original structure
var clone = element.cloneNode(true);
// Check if there's an inline SVG with aria-hidden="true"
var svgElement = clone.querySelector('svg[aria-hidden="true"]');
if (svgElement) {
svgElement.parentNode.removeChild(svgElement);
} else {
// If no aria-hidden="true", remove the style tag within the inline SVG
var svgElements = clone.querySelectorAll('svg');
svgElements.forEach(function (svg) {
var styleElement = svg.querySelector('style');
if (styleElement) {
styleElement.parentNode.removeChild(styleElement);
}
});
}
// Return the cleaned text content
return clone.textContent;
}
Remaining tasks
User interface changes
API changes
Data model changes