Issue #1872206 by jessebeach, quicksketch, Wim Leers, mgifford: Fixed Improve...

Issue #1872206 by jessebeach, quicksketch, Wim Leers, mgifford: Fixed Improve CKEditor toolbar configuration accessibility.

core/modules/ckeditor/ckeditor.admin.inc

@@ -30,18 +30,29 @@ function template_preprocess_ckeditor_settings_toolbar(&$variables) {
       $buttons[$button_name] = $button;
     }
   }
+  $button_groups = array();
   $variables['active_buttons'] = array();
-  foreach ($editor->settings['toolbar']['buttons'] as $row_number => $row) {
-    foreach ($row as $button_name) {
-      if (isset($buttons[$button_name])) {
-        $variables['active_buttons'][$row_number][] = $buttons[$button_name];
-        if (empty($buttons[$button_name]['multiple'])) {
-          unset($buttons[$button_name]);
+  foreach ($editor->settings['toolbar']['rows'] as $row_number => $row) {
+    $button_groups[$row_number] = array();
+    foreach ($row as $group) {
+      foreach ($group['items'] as $button_name) {
+        if (isset($buttons[$button_name])) {
+          // Save a reference to the button's configured toolbar group.
+          $buttons[$button_name]['group'] = $group['name'];
+          $variables['active_buttons'][$row_number][] = $buttons[$button_name];
+          if (empty($buttons[$button_name]['multiple'])) {
+            unset($buttons[$button_name]);
+          }
+          // Create a list of all the toolbar button groups.
+          if (!in_array($group['name'], $button_groups[$row_number])) {
+            array_push($button_groups[$row_number], $group['name']);
+          }
         }
       }
     }
   }
   $variables['disabled_buttons'] = array_diff_key($buttons, $variables['multiple_buttons']);
+  $variables['button_groups'] = $button_groups;
 }
 
 /**
@@ -66,7 +77,7 @@ function theme_ckeditor_settings_toolbar($variables) {
         '#uri' => $button['image' . $rtl],
         '#title' => $button['label'],
       );
-      $value = '<a href="#" class="cke_button" role="button" title="' . $button['label'] . '" aria-label="' . $button['label'] . '"><span class="cke_button_icon">' . drupal_render($image) . '</span></a>';
+      $value = '<a href="#" role="button" title="' . $button['label'] . '" aria-label="' . $button['label'] . '"><span class="cke_button_icon">' . drupal_render($image) . '</span></a>';
     }
     else {
       $value = '?';
@@ -80,8 +91,13 @@ function theme_ckeditor_settings_toolbar($variables) {
     // Build the button item.
     $button_item = array(
       'value' => $value,
-      'data-button-name' => $button['name'],
+      'data-drupal-ckeditor-button-name' => $button['name'],
+      'class' => array('ckeditor-button'),
     );
+    // If this button has group information, add it to the attributes.
+    if (!empty($button['group'])) {
+      $button_item['group'] = $button['group'];
+    }
     if (!empty($button['attributes'])) {
       $button_item = array_merge($button_item, $button['attributes']);
     }
@@ -110,6 +126,7 @@ function theme_ckeditor_settings_toolbar($variables) {
   $print_buttons = function($buttons) {
     $output = '';
     foreach ($buttons as $button) {
+      unset($button['group']);
       $value = $button['value'];
       unset($button['value']);
       $attributes = (string) new Attribute($button);
@@ -118,6 +135,19 @@ function theme_ckeditor_settings_toolbar($variables) {
     return $output;
   };
 
+  $print_button_group = function($buttons, $group_name, $print_buttons) {
+    $group = drupal_html_class($group_name);
+
+    $output = '';
+    $output .= "<li class=\"ckeditor-toolbar-group\" role=\"presentation\" data-drupal-ckeditor-type=\"group\" data-drupal-ckeditor-toolbar-group-name=\"{$group_name}\" tabindex=\"0\">";
+    $output .= "<h3 class=\"ckeditor-toolbar-group-name\" id=\"ckeditor-toolbar-group-aria-label-for-{$group}\">{$group_name}</h3>";
+    $output .= "<ul class=\"ckeditor-buttons ckeditor-toolbar-group-buttons\" role=\"toolbar\" data-drupal-ckeditor-button-sorting=\"target\" aria-labelledby=\"ckeditor-toolbar-group-aria-label-for-{$group}\">";
+    $output .= $print_buttons($buttons);
+    $output .= "</ul></li>";
+
+    return $output;
+  };
+
   // We don't use theme_item_list() below in case there are no buttons in the
   // active or disabled list, as theme_item_list() will not print an empty UL.
   $output = '';
@@ -125,43 +155,45 @@ function theme_ckeditor_settings_toolbar($variables) {
   $output .= '<legend id="ckeditor-button-configuration">' . t('Toolbar configuration') . '</legend>';
   $output .= '<div class="fieldset-wrapper">';
 
-  // aria-live region for outputing aural information about the state of the
-  // configuration.
-  $output .= '<div id="ckeditor-button-configuration-aria-live" class="visually-hidden" aria-live="polite"></div>';
-
-  $output .= '<div id="ckeditor-button-description" class="fieldset-description">' . t('Move a button into the <em>Active toolbar</em> to enable it, or into the list of <em>Available buttons</em> to disable it. Use dividers to create button groups. Buttons may be moved with the mouse or keyboard arrow keys.') . '</div>';
+  $output .= '<div id="ckeditor-button-description" class="fieldset-description">' . t('Move a button into the <em>Active toolbar</em> to enable it, or into the list of <em>Available buttons</em> to disable it. Buttons may be moved with the mouse or keyboard arrow keys. Toolbar group names are provided to support screen reader users. Empty toolbar groups will be removed upon save.') . '</div>';
 
   $output .= '<div class="ckeditor-toolbar-disabled clearfix">';
+  // Available buttons.
+  $output .= '<div class="ckeditor-toolbar-available">';
+  $output .= '<label for="ckeditor-available-buttons">' . t('Available buttons') . '</label>';
+  $output .= '<ul id="ckeditor-available-buttons" class="ckeditor-buttons" role="form" data-drupal-ckeditor-button-sorting="source">';
+  $output .= $print_buttons($disabled_buttons);
+  $output .= '</ul>';
+  $output .= '</div>';
+  // Dividers.
   $output .= '<div class="ckeditor-toolbar-dividers">';
-  $output .= '<label id="ckeditor-multiple-label">' . t('Dividers') . '</label>';
-  $output .= '<ul class="ckeditor-multiple-buttons" role="form" aria-labelledby="ckeditor-multiple-label">';
+  $output .= '<label for="ckeditor-multiple-buttons">' . t('Button divider') . '</label>';
+  $output .= '<ul id="ckeditor-multiple-buttons" class="ckeditor-multiple-buttons" role="form" data-drupal-ckeditor-button-sorting="dividers">';
   $output .= $print_buttons($multiple_buttons);
   $output .= '</ul>';
   $output .= '</div>';
-  $output .= '<label id="ckeditor-available-buttons">' . t('Available buttons') . '</label>';
-  $output .= '<ul class="ckeditor-buttons" role="form" aria-labelledby="ckeditor-available-buttons">';
-  $output .= $print_buttons($disabled_buttons);
-  $output .= '</ul>';
   $output .= '</div>';
-
-  $output .= '<label id="ckeditor-active-toolbar">' . t('Active toolbar') . '</label>';
-
-  $output .= '<div data-toolbar="active" class="ckeditor-toolbar-active clearfix">';
-  foreach ($active_buttons as $button_row) {
-    $output .= '<ul class="ckeditor-buttons" role="form" aria-labelledby="ckeditor-active-toolbar">';
-    $output .= $print_buttons($button_row);
+  // Active toolbar.
+  $output .= '<div class="clearfix"><label id="ckeditor-active-toolbar">' . t('Active toolbar') . '</label></div>';
+  $output .= '<div data-toolbar="active" role="form" class="ckeditor-toolbar ckeditor-toolbar-active clearfix">';
+  $output .= '<ul class="ckeditor-active-toolbar-configuration" role="presentation" aria-label="' . t('CKEditor toolbar and button configuration.') . '">';
+  foreach ($active_buttons as $row_number => $button_row) {
+    $output .= '<li class="ckeditor-row" role="group" aria-labelledby="ckeditor-active-toolbar">';
+    $output .= '<ul class="ckeditor-toolbar-groups clearfix">';
+    foreach ($variables['button_groups'][$row_number] as $group_name) {
+      $buttons = array_filter($button_row, function ($button) use ($group_name) {
+        return $button['group'] === $group_name;
+      });
+      $output .= $print_button_group($buttons, $group_name, $print_buttons);
+    }
     $output .= '</ul>';
+    $output .= '</li>';
   }
   if (empty($active_buttons)) {
     $output .= '<ul class="ckeditor-buttons">';
     $output .= '</ul>';
   }
 
-  $output .= '<div class="ckeditor-row-controls">';
-  $output .= '<a href="#" role="button" aria-label="' . t('Remove last button row') . '" class="ckeditor-row-remove" title="' . t('Remove row') . '">-</a>';
-  $output .= '<a href="#" role="button" aria-label="' . t('Add additional button row') . '" class="ckeditor-row-add" title="' . t('Add row') . '">+</a>';
-  $output .= '</div>';
-
   $output .= '</div>';
 
   $output .= '</div>';

core/modules/ckeditor/ckeditor.module

@@ -76,9 +76,11 @@ function ckeditor_library_info() {
       array('system', 'jquery.ui.sortable'),
       array('system', 'jquery.ui.draggable'),
       array('system', 'jquery.ui.touch-punch'),
+      array('system', 'backbone'),
+      array('system', 'drupal.dialog'),
+      array('system', 'drupal.announce'),
       array('ckeditor', 'ckeditor'),
       array('editor', 'drupal.editor.admin'),
-      array('system', 'underscore'),
       // Depend on Vertical Tabs, so that Vertical Tabs' JavaScript is executed
       // first, which ensures its behavior runs first.
       array('system', 'drupal.vertical-tabs'),

core/modules/ckeditor/config/schema/ckeditor.schema.yml

@@ -8,15 +8,25 @@ editor.settings.ckeditor:
       type: mapping
       label: 'Toolbar configuration'
       mapping:
-        buttons:
+        rows:
           type: sequence
           label: 'Rows'
           sequence:
             - type: sequence
-              label: 'Buttons'
+              label: 'Button groups'
               sequence:
-                - type: string
-                  label: 'Button'
+                - type: mapping
+                  label: 'Button group'
+                  mapping:
+                    name:
+                      type: string
+                      label: 'Button group name'
+                    items:
+                      type: sequence
+                      label: 'Buttons'
+                      sequence:
+                        - type: string
+                          label: 'Button'
     plugins:
       type: sequence
       label: 'Plugins'

core/modules/ckeditor/css/ckeditor.admin.css

@@ -6,151 +6,252 @@
  * "moono".
  */
 
-.ckeditor-toolbar-active {
+
+
+.ckeditor-toolbar {
   border: 1px solid #b6b6b6;
-  padding: 6px 8px 2px;
+  padding: 0.1667em 0.1667em 0.08em;
   box-shadow: 0 1px 0 white inset;
   background: #cfd1cf;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(whiteSmoke), to(#cfd1cf));
+  background-image: -webkit-linear-gradient(top, whiteSmoke, #cfd1cf);
   background-image: -moz-linear-gradient(top, whiteSmoke, #cfd1cf);
-  background-image: -o-linear-gradient(top, whiteSmoke, #cfd1cf);
-  background-image: -ms-linear-gradient(top, whiteSmoke, #cfd1cf);
   background-image: linear-gradient(top, whiteSmoke, #cfd1cf);
-  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#fff5f5f5', endColorstr='#ffcfd1cf');
   margin: 5px 0;
-  overflow: nowrap;
+  /* Disallow any user selections in the drag-and-drop toolbar config UI. */
+  -webkit-user-select: none;
+  -moz-user-select:    none;
+  -ms-user-select:     none;
+  user-select:         none;
+}
+.ckeditor-toolbar-active {
+  margin-top: 0.25em;
+}
+.ckeditor-toolbar-disabled {
+  margin-bottom: 0.5em;
+}
+.ckeditor-toolbar ul,
+.ckeditor-toolbar-disabled ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
-.ckeditor-toolbar-active > ul {
-  clear: left; /* LTR */
+.ckeditor-row {
+  padding: 2px 0px 3px;
+  border-radius: 3px;
+}
+.ckeditor-group-names-are-visible .ckeditor-row {
+  border: 1px solid whitesmoke;
+}
+.ckeditor-row + .ckeditor-row {
+  margin-top: 0.25em;
+}
+.ckeditor-toolbar-group,
+.ckeditor-toolbar-group-placeholder,
+.ckeditor-add-new-group {
+  display: inline-block;
   float: left; /* LTR */
 }
-[dir="rtl"] .ckeditor-toolbar-active > ul {
-  clear: right;
+[dir="rtl"] .ckeditor-toolbar-group,
+[dir="rtl"] .ckeditor-toolbar-group-placeholder,
+[dir="rtl"] .ckeditor-add-new-group {
+  display: inline-block;
   float: right;
 }
-#ckeditor-button-description {
-  margin-bottom: 1em;
+.ckeditor-toolbar-groups {
+  min-height: 2em;
 }
-.ckeditor-toolbar-dividers {
+.ckeditor-toolbar-group {
+  margin: 0 0.3333em;
+  cursor: move;
+}
+.ckeditor-group-names-are-visible .ckeditor-toolbar-group,
+.ckeditor-add-new-group {
+  border: 1px dotted #a6a6a6;
+  border-radius: 3px;
+  padding: 0.2em 0.4em;
+}
+.ckeditor-toolbar-group.placeholder,
+.ckeditor-toolbar-group.placeholder .ckeditor-toolbar-group-name {
+  cursor: not-allowed;
+}
+.ckeditor-toolbar-group.placeholder .ckeditor-toolbar-group-name {
+  font-style: italic;
+}
+.ckeditor-toolbar-group-name {
+  display: none;
+  font-size: 1em;
+  font-weight: normal;
+  margin: 0.25em 0;
+}
+.ckeditor-group-names-are-visible .ckeditor-toolbar-group-name {
+  display: block;
+  cursor: pointer;
+}
+.ckeditor-toolbar-active .placeholder,
+.ckeditor-toolbar-active .ckeditor-add-new-group {
+  display: none;
+}
+.ckeditor-group-names-are-visible .placeholder,
+.ckeditor-group-names-are-visible .ckeditor-add-new-group {
+  display: block;
+}
+.ckeditor-toolbar-group-buttons {
+  float: left; /* LTR */
+}
+[dir="rtl"] .ckeditor-toolbar-group-buttons {
+  float: right;
+}
+.ckeditor-groupnames-toggle {
+  cursor: pointer;
   float: right; /* LTR */
 }
-[dir="rtl"] .ckeditor-toolbar-dividers {
+[dir="rtl"] .ckeditor-groupnames-toggle {
   float: left;
 }
-.ckeditor-toolbar-disabled ul.ckeditor-buttons {
-  border: 0;
+.ckeditor-toolbar .ckeditor-toolbar-group > li {
+  border: 1px solid white;
+  border-radius: 5px;
+  background-image: -webkit-linear-gradient(transparent 60%, rgba(0, 0, 0, 0.1));
+  background-image: -moz-linear-gradient(transparent 60%, rgba(0, 0, 0, 0.1));
+  background-image: linear-gradient(transparent 60%, rgba(0, 0, 0, 0.1));
+  margin: 3px 6px;
+  padding: 3px;
 }
-.ckeditor-toolbar-disabled ul.ckeditor-buttons li {
-  margin: 2px;
+#ckeditor-button-description {
+  margin-bottom: 1em;
+}
+.ckeditor-toolbar-disabled .ckeditor-toolbar-available,
+.ckeditor-toolbar-disabled .ckeditor-toolbar-dividers {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.ckeditor-toolbar-disabled .ckeditor-toolbar-available {
+  float: left;
+  width: 80%;
+}
+.ckeditor-toolbar-disabled .ckeditor-toolbar-dividers {
+  float: right;
+  width: 20%;
 }
-.ckeditor-toolbar-disabled ul.ckeditor-buttons li a,
-ul.ckeditor-buttons {
+.ckeditor-toolbar-disabled .ckeditor-buttons li a,
+.ckeditor-toolbar .ckeditor-buttons,
+.ckeditor-add-new-group button {
   border: 1px solid #a6a6a6;
   border-bottom-color: #979797;
   border-radius: 3px;
-  box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 0 2px rgba(255, 255, 255, .15) inset, 0 1px 0 rgba(255, 255, 255, .15) inset;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 2px rgba(255, 255, 255, 0.15) inset, 0 1px 0 rgba(255, 255, 255, 0.15) inset;
 }
-
-ul.ckeditor-buttons {
+.ckeditor-toolbar-disabled .ckeditor-buttons {
+  border: 0;
+}
+.ckeditor-toolbar-disabled .ckeditor-buttons li {
+  margin: 2px;
+}
+.ckeditor-buttons {
   min-height: 26px;
   min-width: 26px;
-  list-style: none;
-  padding: 0;
-  margin: 0 6px 5px 0;
-  border: 1px solid #a6a6a6;
-  border-bottom-color: #979797;
-  border-radius: 3px;
-  box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 0 2px rgba(255, 255, 255, .15) inset, 0 1px 0 rgba(255, 255, 255, .15) inset;
 }
-ul.ckeditor-buttons li {
+.ckeditor-buttons li {
   display: inline-block;
   padding: 0;
   margin: 0;
   float: left; /* LTR */
 }
-[dir="rtl"] ul.ckeditor-buttons li {
+[dir="rtl"] .ckeditor-buttons li {
   float: right;
 }
-ul.ckeditor-buttons li a {
-  position: relative;
+.ckeditor-buttons li a,
+.ckeditor-add-new-group button {
+  background: #e4e4e4;
+  background-image: -moz-linear-gradient(top, white, #e4e4e4);
+  background-image: -webkit-linear-gradient(top, white, #e4e4e4);
+  background-image: linear-gradient(top, white, #e4e4e4);
+  color: #474747;
+}
+.ckeditor-buttons li a {
+  border: 0;
+  cursor: move;
   display: block;
   height: 18px;
   padding: 4px 6px;
-  cursor: move;
-  border: 0;
-  white-space: nowrap;
+  position: relative;
   text-decoration: none;
   text-shadow: 0 1px 0 rgba(255,255,255,.5);
-  color: #474747;
-  background: #e4e4e4;
-  background-image: -webkit-gradient(linear,left top,left bottom,from(white),to(#e4e4e4));
-  background-image: -moz-linear-gradient(top,white,#e4e4e4);
-  background-image: -webkit-linear-gradient(top,white,#e4e4e4);
-  background-image: -o-linear-gradient(top,white,#e4e4e4);
-  background-image: -ms-linear-gradient(top,white,#e4e4e4);
-  background-image: linear-gradient(top,white,#e4e4e4);
-  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#ffffffff',endColorstr='#ffe4e4e4');
-}
-ul.ckeditor-buttons li .cke-icon-only {
+  white-space: nowrap;
+}
+.ckeditor-toolbar-dividers {
+  float: right; /* LTR */
+}
+[dir="rtl"] .ckeditor-toolbar-dividers {
+  float: left;
+}
+.ckeditor-buttons li .cke-icon-only {
   text-indent: -9999px;
   width: 16px;
+  /* Firefox includes the offscreen text in the focus indicator, resulting in a
+     far too wide focus indicator. This fixes that. */
+  overflow: hidden;
 }
-ul.ckeditor-buttons li a:focus,
-ul.ckeditor-multiple-buttons li a:focus {
+.ckeditor-buttons li a:focus,
+.ckeditor-buttons li a:active,
+.ckeditor-multiple-buttons li a:focus {
   z-index: 11; /* Ensure focused buttons show their outline on all sides. */
-  outline: 1px dotted #333;
 }
-ul.ckeditor-buttons li:first-child a {
+.ckeditor-buttons li:first-child a {
   border-top-left-radius: 2px; /* LTR */
   border-bottom-left-radius: 2px; /* LTR */
 }
-[dir="rtl"] ul.ckeditor-buttons li:first-child a {
+[dir="rtl"] .ckeditor-buttons li:first-child a {
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
 }
-ul.ckeditor-buttons li:last-child a {
+.ckeditor-buttons li:last-child a {
   border-top-right-radius: 2px; /* LTR */
   border-bottom-right-radius: 2px; /* LTR */
 }
-[dir="rtl"] ul.ckeditor-buttons li:last-child a {
+[dir="rtl"] .ckeditor-buttons li:last-child a {
   border-top-left-radius: 2px;
   border-bottom-left-radius: 2px;
 }
-ul.ckeditor-buttons li.ckeditor-button-placeholder a {
-  background: #333;
-  opacity: 0.3;
+.ckeditor-button-placeholder,
+.ckeditor-toolbar-group-placeholder {
+  background: #9dcae7;
 }
-ul.ckeditor-multiple-buttons {
+.ckeditor-toolbar-group-placeholder {
+  border-radius: 4px;
+}
+.ckeditor-multiple-buttons {
   padding: 1px 2px;
   margin: 5px;
   list-style: none;
   float: left; /* LTR */
 }
-[dir="rtl"] ul.ckeditor-multiple-buttons {
+[dir="rtl"] .ckeditor-multiple-buttons {
   float: right;
 }
-ul.ckeditor-multiple-buttons li {
+.ckeditor-multiple-buttons li {
   display: inline-block;
   float: left; /* LTR */
   margin: 0;
   padding: 0;
 }
-[dir="rtl"] ul.ckeditor-multiple-buttons li {
+[dir="rtl"] .ckeditor-multiple-buttons li {
   float: right;
 }
-ul.ckeditor-multiple-buttons li a {
+.ckeditor-multiple-buttons li a {
   cursor: move;
   display: inline-block;
   height: 18px;
   margin: 0;
   padding: 2px 0;
 }
-ul.ckeditor-buttons li.ckeditor-group-button-separator,
-ul.ckeditor-multiple-buttons li.ckeditor-group-button-separator {
+.ckeditor-buttons .ckeditor-group-button-separator,
+.ckeditor-multiple-buttons .ckeditor-group-button-separator {
   margin: -1px -3px -2px;
 }
-ul.ckeditor-buttons li.ckeditor-group-button-separator a,
-ul.ckeditor-multiple-buttons li.ckeditor-group-button-separator a {
+.ckeditor-buttons .ckeditor-group-button-separator a,
+.ckeditor-multiple-buttons .ckeditor-group-button-separator a {
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAdCAMAAABG4xbVAAAAhFBMVEUAAACmpqampqampqb////l5eX////5+fmmpqatra2urq6vr6+1tbW2tra4uLi6urq8vLzb29ve3t7i4uLl5eXn5+fo6Ojp6enq6urr6+vs7Ozt7e3u7u7v7+/w8PDx8fHy8vLz8/P09PT19fX29vb39/f4+Pj5+fn6+vr7+/v8/Pz+/v7qIQO+AAAACHRSTlMATVmAi8XM29MuWToAAABjSURBVBiVrc5BCoAwDETRMKhtRBduev9LKm1xjItWRBBE6Nt9QkIwOTcUzk0Imi8aoMssxbgoTHMtqsFMLta0vPh2N49HyfdelPg6k9uvX/a+Bmggt1qJRNzQFVgjEnkUZDoBmH57VSypjg4AAAAASUVORK5CYII=) no-repeat center center;
   width: 13px;
   padding: 0;
@@ -161,6 +262,7 @@ ul.ckeditor-multiple-buttons li.ckeditor-group-button-separator a {
 ul.ckeditor-buttons li.ckeditor-button-separator a {
   background: #e4e4e4;
   background-image: -webkit-linear-gradient(#e4e4e4, #b4b4b4);
+  background-image: -moz-linear-gradient(#e4e4e4, #b4b4b4);
   background-image: linear-gradient(#e4e4e4, #b4b4b4);
   height: 24px;
   margin: 1px 0 0;
@@ -169,7 +271,7 @@ ul.ckeditor-buttons li.ckeditor-button-separator a {
   width: 1px;
   z-index: 10;
 }
-ul.ckeditor-multiple-buttons li.ckeditor-button-separator a {
+.ckeditor-multiple-buttons .ckeditor-button-separator a {
   width: 2px;
   padding: 0;
   height: 26px;
@@ -177,12 +279,12 @@ ul.ckeditor-multiple-buttons li.ckeditor-button-separator a {
 }
 .ckeditor-separator {
   background-color: silver;
-  background-color: rgba(0, 0, 0, .2);
+  background-color: rgba(0, 0, 0, 0.2);
   margin: 5px 0;
   height: 18px;
   width: 1px;
   display: block;
-  box-shadow: 1px 0 1px rgba(255, 255, 255, .5)
+  box-shadow: 1px 0 1px rgba(255, 255, 255, 0.5)
 }
 .ckeditor-button-arrow {
   width: 0;
@@ -193,7 +295,6 @@ ul.ckeditor-multiple-buttons li.ckeditor-button-separator a {
   display: inline-block;
   margin: 0 4px 2px;
 }
-
 .ckeditor-row-controls {
   float: right; /* LTR */
   font-size: 18px;

core/modules/ckeditor/lib/Drupal/ckeditor/CKEditorPluginManager.php

@@ -65,7 +65,14 @@ public function __construct(\Traversable $namespaces, CacheBackendInterface $cac
    */
   public function getEnabledPluginFiles(Editor $editor, $include_internal_plugins = FALSE) {
     $plugins = array_keys($this->getDefinitions());
-    $toolbar_buttons = array_unique(NestedArray::mergeDeepArray($editor->settings['toolbar']['buttons']));
+    // Flatten each row.
+    $toolbar_rows = array();
+    foreach ($editor->settings['toolbar']['rows'] as $row_number => $row) {
+      $toolbar_rows[] = array_reduce($editor->settings['toolbar']['rows'][$row_number], function (&$result, $button_group) {
+        return array_merge($result, $button_group['items']);
+      }, array());
+    }
+    $toolbar_buttons = array_unique(NestedArray::mergeDeepArray($toolbar_rows));
     $enabled_plugins = array();
     $additional_plugins = array();
 

core/modules/ckeditor/lib/Drupal/ckeditor/Plugin/CKEditorPlugin/DrupalImageCaption.php

@@ -77,11 +77,17 @@ function isEnabled(Editor $editor) {
     // text editor uses the filter_caption filter and the DrupalImage button is
     // enabled.
     if (isset($filters['filter_caption']) && $filters['filter_caption']->status) {
-      foreach ($editor->settings['toolbar']['buttons'] as $row) {
-        if (in_array('DrupalImage', $row)) {
-          return TRUE;
+      $enabled = FALSE;
+      foreach ($editor->settings['toolbar']['rows'] as $row) {
+        foreach ($row as $group) {
+          foreach ($group['items'] as $button) {
+            if ($button === 'DrupalImage') {
+              $enabled = TRUE;