nebula-project/NebulaBrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Improve tab navigation and gamepad D-pad support

Browse Source 
Enhanced directional navigation logic to prioritize active tab panel content when moving from tab links, improving keyboard and controller accessibility. Added robust D-pad detection for gamepads, supporting both button and axis-based D-pads for broader controller compatibility. Updated settings tab logic to allow ArrowDown/ArrowRight to move focus from tabs to the active panel, with global fallback for improved accessibility.
This commit is contained in:
Andrew Zambazos
2026-01-19 19:50:51 +13:00
parent de64ae21c0
commit 03a99b7d46
2 changed files with 154 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
renderer/bigpicture.js
+100 -14
View File
@@ -556,8 +556,15 @@ function findElementInDirection(direction) {
y: currentRect.top + currentRect.height / 2
};
// Detect if current element is in sidebar, header, or content area
const currentContainer = current.closest('.bp-sidebar, .bp-header, .bp-content, .osk-overlay, .sidebar, .content');
// Special case: if on a tab link in settings and going down/right, prioritize active panel content
const isTabLink = current.classList.contains('tab-link') || current.closest('.tabs, .tab-link');
const isActiveTab = current.classList.contains('active');
let bestIndex = state.focusIndex;
let bestDistance = Infinity;
let bestScore = Infinity;
state.focusableElements.forEach((element, index) => {
if (element === current) return;
@@ -568,31 +575,70 @@ function findElementInDirection(direction) {
y: rect.top + rect.height / 2
};
// Detect element's container
const elementContainer = element.closest('.bp-sidebar, .bp-header, .bp-content, .osk-overlay, .sidebar, .content');
const sameContainer = currentContainer === elementContainer;
// Check if element is in active tab panel
const inActivePanel = element.closest('.tab-panel.active');
// Check if element is in the correct direction
let isValid = false;
let alignmentScore = 0;
let distanceInDirection = 0;
let distancePerpendicular = 0;
switch (direction) {
case 'up':
isValid = center.y < currentCenter.y - 10;
distanceInDirection = currentCenter.y - center.y;
distancePerpendicular = Math.abs(center.x - currentCenter.x);
// Prioritize elements in the same vertical column
alignmentScore = distancePerpendicular < 50 ? 0 : distancePerpendicular;
break;
case 'down':
isValid = center.y > currentCenter.y + 10;
distanceInDirection = center.y - currentCenter.y;
distancePerpendicular = Math.abs(center.x - currentCenter.x);
// Prioritize elements in the same vertical column
alignmentScore = distancePerpendicular < 50 ? 0 : distancePerpendicular;
break;
case 'left':
isValid = center.x < currentCenter.x - 10;
distanceInDirection = currentCenter.x - center.x;
distancePerpendicular = Math.abs(center.y - currentCenter.y);
// Prioritize elements in the same horizontal row
alignmentScore = distancePerpendicular < 50 ? 0 : distancePerpendicular;
break;
case 'right':
isValid = center.x > currentCenter.x + 10;
distanceInDirection = center.x - currentCenter.x;
distancePerpendicular = Math.abs(center.y - currentCenter.y);
// Prioritize elements in the same horizontal row
alignmentScore = distancePerpendicular < 50 ? 0 : distancePerpendicular;
break;
}
if (isValid) {
const distance = Math.sqrt(
Math.pow(center.x - currentCenter.x, 2) +
Math.pow(center.y - currentCenter.y, 2)
);
// Calculate score - lower is better
// Heavily favor same container, then alignment, then distance
let score = distanceInDirection + alignmentScore * 3;
if (distance < bestDistance) {
bestDistance = distance;
// Special handling: if on active tab and going down/right, strongly prefer active panel content
if (isTabLink && isActiveTab && (direction === 'down' || direction === 'right')) {
if (inActivePanel) {
score = distanceInDirection * 0.1; // Extremely high priority for panel content
} else {
score += 5000; // Very large penalty for non-panel elements
}
}
// Otherwise, strong bonus for staying in same container (sidebar, content, etc.)
else if (!sameContainer) {
score += 2000; // Large penalty for leaving container
}
if (score < bestScore) {
bestScore = score;
bestIndex = index;
}
}
@@ -757,16 +803,56 @@ function pollGamepad() {
requestAnimationFrame(pollGamepad);
}
function readDpadFromButtons(gamepad) {
const up = !!gamepad.buttons[12]?.pressed;
const down = !!gamepad.buttons[13]?.pressed;
const left = !!gamepad.buttons[14]?.pressed;
const right = !!gamepad.buttons[15]?.pressed;
return { up, down, left, right, active: up || down || left || right, source: 'buttons' };
}
function readDpadFromAxes(gamepad) {
const axes = gamepad.axes || [];
const candidates = [
{ x: 6, y: 7 },
{ x: 9, y: 10 },
{ x: 4, y: 5 }
];
for (const { x, y } of candidates) {
if (axes.length <= Math.max(x, y)) continue;
const ax = axes[x] || 0;
const ay = axes[y] || 0;
if (Math.abs(ax) > 0.5 || Math.abs(ay) > 0.5) {
return {
up: ay < -0.5,
down: ay > 0.5,
left: ax < -0.5,
right: ax > 0.5,
active: true,
source: 'axes'
};
}
}
return { up: false, down: false, left: false, right: false, active: false, source: 'axes' };
}
function handleGamepadInput(gamepad) {
// D-pad and left stick for navigation
const leftX = gamepad.axes[0];
const leftY = gamepad.axes[1];
const leftX = gamepad.axes[0] || 0;
const leftY = gamepad.axes[1] || 0;
// D-pad buttons (indices may vary by controller)
const dpadUp = gamepad.buttons[12]?.pressed;
const dpadDown = gamepad.buttons[13]?.pressed;
const dpadLeft = gamepad.buttons[14]?.pressed;
const dpadRight = gamepad.buttons[15]?.pressed;
// D-pad buttons/axes (indices may vary by controller)
const buttonDpad = readDpadFromButtons(gamepad);
const axisDpad = readDpadFromAxes(gamepad);
const dpad = axisDpad.active && (!buttonDpad.active || gamepad.mapping !== 'standard')
? axisDpad
: buttonDpad;
const dpadUp = dpad.up;
const dpadDown = dpad.down;
const dpadLeft = dpad.left;
const dpadRight = dpad.right;
// Analog stick with deadzone
const stickUp = leftY < -CONFIG.STICK_DEADZONE;
renderer/settings.js
+54
View File
@@ -311,6 +311,30 @@ function activateTab(tabName) {
function initTabs() {
const links = document.querySelectorAll('.tab-link');
const getFocusableElements = (container) => {
if (!container) return [];
const selector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
return Array.from(container.querySelectorAll(selector))
.filter(el => !el.disabled && el.getAttribute('aria-hidden') !== 'true' && el.offsetParent !== null);
};
const focusFirstInActivePanel = () => {
const activePanel = document.querySelector('.tab-panel.active') || null;
const focusables = getFocusableElements(activePanel);
if (focusables.length > 0) {
focusables[0].focus({ preventScroll: true });
return true;
}
if (activePanel) {
if (!activePanel.hasAttribute('tabindex')) {
activePanel.setAttribute('tabindex', '-1');
}
activePanel.focus({ preventScroll: true });
return true;
}
return false;
};
// Direct listeners (for accessibility focus handling)
links.forEach((link, index) => {
@@ -324,6 +348,18 @@ function initTabs() {
}
activateTab(name);
});
// Controller/keyboard: move from tab to panel content
link.addEventListener('keydown', (e) => {
if (e.defaultPrevented) return;
if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
const moved = focusFirstInActivePanel();
if (moved) {
e.preventDefault();
e.stopPropagation();
}
}
});
});
// Delegation as a fallback if elements are re-rendered
@@ -341,6 +377,24 @@ function initTabs() {
});
}
// Global fallback: if focus is on sidebar tabs, move into active panel on down/right
document.addEventListener('keydown', (e) => {
if (e.defaultPrevented) return;
if (e.key !== 'ArrowDown' && e.key !== 'ArrowRight') return;
const activeEl = document.activeElement;
const inTabs = activeEl && (activeEl.classList?.contains('tab-link') || activeEl.closest?.('.tabs'));
const inSidebar = activeEl && activeEl.closest?.('.sidebar');
if (inTabs || inSidebar) {
const moved = focusFirstInActivePanel();
if (moved) {
e.preventDefault();
e.stopPropagation();
}
}
}, true);
// Resolve initial tab: hash > storage > default 'general'
let initial = (location.hash || '').replace('#', '') || null;
if (!initial) {