Unverified Commit 0b783bfc authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3270110 by bnjmnm, Wim Leers: Toolbar config items missing "press arrow... 

Issue #3270110 by bnjmnm, Wim Leers: Toolbar config items missing "press arrow to do {x}" instructions for screenreaders
parent a6ee1a1e

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

+13 −2
Original line number Diff line number Diff line
@@ -943,6 +943,15 @@ 
   * @internal

   */

  Drupal.theme.ckeditor5Button = ({ button: { label, id }, listType }) => {

    const buttonInstructions = {

      divider: Drupal.t(

        'Press the down arrow key to use this divider in the active button list',

      ),

      available: Drupal.t('Press the down arrow key to activate'),

      active: Drupal.t(

        'Press the up arrow key to deactivate. Use the right and left arrow keys to move position',

      ),

    };

    const visuallyHiddenLabel = Drupal.t(`@listType button @label`, {

      '@listType': listType !== 'divider' ? listType : 'available',

      '@label': label,
@@ -952,7 +961,9 @@ 
      listType === 'divider'

    }">

        <span class="ckeditor5-toolbar-button ckeditor5-toolbar-button-${id}">

          <span class="visually-hidden">${visuallyHiddenLabel}</span>

          <span class="visually-hidden">${visuallyHiddenLabel}. ${

      buttonInstructions[listType]

    }</span>

        </span>

        <span class="ckeditor5-toolbar-tooltip" aria-hidden="true">${label} </span>

      </li>

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

+7 −2
Original line number Diff line number Diff line
@@ -520,6 +520,11 @@ 
      },

      listType

    } = _ref6;

    const buttonInstructions = {

      divider: Drupal.t('Press the down arrow key to use this divider in the active button list'),

      available: Drupal.t('Press the down arrow key to activate'),

      active: Drupal.t('Press the up arrow key to deactivate. Use the right and left arrow keys to move position')

    };

    const visuallyHiddenLabel = Drupal.t(`@listType button @label`, {

      '@listType': listType !== 'divider' ? listType : 'available',

      '@label': label
@@ -527,7 +532,7 @@ 
    return `

      <li class="ckeditor5-toolbar-item ckeditor5-toolbar-item-${id}" role="option" tabindex="0" data-drupal-selector="ckeditor5-toolbar-button" data-id="${id}" data-label="${label}" data-divider="${listType === 'divider'}">

        <span class="ckeditor5-toolbar-button ckeditor5-toolbar-button-${id}">

          <span class="visually-hidden">${visuallyHiddenLabel}</span>

          <span class="visually-hidden">${visuallyHiddenLabel}. ${buttonInstructions[listType]}</span>

        </span>

        <span class="ckeditor5-toolbar-tooltip" aria-hidden="true">${label} </span>

      </li>