Merge pull request #166 from linked-planet/dev

TimeTable - fix table focus styles

Author: marcus-wishes

library/src/components/styleHelper.ts

@@ -22,3 +22,6 @@ export const inputBaseStyles = twJoin(
 // the focusVisibleOutlineStyles are used in button/others components for the blue focus ring
 export const focusVisibleOutlineStyles =
 	"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-input-border-focused focus-visible:outline-solid" as const
+
+export const focusOutlineStyles =
+	"focus:outline-2 focus:outline-offset-0 focus:outline-input-border-focused focus:outline-solid" as const

library/src/components/timetable/TimeTable.tsx

@@ -5,7 +5,6 @@ import { twJoin, twMerge } from "tailwind-merge"
 import useResizeObserver from "use-resize-observer"
 import { useRateLimitHelper } from "../../utils/rateLimit"
 import { InlineMessage } from "../InlineMessage"
-import { focusVisibleOutlineStyles } from "../styleHelper"
 import { Group as GroupComponent, type TimeTableGroupProps } from "./Group"
 import { Item as ItemComponent } from "./Item"
 import type { TimeTableItemProps } from "./ItemWrapper"
@@ -576,11 +575,7 @@ const LPTimeTableImpl = <G extends TimeTableGroup, I extends TimeSlotBooking>({
 					{/** biome-ignore lint/a11y/useSemanticElements: it is already a table, I dont know why it complains */}
 					<table
 						className={twJoin(
-							"table w-full table-fixed border-separate border-spacing-0 select-none overflow-auto",
-							"focus:outline-2 focus:outline-input-border-focused focus:outline-solid",
-							focusVisibleOutlineStyles,
-							"ring-2 ring-brand-bold",
-							"focus:border-2 focus:border-brand-bold focus:border-solid",
+							"table w-full table-fixed border-separate border-spacing-0 select-none overflow-auto border-2 box-border border-transparent border-solid focus-visible:border-input-border-focused",
 						)}
 						ref={tableRef}
 						// biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: grid makes it "interactive" from screen readers while a table is not interactive

library/src/components/timetable/TimeTableRows.tsx

@@ -45,7 +45,6 @@ import {
 	toggleTimeSlotSelected,
 	useTimeSlotSelection,
 } from "./TimeTableSelectionStore"
-import { getNextTabbableElement } from "./tabUtils"
 import { getLeftAndWidth, getTimeSlotMinutes } from "./timeTableUtils"
 import type { ItemRowEntry } from "./useGoupRows"
 import { useKeyboardHandlers } from "./useKeyboardHandler"
@@ -947,7 +946,7 @@ function TableCell<G extends TimeTableGroup, I extends TimeSlotBooking>({
 					? 0
 					: -1
 			}
-			onFocus={(e) => {
+			onFocus={(_e) => {
 				if (
 					rowNumber === 0 &&
 					groupNumber === 0 &&