fix: upgrade to pointer events for cancellation support, final a11y cleanup

This commit is contained in:
Your Name
2026-02-19 21:42:30 +02:00
parent 37cf83dd5c
commit a5c168ee9d

View File

@@ -829,7 +829,7 @@ function App() {
};
}, [activeTabId, showSidebar]);
const startSidebarResize = (e: React.MouseEvent) => {
const startSidebarResize = (e: React.PointerEvent) => {
e.preventDefault();
e.stopPropagation();
setResizeStartState({ startX: e.clientX, startWidth: sidebarWidth });
@@ -1183,7 +1183,7 @@ function App() {
<AnimatePresence>
{tabs.length > 1 && (
<motion.div className="tab-bar" initial={{ height: 0, opacity: 0 }} animate={{ height: 38, opacity: 1 }} exit={{ height: 0, opacity: 0 }} transition={{ duration: 0.25, ease: materialEase }}>
<button className={`tab-scroll-arrow ${tabScrollState.canLeft ? 'visible' : ''}`} aria-label="Scroll tabs left" onMouseDown={() => startScrollingTabs('left')} onMouseUp={stopScrollingTabs} onMouseLeave={stopScrollingTabs}><ChevronLeft size={14} /></button>
<button className={`tab-scroll-arrow ${tabScrollState.canLeft ? 'visible' : ''}`} aria-label="Scroll tabs left" onPointerDown={() => startScrollingTabs('left')} onPointerUp={stopScrollingTabs} onPointerLeave={stopScrollingTabs}><ChevronLeft size={14} /></button>
<div className="tab-scroll-container" ref={tabScrollRef} role="tablist" onKeyDown={handleTabListKeyDown}>
<AnimatePresence initial={false}>
{tabs.map((tab, index) => (
@@ -1194,7 +1194,7 @@ function App() {
))}
</AnimatePresence>
</div>
<button className={`tab-scroll-arrow ${tabScrollState.canRight ? 'visible' : ''}`} aria-label="Scroll tabs right" onMouseDown={() => startScrollingTabs('right')} onMouseUp={stopScrollingTabs} onMouseLeave={stopScrollingTabs}><ChevronRight size={14} /></button>
<button className={`tab-scroll-arrow ${tabScrollState.canRight ? 'visible' : ''}`} aria-label="Scroll tabs right" onPointerDown={() => startScrollingTabs('right')} onPointerUp={stopScrollingTabs} onPointerLeave={stopScrollingTabs}><ChevronRight size={14} /></button>
</motion.div>
)}
</AnimatePresence>
@@ -1228,7 +1228,7 @@ function App() {
aria-orientation="vertical"
aria-label="Resize sidebar"
tabIndex={0}
onMouseDown={startSidebarResize}
onPointerDown={startSidebarResize}
onKeyDown={(e) => {
if (e.key === 'ArrowRight') {
e.preventDefault();