@kitnai/chat 0.8.0 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitnai/chat",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "type": "module",
   "description": "Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.",
   "keywords": [

package/src/components/checkpoint.tsx

@@ -50,6 +50,8 @@ export function CheckpointIcon(props: CheckpointIconProps) {
 
 export interface CheckpointTriggerProps {
   tooltip?: string;
+  /** Accessible name for the button — required when it has no visible text (icon-only). */
+  'aria-label'?: string;
   onClick?: () => void;
   children?: JSX.Element;
   class?: string;
@@ -70,6 +72,7 @@ export function CheckpointTrigger(props: CheckpointTriggerProps) {
       variant={variant()}
       size={size()}
       type="button"
+      aria-label={props['aria-label']}
       onClick={props.onClick}
       class={props.class}
     >

package/src/components/code-block.tsx

@@ -65,15 +65,18 @@ function CodeBlockCode(props: CodeBlockCodeProps) {
     );
 
   return (
+    // `tabindex={0}` makes the horizontally-scrollable region reachable by
+    // keyboard (axe `scrollable-region-focusable`); `{...rest}` lets a consumer
+    // override it. No `role="region"` — that would demand an accessible name.
     <Show
       when={highlighted()}
       fallback={
-        <div class={classNames()} {...rest}>
+        <div class={classNames()} tabindex={0} {...rest}>
           <pre><code>{local.code}</code></pre>
         </div>
       }
     >
-      <div class={classNames()} innerHTML={highlighted()} {...rest} />
+      <div class={classNames()} tabindex={0} innerHTML={highlighted()} {...rest} />
     </Show>
   );
 }

package/src/components/component-meta.json

@@ -631,6 +631,14 @@
         "scalar": true,
         "description": ""
       },
+      {
+        "name": "aria-label",
+        "type": "undefined | string",
+        "displayType": "undefined | string",
+        "optional": true,
+        "scalar": true,
+        "description": "Accessible name for the button — required when it has no visible text (icon-only)."
+      },
       {
         "name": "variant",
         "type": "undefined | \"default\" | \"ghost\" | \"outline\"",

package/src/elements/checkpoint.tsx

@@ -32,6 +32,10 @@ defineWebComponent<Props, Events>('kc-checkpoint', {
   <Checkpoint>
     <CheckpointTrigger
       tooltip={props.tooltip}
+      // Icon-only (no visible label) needs an accessible name: prefer the
+      // tooltip text, else a sensible default. With a visible label, the text
+      // is the name — leave aria-label unset so it isn't duplicated.
+      aria-label={props.label ? undefined : (props.tooltip ?? 'Checkpoint')}
       variant={props.variant}
       size={props.size}
       onClick={() => dispatch('select')}