lashman/vesper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

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

Browse Source
This commit is contained in:
Your Name
2026-02-19 21:42:30 +02:00
parent 37cf83dd5c
commit a5c168ee9d
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.tsx
View File

@@ -829,7 +829,7 @@ function App() {
}; };
}, [activeTabId, showSidebar]); }, [activeTabId, showSidebar]);
const startSidebarResize = (e: React.MouseEvent) => { const startSidebarResize = (e: React.PointerEvent) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
setResizeStartState({ startX: e.clientX, startWidth: sidebarWidth }); setResizeStartState({ startX: e.clientX, startWidth: sidebarWidth });
@@ -1183,7 +1183,7 @@ function App() {
<AnimatePresence> <AnimatePresence>
{tabs.length > 1 && ( {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 }}> <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}> <div className="tab-scroll-container" ref={tabScrollRef} role="tablist" onKeyDown={handleTabListKeyDown}>
<AnimatePresence initial={false}> <AnimatePresence initial={false}>
{tabs.map((tab, index) => ( {tabs.map((tab, index) => (
@@ -1194,7 +1194,7 @@ function App() {
))} ))}
</AnimatePresence> </AnimatePresence>
</div> </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> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>
@@ -1228,7 +1228,7 @@ function App() {
aria-orientation="vertical" aria-orientation="vertical"
aria-label="Resize sidebar" aria-label="Resize sidebar"
tabIndex={0} tabIndex={0}
onMouseDown={startSidebarResize} onPointerDown={startSidebarResize}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'ArrowRight') { if (e.key === 'ArrowRight') {
e.preventDefault(); e.preventDefault();