@payfit/unity-components 2.60.8 → 2.60.9

package/dist/esm/components/action-bar/ActionBar.d.ts

@@ -84,6 +84,10 @@ export type { ActionBarActionItem, ActionBarActionItemBase, ActionBarBaseProps,
  * - Actions support `type: 'button'` (default) or `type: 'icon-button'` for icon-only buttons
  * - All action-specific props (onPress, prefixIcon, icon, isDisabled, isLoading) go in the `meta` object
  * - Includes proper ARIA labels and live regions for accessibility
+ * - Uses `role="toolbar"` to expose the toolbar semantics to assistive technologies
+ * - Groups related actions with `role="group"` inside the toolbar
+ * - Provide a concise `aria-label` when the default "Actions toolbar" label is not specific enough
+ * - Supports keyboard navigation between actions with Tab and the left and right arrow keys
  * @see {@link ActionBarProps} for all available props
  * @see {@link ActionBarActionItem} for action item structure
  * @see Source code in [Github](https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/action-bar)

package/dist/esm/components/actionable/Actionable.d.ts

@@ -53,6 +53,10 @@ export interface ActionableProps extends AriaButtonProps {
  * - Supports both static children and render prop pattern for dynamic content
  * - Use data attributes (`data-hovered`, `data-pressed`, `data-focused`, `data-disabled`, `data-focus-visible`) for styling non-button elements
  * - Marked as `uy:group` for styling child elements based on parent state
+ * - Provide an accessible name for every actionable surface
+ * - Use `aria-labelledby` when a visible label already exists, and `aria-describedby` when extra context describes the action
+ * - Use `aria-label`, `aria-description`, or `aria-details` when no visible label or description is available
+ * - Add relationship attributes such as `aria-controls`, `aria-expanded`, or `aria-haspopup` when the actionable surface controls another element
  * @see {@link ActionableProps} for all available props
  * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/actionable GitHub}
  * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/primitives-actionable--docs unity-components.payfit.io}

package/dist/esm/components/alert/Alert.d.ts

@@ -50,6 +50,11 @@ export type AlertProps = BaseAlertProps & DismissableConfig & VariantConfig;
  *   <AlertTitle>Pro Tip</AlertTitle>
  *   <AlertContent>Use keyboard shortcuts to navigate faster.</AlertContent>
  * </Alert>
+ * @remarks
+ * - Uses `role="status"` with polite announcements for non-critical variants
+ * - Uses `role="alert"` with assertive announcements for the `danger` variant
+ * - Sets `aria-atomic` so assistive technologies announce the alert as a whole
+ * - Follow the WAI-ARIA alert guidance when deciding whether content should interrupt the user
  */
 declare const Alert: import('react').ForwardRefExoticComponent<AlertProps & import('react').RefAttributes<HTMLDivElement>>;
 export { Alert };

package/dist/esm/components/alert/parts/AlertContent.d.ts

@@ -2,14 +2,14 @@ import { TextProps } from '../../text/Text.js';
 type ContentElements = 'div' | 'p' | 'span';
 export type AlertContentProps = Omit<TextProps, 'variant' | 'color' | 'className'> & {
     /**
-     * The underlying HTML element to render the title as.
+     * The underlying HTML element to render the content as.
      * @default 'p'
      */
     asElement?: ContentElements;
 };
 declare const AlertContent: import('react').ForwardRefExoticComponent<Omit<TextProps, "color" | "className" | "variant"> & {
     /**
-     * The underlying HTML element to render the title as.
+     * The underlying HTML element to render the content as.
      * @default 'p'
      */
     asElement?: ContentElements;

package/dist/esm/components/avatar/Avatar.d.ts

@@ -178,6 +178,8 @@ export type AvatarProps = PropsWithChildren<{
     'aria-labelledby'?: string;
     /** ID of the element that describes the avatar */
     'aria-describedby'?: string;
+    /** Additional accessible description for the avatar */
+    'aria-description'?: string;
     /** Additional details for the avatar */
     'aria-details'?: string;
     /** Indicates if the avatar is hidden from assistive technologies */
@@ -215,6 +217,9 @@ export type AvatarProps = PropsWithChildren<{
  * - Use the `square` variant for representing companies or organizations
  * - The `color` prop applies background and text color variants for icon avatars
  * - Always provide an `aria-label` or `aria-labelledby` for accessibility
+ * - Use `aria-description` when a short additional description helps screen reader users
+ * - Use `aria-labelledby` and `aria-describedby` to associate the avatar with visible text that identifies the represented person or entity
+ * - The avatar has `role="img"` by default and should not be used as an interactive element directly; wrap it in a button or Actionable when it triggers an action
  * @see {@link AvatarProps} for all available props
  * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/avatar GitHub}
  * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=19-3741 Figma}
@@ -236,6 +241,8 @@ declare const Avatar: React.ForwardRefExoticComponent<{
     'aria-labelledby'?: string;
     /** ID of the element that describes the avatar */
     'aria-describedby'?: string;
+    /** Additional accessible description for the avatar */
+    'aria-description'?: string;
     /** Additional details for the avatar */
     'aria-details'?: string;
     /** Indicates if the avatar is hidden from assistive technologies */

package/dist/esm/components/badge/Badge.d.ts

@@ -121,6 +121,10 @@ export type BadgeProps = PropsWithChildren<{
 }>;
 /**
  * The Badge component is a visual label or indicator used to convey status or highlight content.
+ * @remarks
+ * - The badge role is auto-calculated from the `variant`: `warning`, `danger`, and `attention` use `alert`; other variants use `status`.
+ * - Override the role with `role="status"` or `role="alert"` only when the surrounding context needs a different announcement behavior.
+ * - Use `aria-label` when the visible badge text is too short or when no nearby content explains the badge's purpose.
  */
 declare const Badge: import('react').ForwardRefExoticComponent<{
     /**

package/dist/esm/components/carousel/Carousel.d.ts

@@ -55,6 +55,10 @@ export interface CarouselProps {
  * </Carousel>
  * ```
  * ## Accessibility
+ * - The carousel region is labelled by `CarouselHeader` by default, or by `aria-label` when provided
+ * - Tab moves focus into `CarouselContent` on the first visible slide
+ * - Only visible `CarouselSlide`s can receive focus; hidden slides are removed from assistive technologies and keyboard navigation
+ * - Carousel slides use roving tabindex so only the current slide has `tabindex=0`
  * - Arrow keys navigate between individual slides
  * - PageUp/PageDown jump to the first slide of the next/previous page
  * - Home/End keys jump to the first/last slide

package/dist/esm/components/data-table/parts/DataTableBulkActions.d.ts

@@ -53,6 +53,7 @@ export interface DataTableBulkActionsProps<TData> {
  * - Use F6 keyboard shortcut to focus the action bar when it's visible and has actions
  * - The keyboard shortcut provides quick access to bulk actions for users with disabilities
  * - When triggered, focus moves to the first focusable element in the action bar (typically the first action button)
+ * - Once focused, use Tab to move between actions and Escape to return focus to the previously focused element
  * - The shortcut only works when rows are selected and the action bar is visible
  * - The selection count and clear button are rendered automatically via `prefixContent`
  * @see {@link DataTableBulkActionsProps} for all available props

package/dist/esm/components/filter-toolbar/FilterToolbar.d.ts

@@ -95,6 +95,7 @@ export declare const filterToolbar: import('tailwind-variants').TVReturnType<{
  * - Each filter definition must include a unique `id`, `label`, and `renderControl` function to render the filter UI
  * - The `renderLabel` function customizes how selected values appear in the filter button
  * - Newly added filters automatically open their popover to guide users through configuration
+ * - Filters supplied through `initialValue` do not open automatically; their popover opens only after user interaction
  * - All filters can be cleared at once using the "Clear filters" button
  * - The component is uncontrolled by default but notifies parent components of state changes via callbacks
  * @see {@link FilterToolbarProps} for all available props

package/dist/esm/components/icon/Icon.d.ts

@@ -257,6 +257,9 @@ export type IconProps = VariantProps<typeof icon> & Pick<HTMLAttributes<HTMLSpan
 };
 /**
  * The `Icon` component displays an icon from the Unity icon set.
+ * @remarks
+ * - Provide `alt` when the icon has no visible label; it is exposed as the icon's `aria-label`.
+ * - When a visible label exists, use `aria-labelledby` to reference it instead. In that case, `alt` is not exposed as an additional `aria-label`.
  */
 export declare function Icon({ alt, color, size, src, role, display, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/link/RawLink.d.ts

@@ -212,6 +212,9 @@ export type RawLinkProps = Omit<AriaLinkProps, 'style' | 'className'> & {
 };
 /**
  * Links allow users to navigate to different pages or sections.
+ * @remarks
+ * - Links support mouse and touch interactions, keyboard navigation, and activation with Enter or Space.
+ * - Use a link when an action navigates or changes the URL. Use a button for actions without a meaningful destination.
  */
 declare const RawLink: import('react').ForwardRefExoticComponent<Omit<AriaLinkProps, "style" | "className"> & {
     /**

package/dist/esm/components/payfit-brand/PayFitBrand.d.ts

@@ -44,5 +44,8 @@ export type PayFitBrandProps = {
 };
 /**
  * The PayFitBrand component represents the PayFit logo with several properties that follow our brand guidelines.
+ * @remarks
+ * - Provide a meaningful `label` and, when useful, a `description` so screen readers can announce the brand in context.
+ * - The brand is not focusable by default, but can be part of a focusable element such as a link, so these accessible texts should always be provided.
  */
 export declare const PayFitBrand: import('react').ForwardRefExoticComponent<PayFitBrandProps & import('react').RefAttributes<SVGSVGElement>>;

package/dist/esm/components/radio-button-group/RadioButtonGroup.d.ts

@@ -7,6 +7,9 @@ export type RadioButtonGroupProps = Omit<RadioGroupProps, 'className' | 'style'>
 /**
  * The `RadioButtonGroup` component enables users to select a single option from a set of mutually exclusive choices.
  * It manages the selection state, keyboard navigation, focus handling, and accessibility features for a group of RadioButton components.
+ * @remarks
+ * - Arrow keys move focus between options and select the focused option.
+ * - Disabled options are skipped automatically during keyboard navigation.
  * @example
  * ```tsx
  * import { RadioButton, RadioButtonGroup } from '@payfit/unity-components'

package/dist/esm/components/skip-links/SkipLinks.d.ts

@@ -44,6 +44,9 @@ export interface SkipLinkProps extends PropsWithChildren<HTMLAttributes<HTMLAnch
  * @remarks
  * - Skip links are visually hidden by default and become visible when focused
  * - Each link should target an element with a valid ID and tabIndex={-1}
+ * - The component exposes navigation and list semantics labelled through `aria-labelledby`
+ * - Links follow the normal tab order and can be activated with Enter or Space
+ * - Place skip links where they should occur in the page tab order and avoid fixed or absolute positioning that could conflict with other skip links
  * - The component follows WCAG 2.1 guidelines for skip navigation
  * @see {@link SkipLinksProps} for all available props
  * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/skip-links GitHub}

package/dist/esm/components/spinner/Spinner.d.ts

@@ -7,6 +7,13 @@ export type SpinnerProps = Pick<HTMLAttributes<HTMLDivElement>, 'aria-hidden' |
     /** Te spinner's color, can be 'primary', 'inverted', or 'inherit', which will make it take the element's `currentColor` */
     color?: 'primary' | 'inverted' | 'inherit';
 };
+/**
+ * The Spinner component indicates that content is loading or an action is being processed.
+ * @remarks
+ * - It uses `role="status"` and an `aria-live="polite"` region by default.
+ * - It is not included in the keyboard tab order.
+ * - Always provide a `label` for assistive technologies, even though it is only visible at the medium size.
+ */
 export declare const Spinner: import('react').ForwardRefExoticComponent<Pick<HTMLAttributes<HTMLDivElement>, "role" | "aria-hidden"> & {
     /** The label text for the spinner */
     label: string;

package/dist/esm/components/timeline/Timeline.d.ts

@@ -34,6 +34,10 @@ export type TimelineProps = {
 };
 /**
  * Timeline component displays chronological events in vertical or horizontal orientation
+ * @remarks
+ * - Provide an `aria-label` that identifies the timeline for screen reader users.
+ * - Use `customProgressLabel` when the overall progress needs additional context.
+ * - Step titles and state descriptions are associated through ARIA attributes, while visual status badges are hidden from assistive technologies to avoid duplicate announcements.
  * @example
  * ```tsx
  * <Timeline orientation="vertical" type="numbered">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.60.8",
+  "version": "2.60.9",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -96,7 +96,7 @@
     "tailwind-variants": "3.2.2",
     "usehooks-ts": "3.1.1",
     "zod": "4.4.3",
-    "@payfit/unity-illustrations": "2.60.8"
+    "@payfit/unity-illustrations": "2.60.9"
   },
   "peerDependencies": {
     "@hookform/devtools": "^4",
@@ -108,8 +108,8 @@
     "react-hook-form": "^7",
     "react-router-dom": "^5",
     "zod": "^3 || ^4",
-    "@payfit/unity-icons": "2.60.8",
-    "@payfit/unity-themes": "2.60.8"
+    "@payfit/unity-icons": "2.60.9",
+    "@payfit/unity-themes": "2.60.9"
   },
   "devDependencies": {
     "@figma/code-connect": "1.4.9",
@@ -159,10 +159,10 @@
     "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
     "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-icons": "2.60.8",
-    "@payfit/unity-themes": "2.60.8",
-    "@payfit/vite-configs": "0.0.0-use.local",
-    "@payfit/unity-illustrations": "2.60.8"
+    "@payfit/unity-icons": "2.60.9",
+    "@payfit/unity-illustrations": "2.60.9",
+    "@payfit/unity-themes": "2.60.9",
+    "@payfit/vite-configs": "0.0.0-use.local"
   },
   "peerDependenciesMeta": {
     "@hookform/devtools": {