fix: upgrade to pointer events for cancellation support, final a11y cleanup
This commit is contained in:
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user