fix(web): add proper disabled state to Pagination Previous/Next

Quentin Gliech and Claude Opus 4.6 (1M context) created 1 month ago

Apply opacity-50, pointer-events-none, aria-disabled, and tabIndex=-1
when disabled. Prevents navigation and gives visual feedback.

Co-Authored-By: Claude Opus 4.6 (1M context) <[e-mail]>

Change summary

webui2/src/components/shared/pagination.tsx | 10 ++++++++--
1 file changed, 8 insertions(+), 2 deletions(-)

Detailed changes

webui2/src/components/shared/pagination.tsx

@@ -36,12 +36,15 @@ export function Info({ children }: InfoProps) {
 const PreviousComponent = React.forwardRef<
   HTMLAnchorElement,
   { className?: string; children?: React.ReactNode; disabled?: boolean } & React.AnchorHTMLAttributes<HTMLAnchorElement>
->(({ className, children, ...props }, ref) => (
+>(({ className, children, disabled, ...props }, ref) => (
   <a
     ref={ref}
+    aria-disabled={disabled || undefined}
+    tabIndex={disabled ? -1 : undefined}
     className={cn(
       buttonVariants({ variant: "ghost", size: "sm" }),
       "text-muted-foreground gap-1",
+      disabled && "pointer-events-none opacity-50",
       className,
     )}
     {...props}
@@ -60,12 +63,15 @@ export const Previous: LinkComponent<typeof PreviousComponent> = (props) => (
 const NextComponent = React.forwardRef<
   HTMLAnchorElement,
   { className?: string; children?: React.ReactNode; disabled?: boolean } & React.AnchorHTMLAttributes<HTMLAnchorElement>
->(({ className, children, ...props }, ref) => (
+>(({ className, children, disabled, ...props }, ref) => (
   <a
     ref={ref}
+    aria-disabled={disabled || undefined}
+    tabIndex={disabled ? -1 : undefined}
     className={cn(
       buttonVariants({ variant: "ghost", size: "sm" }),
       "text-muted-foreground gap-1",
+      disabled && "pointer-events-none opacity-50",
       className,
     )}
     {...props}