Unverified Commit 5ebd32bd 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

(cherry picked from commit 53cd5e46)
parent 0299fa54

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

+6 −1
Original line number Diff line number Diff line
@@ -567,11 +567,16 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d 
        label = _ref7$button.label,

        id = _ref7$button.id,

        listType = _ref7.listType;

    var 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')

    };

    var visuallyHiddenLabel = Drupal.t("@listType button @label", {

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

      '@label': label

    });

    return "\n      <li class=\"ckeditor5-toolbar-item ckeditor5-toolbar-item-".concat(id, "\" role=\"option\" tabindex=\"0\" data-drupal-selector=\"ckeditor5-toolbar-button\" data-id=\"").concat(id, "\" data-label=\"").concat(label, "\" data-divider=\"").concat(listType === 'divider', "\">\n        <span class=\"ckeditor5-toolbar-button ckeditor5-toolbar-button-").concat(id, "\">\n          <span class=\"visually-hidden\">").concat(visuallyHiddenLabel, "</span>\n        </span>\n        <span class=\"ckeditor5-toolbar-tooltip\" aria-hidden=\"true\">").concat(label, "</span>\n      </li>\n    ");

    return "\n      <li class=\"ckeditor5-toolbar-item ckeditor5-toolbar-item-".concat(id, "\" role=\"option\" tabindex=\"0\" data-drupal-selector=\"ckeditor5-toolbar-button\" data-id=\"").concat(id, "\" data-label=\"").concat(label, "\" data-divider=\"").concat(listType === 'divider', "\">\n        <span class=\"ckeditor5-toolbar-button ckeditor5-toolbar-button-").concat(id, "\">\n          <span class=\"visually-hidden\">").concat(visuallyHiddenLabel, ". ").concat(buttonInstructions[listType], "</span>\n        </span>\n        <span class=\"ckeditor5-toolbar-tooltip\" aria-hidden=\"true\">").concat(label, " </span>\n      </li>\n    ");

  };



  Drupal.theme.ckeditor5Admin = function (_ref8) {