MDL-80750 theme_boost: Fix assumption about presence of .dropdown

Updated ARIA handling code to not assume the presence of a .dropdown
element.
- Modified keypress event listener to match
  `[role="menu"] [role="menuitem"]` directly.
- Changed keyboard navigation handling to avoid assuming `.dropdown`.
- Updated focus trapping to use `.dropdown-menu[role="dialog"]` selector
  ensuring compatibility with `.dropup` and other variations.
- Ensured focus untrapping logic uses the same improved selector.
This commit is contained in:
Shamim Rezaie 2024-08-08 04:43:50 +10:00 committed by Mihail Geshoski
parent 6bc8bf6360
commit 1e09fddd01
3 changed files with 10 additions and 8 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -107,7 +107,7 @@ const dropdownFix = () => {
// Search for menu items by finding the first item that has
// text starting with the typed character (case insensitive).
document.addEventListener('keypress', e => {
if (e.target.matches('.dropdown [role="menu"] [role="menuitem"]')) {
if (e.target.matches('[role="menu"] [role="menuitem"]')) {
const menu = e.target.closest('[role="menu"]');
if (!menu) {
return;
@ -139,7 +139,7 @@ const dropdownFix = () => {
handleMenuButton(e);
}
if (e.target.matches('.dropdown [role="menu"] [role="menuitem"]')) {
if (e.target.matches('[role="menu"] [role="menuitem"]')) {
const trigger = e.key;
let next = false;
const menu = e.target.closest('[role="menu"]');
@ -193,8 +193,9 @@ const dropdownFix = () => {
}
});
$('.dropdown').on('shown.bs.dropdown', e => {
const dialog = e.target.querySelector(`#${e.relatedTarget.getAttribute('aria-controls')}[role="dialog"]`);
// Trap focus if the dropdown is a dialog.
$(document).on('shown.bs.dropdown', e => {
const dialog = e.target.querySelector('.dropdown-menu[role="dialog"]');
if (dialog) {
// Use setTimeout to make sure the dialog is positioned correctly to prevent random scrolling.
setTimeout(() => {
@ -203,8 +204,9 @@ const dropdownFix = () => {
}
});
$('.dropdown').on('hidden.bs.dropdown', e => {
const dialog = e.target.querySelector(`#${e.relatedTarget.getAttribute('aria-controls')}[role="dialog"]`);
// Untrap focus when the dialog dropdown is closed.
$(document).on('hidden.bs.dropdown', e => {
const dialog = e.target.querySelector('.dropdown-menu[role="dialog"]');
if (dialog) {
FocusLockManager.untrapFocus();
}