diff --git a/src/toolbar.js b/src/toolbar.js index 37c75c7..b6595c9 100644 --- a/src/toolbar.js +++ b/src/toolbar.js @@ -286,7 +286,15 @@ export class Toolbar { .replace(/\son\w+\s*=\s*["'][^"']*["']/gi, '') .replace(/\son\w+\s*=\s*[^\s>]*/gi, ''); - return cleaned; + const template = document.createElement('template'); + template.innerHTML = cleaned; + + template.content.querySelectorAll('svg').forEach(icon => { + icon.setAttribute('aria-hidden', 'true'); + icon.setAttribute('focusable', 'false'); + }); + + return template.innerHTML; } /** diff --git a/test/toolbar.test.js b/test/toolbar.test.js index 0c58742..ada5829 100644 --- a/test/toolbar.test.js +++ b/test/toolbar.test.js @@ -121,6 +121,13 @@ console.log('━'.repeat(50)); 'Toolbar item semantics', 'Expected toggle state only on toggle buttons and separators outside tab order' ); + assert( + Array.from(toolbar.querySelectorAll('.overtype-toolbar-button svg')).every(icon => + icon.getAttribute('aria-hidden') === 'true' && icon.getAttribute('focusable') === 'false' + ), + 'Toolbar icons are decorative', + 'Expected every toolbar SVG icon to be hidden from assistive technology and removed from SVG focus' + ); editor.destroy(); })();