The_Great_Archive/cryptpad
1
0
Fork 0
mirror of https://github.com/cryptpad/cryptpad.git synced 2026-09-14 11:05:41 +05:00
Code Issues Packages Projects Releases Wiki Activity

Fix dropdown focus issues

Browse Source
This commit is contained in:
David Benque 2024-02-23 13:51:59 +00:00 committed by yflory
parent 66f97d0be6
commit 5fc242bd15
3 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
customize.dist/src/less2/include/dropdown.less
View File

@ -160,9 +160,12 @@
li[role="menuitem"] {
border-radius: @variables_radius;
white-space: nowrap;
&:hover, &:focus {
&:hover {
background-color: @cp_dropdown-bg-hover !important;
color: @cp_dropdown-fg;
//color: @cp_dropdown-fg;
}
&:focus-visible {
outline-color: @cp_dropdown-fg;
}
}
&> span {

2
customize.dist/src/less2/include/toolbar.less
View File

@ -366,7 +366,7 @@
.cp-toolbar {
* {
outline-style: none;
&:focus {
&:focus-visible {
outline: @cryptpad_color_brand solid 2px;
}
}

16
www/common/common-ui-elements.js
View File

@ -1559,8 +1559,9 @@ define([
hide = function () {
window.setTimeout(function () {
entry.closest('ul.cp-dropdown-content').hide();
entry.closest('.cp-dropdown-menu-container').find('.cp-dropdown-submenu').hide();
entry.parents('.cp-dropdown-content').hide();
}, 0);
};
@ -1613,7 +1614,11 @@ define([
}
// Menu
var $innerblock = $('<ul>', {'class': 'cp-dropdown-content', 'role': 'menu'});
var $innerblock = $('<ul>', {
'class': 'cp-dropdown-content',
'role': 'menu',
'tabindex': '-1'
});
var $outerblock = $(h('div.cp-dropdown-menu-container', $innerblock[0]));
let $parentMenu = config.isSubmenuOf;
$container.$menu = $innerblock;
@ -1891,11 +1896,16 @@ define([
else { $button.focus(); }
}
if (e.which === 9) { // Tab
hide();
if (e.shiftKey) {
hide();
if ($parentMenu) { $button.closest('li').focus(); }
else { $button.focus(); }
} else {
// Hide parent only if we're not going to focus visible submenu
if ($parentMenu ||
!$container.find('.cp-dropdown-submenu:visible').length) {
hide();
}
if ($parentMenu) { $parentMenu.hide(); }
$innerblock.find('[role="menuitem"]').last().focus();
}