Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-05-10 11:20:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

correct tab indexes for buttons

Browse source
This commit is contained in:
Timothy Z. 2026-04-28 23:38:59 +03:00
parent a9ff0f6365
commit 4b92d9dd4f
3 changed files with 23 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Chips/Chip/Chip.tsx
View file

@ -33,7 +33,7 @@ const Chip = memo(({ label, value, active, onSelect }: Props) => {
ref={ref}
key={value}
className={classNames(styles['chip'], { [styles['active']]: active })}
tabIndex={-1}
tabIndex={0}
data-value={value}
onClick={onClick}
>

8
src/components/MetaPreview/MetaPreview.js
View file

@ -159,7 +159,7 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
title={linksGroups.get(CONSTANTS.IMDB_LINK_CATEGORY).label}
href={linksGroups.get(CONSTANTS.IMDB_LINK_CATEGORY).href}
target={'_blank'}
{...(compact ? { tabIndex: -1 } : null)}
tabIndex={0}
>
<div className={styles['label']}>{linksGroups.get(CONSTANTS.IMDB_LINK_CATEGORY).label}</div>
<Icon className={styles['icon']} name={'imdb'} />
@ -214,7 +214,7 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
className={styles['action-button']}
icon={'trailer'}
label={t('TRAILER')}
tabIndex={compact ? -1 : 0}
tabIndex={0}
href={trailerHref}
tooltip={compact}
/>
@ -232,7 +232,7 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
className={classnames(styles['action-button'], styles['show-button'])}
icon={'play'}
label={t('SHOW')}
tabIndex={compact ? -1 : 0}
tabIndex={0}
href={showHref}
/>
:
@ -255,7 +255,7 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
icon={'share'}
label={t('CTX_SHARE')}
tooltip={true}
tabIndex={compact ? -1 : 0}
tabIndex={0}
onClick={openShareModal}
/>
{

24
src/services/GamepadNavigation/useContentGamepadNavigation.tsx
View file

@ -3,6 +3,18 @@
import { useEffect } from 'react';
import { useGamepad } from '../GamepadContext';
const FOCUSABLE = '[tabindex="0"]';
const getActiveScope = (fallback: HTMLDivElement | null): HTMLElement | null => {
const modal = document.querySelector<HTMLElement>('.modals-container');
if (modal && modal.children.length > 0) return modal;
const dropdown = fallback?.querySelector<HTMLElement>('[class*="dropdown"][class*="open"]');
if (dropdown) return dropdown;
return fallback;
};
const useContentGamepadNavigation = (
sectionRef: React.RefObject<HTMLDivElement>,
gamepadHandlerId: string
@ -13,12 +25,13 @@ const useContentGamepadNavigation = (
const handleGamepadNavigation = (
direction: 'left' | 'right' | 'up' | 'down'
) => {
const scope = getActiveScope(sectionRef.current);
const elements = Array.from(
sectionRef.current?.querySelectorAll<HTMLDivElement>('[tabindex="0"]') || []
scope?.querySelectorAll<HTMLDivElement>(FOCUSABLE) || []
);
if (elements.length === 0) return;
const activeElement = sectionRef.current?.querySelector<HTMLDivElement>(':focus');
const activeElement = (scope ?? document)?.querySelector<HTMLDivElement>(':focus');
if (!activeElement) {
elements[0].focus();
@ -26,9 +39,7 @@ const useContentGamepadNavigation = (
}
let closestElement: HTMLDivElement | null = null;
const currentRect = activeElement.getBoundingClientRect();
let closestDistance = Infinity;
elements.forEach((el) => {
@ -92,12 +103,13 @@ const useContentGamepadNavigation = (
};
const onSelect = () => {
const scope = getActiveScope(sectionRef.current);
const elements = Array.from(
sectionRef.current?.querySelectorAll<HTMLDivElement>('[tabindex="0"]') || []
scope?.querySelectorAll<HTMLDivElement>(FOCUSABLE) || []
);
if (elements.length === 0) return;
const activeElement = sectionRef.current?.querySelector<HTMLDivElement>(':focus');
const activeElement = (scope ?? document)?.querySelector<HTMLDivElement>(':focus');
if (!activeElement) {
elements[0].focus();