Skip to content

[WIP] 48131: ‘Focus’ not displayed correctly in main menu and modal #12343

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alex40724 wants to merge 2 commits into
base: release_10
Choose a base branch
from
Open

[WIP] 48131: ‘Focus’ not displayed correctly in main menu and modal #12343

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a877486
48131: ‘Focus’ not displayed correctly in main menu and modal
alex40724 Nov 2, 2026
037bbf6
focus first slate entry on main bar entry opening (space)
alex40724 Nov 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/ILIAS/UI/resources/js/MainControls/dist/footer.min.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,4 @@
* https://www.ilias.de
* https://github.com/ILIAS-eLearning
*/
!function(e){"use strict";var t=Object.freeze({__proto__:null,copyText:e=>{if(window.navigator.clipboard)return window.navigator.clipboard.writeText(e);const t=document.createElement("span"),o=document.createRange(),n=window.getSelection();t.textContent=e,document.body.appendChild(t),o.selectNodeContents(t),n.addRange(o);const r=document.execCommand("copy");return n.removeAllRanges(),t.remove(),r?Promise.resolve():Promise.reject(new Error("Unable to copy text."))},showTooltip:(e,t)=>{const o=(Array.from(document.getElementsByTagName("main")).find((e=>!e.hidden))||document.body).getBoundingClientRect();e.parentNode.classList.add("c-tooltip--visible");const n=e.getBoundingClientRect();o.left>n.left?e.style.transform="translateX(calc("+(o.left-n.left)+"px - 50%))":o.right<n.right&&(e.style.transform="translateX(calc("+(o.right-n.right)+"px - 50%))"),setTimeout((()=>{e.parentNode.classList.remove("c-tooltip--visible")}),t)}});e.Footer={permalink:t}}(il);
!function(e){"use strict";var t=Object.freeze({__proto__:null,copyText:e=>{if(window.navigator.clipboard)return window.navigator.clipboard.writeText(e);const t=document.createElement("span"),o=document.createRange(),n=window.getSelection();t.textContent=e,document.body.appendChild(t),o.selectNodeContents(t),n.addRange(o);const r=document.execCommand("copy");return n.removeAllRanges(),t.remove(),r?Promise.resolve():Promise.reject(new Error("Unable to copy text."))},showTooltip:(e,t)=>{const o=(Array.from(document.getElementsByTagName("main")).find(e=>!e.hidden)||document.body).getBoundingClientRect();e.parentNode.classList.add("c-tooltip--visible");const n=e.getBoundingClientRect();o.left>n.left?e.style.transform="translateX(calc("+(o.left-n.left)+"px - 50%))":o.right<n.right&&(e.style.transform="translateX(calc("+(o.right-n.right)+"px - 50%))"),setTimeout(()=>{e.parentNode.classList.remove("c-tooltip--visible")},t)}});e.Footer={permalink:t}}(il);
56 changes: 37 additions & 19 deletions components/ILIAS/UI/resources/js/MainControls/dist/mainbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,13 +116,9 @@ var mainbar = function() {
if(state.entries[id].engaged) {
mb.model.actions.disengageEntry(id);
} else {
// Keep pointer focus on the trigger; Tab enters the slate in the renderer.
mb.model.actions.engageEntry(id);

if(state.entries[id].isTopLevel()) {
after_render = function() {
mb.renderer.focusSubentry(id);
};
}
}
}
break;
Expand Down Expand Up @@ -919,6 +915,22 @@ var persistence = function() {
triggerer.getElement().attr('aria-labelledby', triggerer.html_id);
//a11y

// The slate is outside the trigger's DOM tab order, so enter it on the next Tab.
triggerer.getElement().off('keydown.mainbar-slate').on('keydown.mainbar-slate', function(event) {
if(event.key === ' ' || event.key === 'Enter') {
event.preventDefault();
if(!event.repeat) {
const opening = !entry.engaged;
triggerer.getElement().trigger('click');
if(opening) {
actions.focusSubentry(entry.id);
}
}
} else if(event.key === 'Tab' && !event.shiftKey && entry.engaged) {
event.preventDefault();
actions.focusSubentry(entry.id);
}
});
if(entry.hidden) {
triggerer.mb_hide(is_tool);
} else {
Expand Down Expand Up @@ -1022,22 +1034,28 @@ var persistence = function() {
//unfortunately, this does not work properly via a class
$('.' + css.mainbar_entries).css('visibility', 'visible');
},
// Slate contents vary in structure; use the first visible focusable control.
getFirstFocusableSubentry: function(triggered_entry_id) {
var dom_id = dom_references[triggered_entry_id];
return $('#' + dom_id.slate)
.find('a, button, input, select, textarea, [tabindex]')
.filter(function() {
return actions.isFocusable(this) && $(this).is(':visible');
})
.first();
},
focusSubentry: function(triggered_entry_id) {
var dom_id = dom_references[triggered_entry_id],
someting_to_focus_on = $('#' + dom_id.slate)
.children().first()
.children().first();
someting_to_focus_on_if_listing = someting_to_focus_on.children().first().children().first();
if(someting_to_focus_on[0]) {
if(!actions.isFocusable(someting_to_focus_on[0])) {
someting_to_focus_on.attr('tabindex', '-1');
if(someting_to_focus_on_if_listing[0]
&& actions.isFocusable(someting_to_focus_on_if_listing[0])) {
someting_to_focus_on_if_listing[0].focus();
var subentry = actions.getFirstFocusableSubentry(triggered_entry_id),
triggerer = dom_references[triggered_entry_id].triggerer;
if(subentry[0]) {
// Reverse Tab from the first slate control returns to its owning trigger.
subentry.off('keydown.mainbar-slate-first').on('keydown.mainbar-slate-first', function(event) {
if(event.key === 'Tab' && event.shiftKey) {
event.preventDefault();
document.getElementById(triggerer).focus();
}
} else {
someting_to_focus_on[0].focus();
}
});
subentry[0].focus();
}
},

Expand Down
Loading
Loading