@a4ui/core 0.35.0 → 0.35.1

package/dist/ui/RingProgress.d.ts

@@ -7,6 +7,8 @@ export interface RingProgressProps {
     thickness?: number;
     /** Content centered over the ring. Defaults to the rounded percent. */
     label?: JSX.Element;
+    /** Accessible name for the `role="progressbar"` element. */
+    'aria-label'?: string;
     class?: string;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.35.0",
+  "version": "0.35.1",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",

package/src/index.ts

@@ -8,7 +8,7 @@
 //   import '@a4ui/core/styles.css'
 //   import { Button, Card, Modal } from '@a4ui/core'
 
-export const A4UI_VERSION = '0.35.0'
+export const A4UI_VERSION = '0.35.1'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'

package/src/ui/AudioWaveform.tsx

@@ -167,10 +167,8 @@ export function AudioWaveform(props: AudioWaveformProps): JSX.Element {
           {(peak, index) => {
             const played = createMemo(() => index() / bars().length <= progress())
             return (
-              <button
-                type="button"
+              <div
                 aria-hidden="true"
-                tabIndex={-1}
                 onClick={(event) => {
                   event.stopPropagation()
                   handleBarClick(index())

package/src/ui/EventScheduler.tsx

@@ -203,7 +203,13 @@ export function EventScheduler(props: EventSchedulerProps): JSX.Element {
       </div>
 
       {/* Body: scrolls vertically; gutter of hour labels + day columns */}
-      <div class="flex overflow-y-auto" style={{ 'max-height': '32rem' }}>
+      <div
+        role="group"
+        aria-label="Schedule grid"
+        tabIndex={0}
+        class="flex overflow-y-auto outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary"
+        style={{ 'max-height': '32rem' }}
+      >
         <div class="w-14 shrink-0" style={{ height: `${gridHeight()}px` }}>
           <For each={hours()}>
             {(h) => (

package/src/ui/GanttChart.tsx

@@ -155,7 +155,15 @@ export function GanttChart(props: GanttChartProps): JSX.Element {
   })
 
   return (
-    <div class={cn('overflow-x-auto rounded-lg border border-border bg-card', props.class)}>
+    <div
+      role="group"
+      aria-label="Gantt chart"
+      tabIndex={0}
+      class={cn(
+        'overflow-x-auto rounded-lg border border-border bg-card outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary',
+        props.class,
+      )}
+    >
       <Show
         when={props.tasks.length > 0}
         fallback={<p class="p-4 text-sm text-muted-foreground">No tasks to display.</p>}

package/src/ui/OnboardingChecklist.tsx

@@ -79,6 +79,7 @@ export function OnboardingChecklist(props: OnboardingChecklistProps): JSX.Elemen
           value={percent()}
           size={56}
           thickness={6}
+          aria-label={`${done()} of ${total()} steps complete`}
           label={
             <span class="text-xs">
               {done()}/{total()}

package/src/ui/QueryBuilder.tsx

@@ -243,10 +243,10 @@ function RuleRow(props: RuleRowProps): JSX.Element {
 
   return (
     <div class="flex flex-wrap items-center gap-2">
-      <Select class="w-40" value={props.rule.field} onChange={setField}>
+      <Select class="w-40" value={props.rule.field} onChange={setField} aria-label="Field">
         <For each={props.fields}>{(f) => <option value={f.name}>{f.label}</option>}</For>
       </Select>
-      <Select class="w-32" value={props.rule.operator} onChange={setOperator}>
+      <Select class="w-32" value={props.rule.operator} onChange={setOperator} aria-label="Operator">
         <For each={props.operatorsFor(props.rule.field)}>{(op) => <option value={op}>{op}</option>}</For>
       </Select>
       <Show
@@ -257,10 +257,11 @@ function RuleRow(props: RuleRowProps): JSX.Element {
             type={field()?.type === 'number' ? 'number' : 'text'}
             value={props.rule.value}
             onInput={setValue}
+            aria-label="Value"
           />
         }
       >
-        <Select class="w-40" value={props.rule.value} onChange={setValue}>
+        <Select class="w-40" value={props.rule.value} onChange={setValue} aria-label="Value">
           <option value="" disabled>
             Select…
           </option>

package/src/ui/RingProgress.tsx

@@ -12,6 +12,8 @@ export interface RingProgressProps {
   thickness?: number
   /** Content centered over the ring. Defaults to the rounded percent. */
   label?: JSX.Element
+  /** Accessible name for the `role="progressbar"` element. */
+  'aria-label'?: string
   class?: string
 }
 
@@ -37,6 +39,7 @@ export function RingProgress(props: RingProgressProps): JSX.Element {
   return (
     <div
       role="progressbar"
+      aria-label={props['aria-label']}
       aria-valuenow={clamped()}
       aria-valuemin={0}
       aria-valuemax={100}

package/src/ui/SpreadsheetGrid.tsx

@@ -235,6 +235,7 @@ export function SpreadsheetGrid(props: SpreadsheetGridProps): JSX.Element {
       ref={containerRef}
       tabIndex={0}
       role="grid"
+      aria-label="Spreadsheet"
       aria-rowcount={props.rows}
       aria-colcount={props.cols}
       class={cn(
@@ -244,20 +245,22 @@ export function SpreadsheetGrid(props: SpreadsheetGridProps): JSX.Element {
       onKeyDown={handleKeyDown}
     >
       <div class="grid" style={{ 'grid-template-columns': `48px repeat(${props.cols}, minmax(80px, 1fr))` }}>
-        <div class="border-b border-r border-border bg-muted" />
-        <For each={headers()}>
-          {(h) => (
-            <div
-              role="columnheader"
-              class="border-b border-r border-border bg-muted px-2 py-1 text-center text-xs font-semibold text-muted-foreground"
-            >
-              {h}
-            </div>
-          )}
-        </For>
+        <div role="row" class="contents">
+          <div aria-hidden="true" class="border-b border-r border-border bg-muted" />
+          <For each={headers()}>
+            {(h) => (
+              <div
+                role="columnheader"
+                class="border-b border-r border-border bg-muted px-2 py-1 text-center text-xs font-semibold text-muted-foreground"
+              >
+                {h}
+              </div>
+            )}
+          </For>
+        </div>
         <For each={rowIndices()}>
           {(r) => (
-            <>
+            <div role="row" class="contents">
               <div
                 role="rowheader"
                 class="border-b border-r border-border bg-muted px-2 py-1 text-center text-xs text-muted-foreground"
@@ -295,7 +298,7 @@ export function SpreadsheetGrid(props: SpreadsheetGridProps): JSX.Element {
                   </div>
                 )}
               </For>
-            </>
+            </div>
           )}
         </For>
       </div>