Issue #3270112 by bnjmnm, Wim Leers: Excessive aria-live announcing from... (577ae19e) · Commits · project / drupal

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
		@@ -172,6 +172,12 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
		}).map(function (helpItem) {
		return helpItem.message;
		});
		var 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(function (button) {
		@@ -573,7 +579,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
		dividerButtons = _ref8.dividerButtons,
		activeToolbar = _ref8.activeToolbar,
		helpMessage = _ref8.helpMessage;
		return "\n <div aria-live=\"polite\" data-drupal-selector=\"ckeditor5-admin-help-message\">\n <p>".concat(helpMessage.join('</p><p>'), "</p>\n </div>\n <div class=\"ckeditor5-toolbar-disabled\">\n <div class=\"ckeditor5-toolbar-available\">\n <label id=\"ckeditor5-toolbar-available-buttons-label\">").concat(Drupal.t('Available buttons'), "</label>\n ").concat(availableButtons, "\n </div>\n <div class=\"ckeditor5-toolbar-divider\">\n <label id=\"ckeditor5-toolbar-divider-buttons-label\">").concat(Drupal.t('Button divider'), "</label>\n ").concat(dividerButtons, "\n </div>\n </div>\n <div class=\"ckeditor5-toolbar-active\">\n <label id=\"ckeditor5-toolbar-active-buttons-label\">").concat(Drupal.t('Active toolbar'), "</label>\n ").concat(activeToolbar, "\n </div>\n ");
		return "\n <div data-drupal-selector=\"ckeditor5-admin-help-message\">\n <p>".concat(helpMessage.join('</p><p>'), "</p>\n </div>\n <div class=\"ckeditor5-toolbar-disabled\">\n <div class=\"ckeditor5-toolbar-available\">\n <label id=\"ckeditor5-toolbar-available-buttons-label\">").concat(Drupal.t('Available buttons'), "</label>\n ").concat(availableButtons, "\n </div>\n <div class=\"ckeditor5-toolbar-divider\">\n <label id=\"ckeditor5-toolbar-divider-buttons-label\">").concat(Drupal.t('Button divider'), "</label>\n ").concat(dividerButtons, "\n </div>\n </div>\n <div class=\"ckeditor5-toolbar-active\">\n <label id=\"ckeditor5-toolbar-active-buttons-label\">").concat(Drupal.t('Active toolbar'), "</label>\n ").concat(activeToolbar, "\n </div>\n ");
		};

		var originalFilterStatusAttach = Drupal.behaviors.filterStatus.attach;