When you add a code block to the CKEditor 5, there is a small label that specifies which language the code block is. Currently it is inaccessible as an assistive technology user may not necessarily be able to pick that label up.
Is there a clean way to add an aria-label to this? I've tried an event listener but it has various issues.
This is a snippet of how I'm solving the issue currently. However it only fires on change and so doesn't provide an aria-label when loading a page that already has an editor with a code block. It's also not sensible to have a setTimeout which is there as the change trigger takes a moment to generate pre elements and prevents it being null before it's had a moment to update.
for (let id in editors) {
editors[id].model.document.on('change', () => {
setTimeout(() => {
const preElements = document.querySelectorAll('pre');
preElements.forEach(function (pre) {
const code = pre.querySelector('code[class^="language-"]');
if (code) {
const language = code.className.replace('language-', '');
pre.setAttribute('aria-label', language);
}
});
}, 300);
});
}