Acessibilidade das caixas de diálogo

Dá às caixas de diálogo do editor os nomes e os papéis de que um leitor de tela precisa. Sem ele, algumas caixas de diálogo são anunciadas como menus e os campos de texto delas não têm nome ("edit, blank"); com ele, a caixa de diálogo Insert Link é uma caixa de diálogo chamada "Insert Link" e os campos dela são anunciados como "URL" e "Text". Vem ativado por padrão e não muda nada do que você vê.

Ative o recurso

O recurso é o plugin dialoga11y.js (também incluído em plugins/all_plugins.js). Basta carregá-lo: dialogA11y tem como padrão true. Não há botão.

<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>
<div id="editor"><p>Select some text and press Ctrl+K to open the link dialog.</p></div>
<script>
var editor = new RichTextEditor("#editor", { toolbar: "full" });   // dialogA11y: false turns it off
</script>

Opções

Opção	Padrão	O que faz
dialogA11y	true	false desativa o plugin.

editor.applyDialogAccessibility() o executa uma vez sobre todos os pop-ups da página, por exemplo depois que o seu código adicionou campos a um pop-up aberto.

O que ele faz

O plugin observa a página em busca dos pop-ups do editor (rte-dropdown-panel, rte-dialog-float e .rte-panel-general). Para cada um que tem uma barra de título (rte-dialog-header):

• Papel. Um pop-up com título e campos de texto recebe role="dialog" em vez do role="menu" que o core lhe dá, porque um menu não pode conter campos de texto. Um pop-up com título que só lista comandos continua sendo um menu. Uma caixa de diálogo não mantém o aria-orientation do menu.
• Nome. Se a caixa de diálogo ainda não tem nome, ela recebe um aria-label com o texto do título, sem um atalho no final, como "(Ctrl+K)".
• Rótulos dos campos. Cada campo sem nome recebe um aria-label, tirado primeiro do rótulo visível ao lado dele, para que o nome falado corresponda ao que está na tela. Campos sem rótulo visível recebem o nome a partir do contêiner do campo (rte-dialog-line-ALT vira "Alternative text", rte-dialog-line-WIDTH vira "Width" e assim por diante), depois do placeholder, depois de texto próximo e, por fim, do nome da caixa de diálogo.

Pop-ups sem barra de título, como os seletores de cor e de fonte, não são alterados. A única exceção é um menu sem título que contém uma caixa de texto visível, que passa a ser role="dialog".

Caixas de diálogo em um frame rte-dialog-outer, como Insert Image, Insert Emoji e o Image editor (criados com editor.createDialog()), não são alteradas: o core já lhes dá role="dialog", um aria-label e aria-modal="true".

A árvore de acessibilidade das caixas de diálogo que verificamos, como o Playwright a informa, com o plugin desativado e ativado:

Caixa de diálogo	dialogA11y: false	Padrão
Insert Link (botão da barra de ferramentas)	role="menu", campos textbox, textbox	role="dialog", campos textbox "URL", textbox "Text"
Insert Link (Ctrl+K)	dialog "Insert Link", campos textbox, textbox	dialog "Insert Link", campos textbox "URL", textbox "Text"
Find and Replace	dialog "Find and Replace", campos textbox, textbox	dialog "Find and Replace", campos textbox "Find", textbox "Replace"

A marcação resultante da caixa de diálogo Insert Link da barra de ferramentas (sem estilos e ícones):

<rte-dropdown-panel role="dialog" aria-label="Insert Link" class="rte-panel-general rte-panel-insertlink">
  <rte-dialog-header><rte-dialog-header-text>Insert Link</rte-dialog-header-text></rte-dialog-header>
  …
  <rte-dialog-line-url …><rte-dialog-input-label>URL</rte-dialog-input-label><input type="text" aria-label="URL">…</rte-dialog-line-url>
  <rte-dialog-line-text …><rte-dialog-input-label>Text</rte-dialog-input-label><input type="text" aria-label="Text"></rte-dialog-line-text>
  …
</rte-dropdown-panel>

O que ele não faz

O tratamento do foco é feito pelo core do editor, não por este plugin. Verificamos isso na caixa de diálogo Insert Link com o plugin desativado e ativado, com o mesmo resultado:

• O foco começa no campo URL (ao abrir com o mouse ou com Ctrl+K).
• Tab e Shift+Tab percorrem URL, Text, Open in new tab, Cancel e Insert e ficam dentro da caixa de diálogo.
• Escape fecha a caixa de diálogo, e o foco volta para o botão Insert Link da barra de ferramentas.

O plugin também não define aria-modal. O core define aria-modal="true" nas caixas de diálogo Insert Image, Insert Emoji e Image editor e aria-modal="false" no Find and Replace, o que permite continuar trabalhando no documento; o painel Insert Link da barra de ferramentas não tem aria-modal.

O que você precisa saber

• Nada é adicionado ao HTML do documento; os atributos ficam nas próprias caixas de diálogo do editor.
• Os nomes vêm do título e dos rótulos visíveis da caixa de diálogo; com um pacote de idioma, portanto, eles ficam nesse idioma. Os nomes de reserva ("Alternative text", "Width"…) são em inglês.
• Na 2.6.12, abrir o Insert Link pressionando Enter ou Espaço no botão da barra de ferramentas coloca o foco em Cancel, e não no campo URL; Ctrl+K e um clique do mouse começam no campo URL.

Relacionados: Declaração de acessibilidade, Verificador de acessibilidade, createDialog.