Unverified Commit a6ee1a1e authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3270112 by bnjmnm, Wim Leers: Excessive aria-live announcing from... 

Issue #3270112 by bnjmnm, Wim Leers: Excessive aria-live announcing from ckeditor5-admin-help-message live region
parent c6aab40f

core/modules/ckeditor5/js/ckeditor5.admin.es6.js

+18 −1
Original line number Diff line number Diff line
@@ -251,6 +251,23 @@ 
          helpItem.condition,

      )

      .map((helpItem) => helpItem.message);



    // Get the existing toolbar help message.

    const existingToolbarHelpText = document.querySelector(

      '[data-drupal-selector="ckeditor5-admin-help-message"]',

    );



    // If the existing toolbar help message does not match the message that is

    // about to be rendered, it is new information that should be conveyed to

    // assistive tech via announce().

    if (

      existingToolbarHelpText &&

      toolbarHelpText.join('').trim() !==

        existingToolbarHelpText.textContent.trim()

    ) {

      Drupal.announce(toolbarHelpText.join(' '));

    }



    root.innerHTML = Drupal.theme.ckeditor5Admin({

      availableButtons: Drupal.theme.ckeditor5AvailableButtons({

        buttons: availableButtons.filter(
@@ -967,7 +984,7 @@ 
    helpMessage,

  }) => {

    return `

    <div aria-live="polite" data-drupal-selector="ckeditor5-admin-help-message">

    <div data-drupal-selector="ckeditor5-admin-help-message">

      <p>${helpMessage.join('</p><p>')}</p>

    </div>

    <div class="ckeditor5-toolbar-disabled">

core/modules/ckeditor5/js/ckeditor5.admin.js

+7 −1
Original line number Diff line number Diff line
@@ -119,6 +119,12 @@ 


  const render = (root, selectedButtons, availableButtons, dividerButtons) => {

    const toolbarHelpText = toolbarHelp.filter(helpItem => selectedButtons.value.includes(helpItem.button) === helpItem.condition).map(helpItem => helpItem.message);

    const existingToolbarHelpText = document.querySelector('[data-drupal-selector="ckeditor5-admin-help-message"]');



    if (existingToolbarHelpText && toolbarHelpText.join('').trim() !== existingToolbarHelpText.textContent.trim()) {

      Drupal.announce(toolbarHelpText.join(' '));

    }



    root.innerHTML = Drupal.theme.ckeditor5Admin({

      availableButtons: Drupal.theme.ckeditor5AvailableButtons({

        buttons: availableButtons.filter(button => !selectedButtons.value.includes(button.id))
@@ -536,7 +542,7 @@ 
      helpMessage

    } = _ref7;

    return `

    <div aria-live="polite" data-drupal-selector="ckeditor5-admin-help-message">

    <div data-drupal-selector="ckeditor5-admin-help-message">

      <p>${helpMessage.join('</p><p>')}</p>

    </div>

    <div class="ckeditor5-toolbar-disabled">