@kenlo/kdls-design-system 2.12.1 → 2.13.0

package/dist/components/Checkbox/Checkbox.d.ts

@@ -29,6 +29,10 @@ export interface CheckboxProps {
     name?: string;
     /** Marks the field as required — asterisk on the label and aria-required on the box */
     required?: boolean;
+    /** Accessible name when there is no visible label (e.g. a row-selection box) — replaces the label as the name screen readers announce */
+    'aria-label'?: string;
+    /** Id of the visible element that names the checkbox (e.g. the row's title) */
+    'aria-labelledby'?: string;
     /** Additional CSS classes */
     className?: string;
 }

package/dist/components/Table/Table.d.ts

@@ -6,7 +6,7 @@ import { TableColumnPicker } from './TableColumnPicker';
 export interface TableColumn<T = Record<string, unknown>> {
     /** Unique key — matches the row object's property and identifies the column */
     key: string;
-    /** Title shown in the header. '' or omitted shows no visible label — the column stays aligned with the grid */
+    /** Title shown in the header — also the column header a screen reader reads with each value. '' or omitted shows no visible label — the column stays aligned with the grid, and its header slot is a plain cell */
     title?: string;
     /** Fixed column width — number (px) or any grid-track value ('120px', '1fr'). Don't combine with minWidth/maxWidth */
     width?: number | string;
@@ -18,7 +18,7 @@ export interface TableColumn<T = Record<string, unknown>> {
     align?: 'center' | 'end';
     /** Truncates the content to one line with ellipsis and shows the full value in a Tooltip on hover */
     ellipsis?: boolean;
-    /** true = sortable, sorting done by the backend (the component only reports state via onSortChange, doesn't reorder `rows`) · function = sorts on the frontend using this comparator — handle dates and numbers inside it, don't let the component guess the type */
+    /** true = sortable, sorting done by the backend (the component only reports state via onSortChange, doesn't reorder `rows`) · function = sorts on the frontend using this comparator — handle dates and numbers inside it, don't let the component guess the type. The header's title becomes a button inside the column header, which carries aria-sort */
     sortable?: boolean | ((a: T, b: T) => number);
     /**
      * Marks this column as a mobile-only action slot — has no effect above the mobile
@@ -75,9 +75,9 @@ export interface TableProps<T extends Record<string, unknown> = Record<string, u
     defaultSort?: TableSort | null;
     /** Fired when clicking a sortable header, with the new state (or null when returning to the neutral state) */
     onSortChange?: (sort: TableSort | null) => void;
-    /** Makes the entire row clickable (cursor, focus, and highlight) — like Card's hoverable. No effect without onRowClick */
+    /** Makes the entire row clickable (cursor, focus, and highlight) — like Card's hoverable. The row takes Tab focus and stays a table row for screen readers, its cells still read with their column headers. No effect without onRowClick */
     hoverable?: boolean;
-    /** Fired when clicking anywhere on the row that isn't an interactive element (button, link, checkbox) — use with hoverable */
+    /** Fired when clicking anywhere on the row that isn't an interactive element (button, link, checkbox), and on Enter or Space while the row itself has focus — a key pressed on a control inside the row stays with that control. Use with hoverable */
     onRowClick?: (row: T) => void;
     /** Pagination config — passed straight through to the Pagination component, rendered below the list */
     pagination?: Omit<PaginationProps, 'className'>;

package/dist/components/Toggle/Toggle.d.ts

@@ -12,6 +12,8 @@ export interface ToggleItem {
     iconRight?: IconElement;
     /** Disables only this item */
     disabled?: boolean;
+    /** Accessible name of this item — required in practice when it shows only an icon, which otherwise has no name */
+    'aria-label'?: string;
 }
 export interface ToggleProps {
     /** List of options — minimum 2 items */
@@ -26,6 +28,10 @@ export interface ToggleProps {
     onChange?: (value: string) => void;
     /** Disables all items */
     disabled?: boolean;
+    /** Accessible name of the group — use when no visible title names the options */
+    'aria-label'?: string;
+    /** Id of the visible element that names the group — prefer it over aria-label when that title is on screen */
+    'aria-labelledby'?: string;
     /** Additional CSS classes */
     className?: string;
 }