accessibility

website/src/repl/components/incrementor/Incrementor.jsx

@@ -1,26 +1,26 @@
-import { cn } from 'tailwind_utils.mjs';
 import { Textbox } from '../textbox/Textbox';
+import cx from '@src/cx.mjs';
 
-function IncButton({ children, label, className, ...buttonProps }) {
+function IncButton({ children, className, ...buttonProps }) {
   return (
     <button
-      aria-label={label}
-      className={cn(
-        'border border-transparent p-1 text-center text-sm transition-all   hover:bg-foreground active:bg-lineBackground disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none',
+      tabIndex={-1}
+      className={cx(
+        'border border-transparent p-1 text-center text-sm transition-all hover:bg-foreground active:bg-lineBackground disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none',
         className,
       )}
       type="button"
       {...buttonProps}
     >
-      {children ?? label}
+      {children}
     </button>
   );
 }
-export function Incrementor({ onChange, value, min = -Infinity, max = Infinity, className }) {
+export function Incrementor({ onChange, value, min = -Infinity, max = Infinity, className, ...incrementorProps }) {
   value = parseInt(value);
   value = isNaN(value) ? '' : value;
   return (
-    <div className={cn('w-fit bg-background relative flex  items-center"> rounded-md', className)}>
+    <div className={cx('w-fit bg-background relative flex  items-center"> rounded-md', className)}>
       <Textbox
         min={min}
         max={max}
@@ -34,19 +34,15 @@ export function Incrementor({ onChange, value, min = -Infinity, max = Infinity,
         placeholder=""
         value={value}
         className="w-32 mb-0 mt-0 border-none rounded-r-none bg-transparent appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+        {...incrementorProps}
       />
       <div className="flex gap-1 ">
-        <IncButton label={'increment'} disabled={value <= min} onClick={() => onChange(value - 1)}>
+        <IncButton disabled={value <= min} onClick={() => onChange(value - 1)}>
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" className="w-4 h-4">
             <path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
           </svg>
         </IncButton>
-        <IncButton
-          label={'decrement'}
-          className="rounded-r-md"
-          disabled={value >= max}
-          onClick={() => onChange(value + 1)}
-        >
+        <IncButton className="rounded-r-md" disabled={value >= max} onClick={() => onChange(value + 1)}>
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" className="w-4 h-4">
             <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
           </svg>

website/src/repl/components/pagination/Pagination.jsx

@@ -1,5 +1,5 @@
 import { Incrementor } from '../incrementor/Incrementor';
 
-export function Pagination({ currPage, onPageChange, className }) {
-  return <Incrementor min={1} value={currPage} onChange={onPageChange} className={className} />;
+export function Pagination({ currPage, onPageChange, className, ...incrementorProps }) {
+  return <Incrementor min={1} value={currPage} onChange={onPageChange} className={className} {...incrementorProps} />;
 }

website/src/repl/components/panel/PatternsTab.jsx

@@ -17,7 +17,7 @@ import { settingsMap, useSettings } from '../../../settings.mjs';
 import { Pagination } from '../pagination/Pagination.jsx';
 import { useState } from 'react';
 import { useDebounce } from '../usedebounce.jsx';
-import { cn } from 'tailwind_utils.mjs';
+import cx from '@src/cx.mjs';
 
 export function PatternLabel({ pattern } /* : { pattern: Tables<'code'> } */) {
   const meta = useMemo(() => getMetadata(pattern.code), [pattern]);
@@ -43,7 +43,7 @@ export function PatternLabel({ pattern } /* : { pattern: Tables<'code'> } */) {
 function PatternButton({ showOutline, onClick, pattern, showHiglight }) {
   return (
     <a
-      className={cn(
+      className={cx(
         'mr-4 hover:opacity-50 cursor-pointer block',
         showOutline && 'outline outline-1',
         showHiglight && 'bg-selection',

website/src/repl/components/panel/Reference.jsx

@@ -29,7 +29,7 @@ export function Reference() {
     <div className="flex h-full w-full p-2 text-foreground overflow-hidden">
       <div className="h-full  flex flex-col gap-2 w-1/3 max-w-72 ">
         <div class="w-full flex">
-          <Textbox placeholder="Search" value={search} onChange={setSearch} />
+          <Textbox className='w-full' placeholder="Search" value={search} onChange={setSearch} />
         </div>
         <div className="flex flex-col h-full overflow-y-auto  gap-1.5 bg-background bg-opacity-50  rounded-md">
           {visibleFunctions.map((entry, i) => (

website/src/repl/components/textbox/Textbox.jsx

@@ -1,9 +1,9 @@
-import { cn } from 'tailwind_utils.mjs';
+import cx from '@src/cx.mjs';
 
 export function Textbox({ onChange, className, ...inputProps }) {
   return (
     <input
-      className={cn('p-1 bg-background rounded-md my-2 border-foreground', className)}
+      className={cx('p-1 bg-background rounded-md my-2 border-foreground', className)}
       onChange={(e) => onChange(e.target.value)}
       {...inputProps}
     />

website/tailwind_utils.mjs

@@ -1,4 +0,0 @@
-// utility for combining class names
-export function cn(...classes) {
-  return classes.filter(Boolean).join(' ');
-}