Skip to content
Snippets Groups Projects
Unverified Commit b7ab11cc authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3231321 by bnjmnm, nod_, lauriii: Improve keyboard accessibility in a particular edge case

parent e1c6ba37
No related branches found
No related tags found
38 merge requests!7471uncessary 5 files are moved from media-library folder to misc folder,!7452Issue #1797438. HTML5 validation is preventing form submit and not fully...,!54479.5.x SF update,!5014Issue #3071143: Table Render Array Example Is Incorrect,!4868Issue #1428520: Improve menu parent link selection,!4289Issue #1344552 by marcingy, Niklas Fiekas, Ravi.J, aleevas, Eduardo Morales...,!4114Issue #2707291: Disable body-level scrolling when a dialog is open as a modal,!3630Issue #2815301 by Chi, DanielVeza, kostyashupenko, smustgrave: Allow to create...,!3291Issue #3336463: Rewrite rules for gzipped CSS and JavaScript aggregates never match,!3143Issue #3313342: [PHP 8.1] Deprecated function: strpos(): Passing null to parameter #1 LayoutBuilderUiCacheContext.php on line 28,!3102Issue #3164428 by DonAtt, longwave, sahil.goyal, Anchal_gupta, alexpott: Use...,!2853#3274419 Makes BaseFieldOverride inherit the internal property from the base field.,!2719Issue #3110137: Remove Classy from core.,!2437Issue #3238257 by hooroomoo, Wim Leers: Fragment link pointing to <textarea>...,!2378Issue #2875033: Optimize joins and table selection in SQL entity query implementation,!2074Issue #2707689: NodeForm::actions() checks for delete access on new entities,!2062Issue #3246454: Add weekly granularity to views date sort,!1974Issue #3036862 demonstration,!1591Issue #3199697: Add JSON:API Translation experimental module,!1484Exposed filters get values from URL when Ajax is on,!1255Issue #3238922: Refactor (if feasible) uses of the jQuery serialize function to use vanillaJS,!1254Issue #3238915: Refactor (if feasible) uses of the jQuery ready function to use VanillaJS,!1162Issue #3100350: Unable to save '/' root path alias,!1073issue #3191727: Focus states on mobile second level navigation items fixed,!10223132456: Fix issue where views instances are emptied before an ajax request is complete,!957Added throwing of InvalidPluginDefinitionException from getDefinition().,!925Issue #2339235: Remove taxonomy hard dependency on node module,!877Issue #2708101: Default value for link text is not saved,!873Issue #2875228: Site install not using batch API service,!872Draft: Issue #3221319: Race condition when creating menu links and editing content deletes menu links,!844Resolve #3036010 "Updaters",!712Issue #2909128: Autocomplete intermittent on Chrome Android,!617Issue #3043725: Provide a Entity Handler for user cancelation,!579Issue #2230909: Simple decimals fail to pass validation,!560Move callback classRemove outside of the loop,!555Issue #3202493,!485Sets the autocomplete attribute for username/password input field on login form.,!30Issue #3182188: Updates composer usage to point at ./vendor/bin/composer
This commit is part of merge request !1581. Comments created here will be created in the context of that merge request.
......@@ -3,7 +3,7 @@
* Provides admin UI for the CKEditor 5.
*/
((Drupal, drupalSettings, $, JSON, once, Sortable) => {
((Drupal, drupalSettings, $, JSON, once, Sortable, { tabbable }) => {
const toolbarHelp = [
{
message: Drupal.t(
......@@ -584,10 +584,7 @@
// that can catch blur-causing events before the blur happens. If the
// tooltip is hidden before the blur event, the outline will disappear
// correctly.
once(
'safari-focus-fix',
document.querySelectorAll('.ckeditor5-toolbar-item'),
).forEach((item) => {
once('safari-focus-fix', '.ckeditor5-toolbar-item').forEach((item) => {
item.addEventListener('keydown', (e) => {
const keyCodeDirections = {
9: 'tab',
......@@ -679,9 +676,7 @@
// information can be retrieved after AJAX rebuilds.
once(
'ui-state-storage',
document.querySelector(
'#filter-format-edit-form, #filter-format-add-form',
),
'#filter-format-edit-form, #filter-format-add-form',
).forEach((form) => {
form.setAttribute('data-drupal-ui-state', JSON.stringify({}));
});
......@@ -699,7 +694,32 @@
const activeTab = getUiStateStorage(`${id}-active-tab`);
if (activeTab) {
setTimeout(() => {
document.querySelector(activeTab).click();
const activeTabLink = document.querySelector(activeTab);
activeTabLink.click();
// Only change focus on the plugin-settings-wrapper element.
if (id !== 'plugin-settings-wrapper') {
return;
}
// If the current focused element is not the body, then the user
// navigated away from the vertical tab area and is somewhere else
// within the form. Do not change the current focus.
if (document.activeElement !== document.body) {
return;
}
// If the active element is the body then we can assume that the
// focus was on an element that was replaced by an ajax command.
// If that is the case restore the focus to the active tab that
// was just rebuilt.
const targetTabPane = document.querySelector(
activeTabLink.getAttribute('href'),
);
if (targetTabPane) {
const tabbableElements = tabbable(targetTabPane);
if (tabbableElements.length) {
tabbableElements[0].focus();
}
}
});
}
......@@ -718,12 +738,8 @@
};
once(
'plugin-settings',
document.querySelector('#plugin-settings-wrapper'),
).forEach(maintainActiveVerticalTab);
once(
'filter-settings',
document.querySelector('#filter-settings-wrapper'),
'maintainActiveVerticalTab',
'#plugin-settings-wrapper, #filter-settings-wrapper',
).forEach(maintainActiveVerticalTab);
// Add listeners to maintain focus after AJAX rebuilds.
......@@ -1022,4 +1038,4 @@
});
},
};
})(Drupal, drupalSettings, jQuery, JSON, once, Sortable);
})(Drupal, drupalSettings, jQuery, JSON, once, Sortable, tabbable);
......@@ -5,7 +5,9 @@
* @preserve
**/
((Drupal, drupalSettings, $, JSON, once, Sortable) => {
((Drupal, drupalSettings, $, JSON, once, Sortable, {
tabbable
}) => {
const toolbarHelp = [{
message: Drupal.t("The toolbar buttons that don't fit the user's browser window width will be grouped in a dropdown. If multiple toolbar rows are preferred, those can be configured by adding an explicit wrapping breakpoint wherever you want to start a new row.", null, {
context: 'CKEditor 5 toolbar help text, default, no explicit wrapping breakpoint'
......@@ -303,7 +305,7 @@
});
render(container, selected, available, dividers);
});
once('safari-focus-fix', document.querySelectorAll('.ckeditor5-toolbar-item')).forEach(item => {
once('safari-focus-fix', '.ckeditor5-toolbar-item').forEach(item => {
item.addEventListener('keydown', e => {
const keyCodeDirections = {
9: 'tab',
......@@ -350,7 +352,7 @@
return form.hasAttribute('data-drupal-ui-state') ? JSON.parse(form.getAttribute('data-drupal-ui-state'))[property] : null;
};
once('ui-state-storage', document.querySelector('#filter-format-edit-form, #filter-format-add-form')).forEach(form => {
once('ui-state-storage', '#filter-format-edit-form, #filter-format-add-form').forEach(form => {
form.setAttribute('data-drupal-ui-state', JSON.stringify({}));
});
......@@ -360,7 +362,26 @@
if (activeTab) {
setTimeout(() => {
document.querySelector(activeTab).click();
const activeTabLink = document.querySelector(activeTab);
activeTabLink.click();
if (id !== 'plugin-settings-wrapper') {
return;
}
if (document.activeElement !== document.body) {
return;
}
const targetTabPane = document.querySelector(activeTabLink.getAttribute('href'));
if (targetTabPane) {
const tabbableElements = tabbable(targetTabPane);
if (tabbableElements.length) {
tabbableElements[0].focus();
}
}
});
}
......@@ -374,8 +395,7 @@
});
};
once('plugin-settings', document.querySelector('#plugin-settings-wrapper')).forEach(maintainActiveVerticalTab);
once('filter-settings', document.querySelector('#filter-settings-wrapper')).forEach(maintainActiveVerticalTab);
once('maintainActiveVerticalTab', '#plugin-settings-wrapper, #filter-settings-wrapper').forEach(maintainActiveVerticalTab);
const selectedButtons = document.querySelector('#ckeditor5-toolbar-buttons-selected');
once('textarea-listener', selectedButtons).forEach(textarea => {
textarea.addEventListener('change', e => {
......@@ -552,4 +572,4 @@
}
};
})(Drupal, drupalSettings, jQuery, JSON, once, Sortable);
\ No newline at end of file
})(Drupal, drupalSettings, jQuery, JSON, once, Sortable, tabbable);
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment