@fragments-sdk/ui 0.7.2 → 0.7.4

package/src/components/RadioGroup/index.tsx

@@ -41,10 +41,21 @@ export interface RadioItemProps {
   description?: string;
   /** Whether this item is disabled */
   disabled?: boolean;
+  /** Accessible name for icon-only mode */
+  'aria-label'?: string;
+  /** Accessible labelled-by relationship */
+  'aria-labelledby'?: string;
+  /** Accessible described-by relationship */
+  'aria-describedby'?: string;
   /** Additional class name */
   className?: string;
 }
 
+function mergeAriaIds(...ids: Array<string | undefined>): string | undefined {
+  const merged = ids.filter(Boolean).join(' ').trim();
+  return merged.length > 0 ? merged : undefined;
+}
+
 // ============================================
 // Context for size
 // ============================================
@@ -60,9 +71,15 @@ function RadioItem({
   label,
   description,
   disabled = false,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
   className,
 }: RadioItemProps) {
   const size = React.useContext(RadioSizeContext);
+  const id = React.useId();
+  const labelId = label ? `radio-label-${id}` : undefined;
+  const descriptionId = description ? `radio-desc-${id}` : undefined;
 
   const radioClasses = [
     styles.radio,
@@ -84,6 +101,9 @@ function RadioItem({
       <BaseRadio.Root
         value={value}
         disabled={disabled}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        aria-describedby={ariaDescribedBy}
         className={[radioClasses, className].filter(Boolean).join(' ')}
       >
         <BaseRadio.Indicator className={styles.indicator} />
@@ -96,14 +116,17 @@ function RadioItem({
       <BaseRadio.Root
         value={value}
         disabled={disabled}
+        aria-label={ariaLabel}
+        aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}
+        aria-describedby={mergeAriaIds(ariaDescribedBy, descriptionId)}
         className={radioClasses}
       >
         <BaseRadio.Indicator className={styles.indicator} />
       </BaseRadio.Root>
       <div className={styles.content}>
-        <span className={labelClasses}>{label}</span>
+        <span id={labelId} className={labelClasses}>{label}</span>
         {description && (
-          <span className={styles.description}>{description}</span>
+          <span id={descriptionId} className={styles.description}>{description}</span>
         )}
       </div>
     </label>
@@ -126,8 +149,15 @@ function RadioGroupRoot({
   size = 'md',
   children,
   className,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
   ...htmlProps
 }: RadioGroupProps) {
+  const groupId = React.useId();
+  const labelId = label ? `radio-group-label-${groupId}` : undefined;
+  const errorId = error ? `radio-group-error-${groupId}` : undefined;
+
   const groupClasses = [
     styles.group,
     styles[orientation],
@@ -137,18 +167,21 @@ function RadioGroupRoot({
   return (
     <RadioSizeContext.Provider value={size}>
       <div {...htmlProps} className={styles.wrapper}>
-        {label && <span className={styles.groupLabel}>{label}</span>}
+        {label && <span id={labelId} className={styles.groupLabel}>{label}</span>}
         <BaseRadioGroup
           value={value}
           defaultValue={defaultValue}
           onValueChange={onValueChange}
           disabled={disabled}
           name={name}
+          aria-label={ariaLabel}
+          aria-labelledby={mergeAriaIds(ariaLabelledBy, labelId)}
+          aria-describedby={mergeAriaIds(ariaDescribedBy, errorId)}
           className={groupClasses}
         >
           {children}
         </BaseRadioGroup>
-        {error && <span className={styles.error}>{error}</span>}
+        {error && <span id={errorId} className={styles.error}>{error}</span>}
       </div>
     </RadioSizeContext.Provider>
   );

package/src/components/Select/Select.module.scss

@@ -96,7 +96,7 @@
     var(--fui-space-1, #{$fui-space-1}) * 2
   ) !important;
   overflow-y: auto !important;
-  padding: var(--fui-space-1, $fui-space-1);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs);
   box-shadow: var(--fui-shadow-md, $fui-shadow-md);
 
   // Animation
@@ -128,7 +128,7 @@
   align-items: center;
   gap: var(--fui-space-2, $fui-space-2);
   width: 100%;
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-md, $fui-padding-item-md);
   border-radius: var(--fui-radius-sm, $fui-radius-sm);
   cursor: pointer;
   outline: none;
@@ -178,7 +178,7 @@
 
 // Group label
 .groupLabel {
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-md, $fui-padding-item-md);
   font-size: var(--fui-font-size-xs, $fui-font-size-xs);
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   color: var(--fui-text-tertiary, $fui-text-tertiary);

package/src/components/Select/index.tsx

@@ -268,11 +268,12 @@ function SelectItem({ children, value, disabled, className }: SelectItemProps) {
 
   // Register this item's children in the registry so the trigger can display them
   React.useEffect(() => {
-    itemsRef.current.set(value, children);
+    const items = itemsRef.current;
+    items.set(value, children);
     // Trigger re-render of trigger to show the registered content
     incrementItemsVersion();
     return () => {
-      itemsRef.current.delete(value);
+      items.delete(value);
     };
   }, [itemsRef, incrementItemsVersion, value, children]);
 

package/src/components/Sidebar/Sidebar.module.scss

@@ -31,7 +31,7 @@
 
   .header {
     justify-content: center;
-    padding: var(--fui-space-3, $fui-space-3);
+    padding: var(--fui-padding-container-sm, $fui-padding-container-sm);
   }
 
   .sectionLabel {
@@ -46,7 +46,7 @@
 
   .item {
     justify-content: center;
-    padding: var(--fui-space-3, $fui-space-3);
+    padding: var(--fui-padding-container-sm, $fui-padding-container-sm);
   }
 
   .itemIcon {
@@ -55,7 +55,7 @@
 
   .footer {
     justify-content: center;
-    padding: var(--fui-space-3, $fui-space-3);
+    padding: var(--fui-padding-container-sm, $fui-padding-container-sm);
   }
 
   .collapseToggle {
@@ -92,7 +92,7 @@
   display: flex;
   align-items: center;
   gap: var(--fui-space-3, $fui-space-3);
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-padding-item-sm, $fui-padding-item-sm) var(--fui-padding-item-sm, $fui-padding-item-sm);
   flex-shrink: 0;
   height: var(--appshell-header-height, 56px);
 }
@@ -105,7 +105,7 @@
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
-  padding: var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-padding-item-sm, $fui-padding-item-sm);
 }
 
 // ============================================
@@ -121,13 +121,19 @@
 .sectionHeader {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
+  gap: var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-sm, $fui-padding-item-sm);
+}
+
+.sectionTrigger {
+  flex: 1;
 }
 
 .sectionLabel {
   @include helper-text;
 
+  flex: 1;
+  min-width: 0;
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -170,11 +176,14 @@
 // Collapsible section styles (using Collapsible component)
 .sectionCollapsible {
   // Override Collapsible trigger styles for sidebar context
-  :global(.collapsible-trigger),
-  button[aria-expanded] {
+  .sectionTrigger {
     background: transparent;
+    display: flex;
+    align-items: center;
     justify-content: space-between;
-    padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
+    width: 100%;
+    padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-sm, $fui-padding-item-sm);
+    border-radius: var(--fui-radius-md, $fui-radius-md);
 
     &:hover {
       background-color: var(--fui-bg-hover, $fui-bg-hover);
@@ -199,11 +208,10 @@
   @include interactive-base;
   @include text-base;
 
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: var(--fui-space-3, $fui-space-3);
-  width: 100%;
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-sm, $fui-padding-item-sm);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-decoration: none;
@@ -212,6 +220,7 @@
   &:hover:not(.itemDisabled) {
     background-color: var(--fui-bg-hover, $fui-bg-hover);
     color: var(--fui-text-primary, $fui-text-primary);
+    text-decoration: none;
   }
 
   &:active:not(.itemDisabled) {
@@ -225,8 +234,9 @@
   color: var(--fui-text-inverse, $fui-text-inverse);
 
   &:hover {
-    background-color: var(--fui-color-accent-active, $fui-color-accent-active);
-    color: var(--fui-text-inverse, $fui-text-inverse);
+    background-color: var(--fui-color-accent-hover, $fui-color-accent-hover) !important;
+    color: var(--fui-text-inverse, $fui-text-inverse) !important;
+    text-decoration: none;
   }
 
   .itemIcon {
@@ -270,7 +280,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-sm, $fui-padding-item-sm);
   font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   // Use accent-hover for WCAG AA contrast (4.5:1 minimum)
@@ -341,10 +351,9 @@
   @include interactive-base;
   @include text-base;
 
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  width: 100%;
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-sm, $fui-padding-item-sm);
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-decoration: none;
@@ -369,6 +378,7 @@
   &:hover:not(.subItemDisabled) {
     background-color: var(--fui-bg-hover, $fui-bg-hover);
     color: var(--fui-text-primary, $fui-text-primary);
+    text-decoration: none;
   }
 
   &:active:not(.subItemDisabled) {
@@ -399,7 +409,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--fui-space-2, $fui-space-2);
-  padding: var(--fui-space-4, $fui-space-4);
+  padding: var(--fui-padding-container-md, $fui-padding-container-md);
   margin-top: auto;
   flex-shrink: 0;
 }
@@ -563,14 +573,14 @@
   display: flex;
   flex-direction: column;
   gap: var(--fui-space-2, $fui-space-2);
-  padding: var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-padding-item-sm, $fui-padding-item-sm);
 }
 
 .skeletonItem {
   display: flex;
   align-items: center;
   gap: var(--fui-space-3, $fui-space-3);
-  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-sm, $fui-padding-item-sm);
   min-height: $fui-sidebar-item-height;
 }
 

package/src/components/Sidebar/index.tsx

@@ -3,6 +3,7 @@ import styles from './Sidebar.module.scss';
 import { Tooltip } from '../Tooltip';
 import { Skeleton } from '../Skeleton';
 import { Collapsible } from '../Collapsible';
+import { useFocusTrap } from '../../utils/a11y';
 // Import globals to ensure CSS variables are defined
 import '../../styles/globals.scss';
 
@@ -271,6 +272,7 @@ interface SidebarContextValue {
   collapsedWidth: string;
   collapsible: SidebarCollapsible;
   toggleSidebar: () => void;
+  sidebarId: string;
 }
 
 const SidebarContext = React.createContext<SidebarContextValue | null>(null);
@@ -294,6 +296,7 @@ function useSidebar() {
       collapsedWidth: '64px',
       collapsible: 'icon' as SidebarCollapsible,
       toggleSidebar: () => {},
+      sidebarId: 'sidebar',
       state: 'expanded' as 'expanded' | 'collapsed' | 'open' | 'closed',
     };
   }
@@ -379,6 +382,7 @@ function SidebarProvider({
   enableKeyboardShortcut = true,
 }: SidebarProviderProps) {
   const isMobile = useIsMobile();
+  const sidebarId = React.useId();
 
   const [collapsed, setCollapsed] = useControllableState(
     controlledCollapsed,
@@ -456,6 +460,7 @@ function SidebarProvider({
     collapsedWidth,
     collapsible,
     toggleSidebar,
+    sidebarId,
   };
 
   return (
@@ -479,6 +484,7 @@ function SidebarRoot({
   collapsible = 'icon',
   className,
   style: styleProp,
+  'aria-label': ariaLabel,
   ...htmlProps
 }: SidebarProps) {
   // Check if we're inside a SidebarProvider
@@ -506,6 +512,11 @@ function SidebarRoot({
   const resolvedWidth = existingContext ? existingContext.width : width;
   const resolvedCollapsedWidth = existingContext ? existingContext.collapsedWidth : collapsedWidth;
   const resolvedCollapsible = existingContext ? existingContext.collapsible : collapsible;
+  const sidebarId = React.useId();
+  const resolvedSidebarId = existingContext ? existingContext.sidebarId : sidebarId;
+  const sidebarRef = React.useRef<HTMLElement>(null);
+
+  useFocusTrap(sidebarRef, isMobile && open);
 
   const toggleSidebar = React.useCallback(() => {
     if (resolvedCollapsible === 'none') return;
@@ -558,6 +569,7 @@ function SidebarRoot({
     collapsedWidth: resolvedCollapsedWidth,
     collapsible: resolvedCollapsible,
     toggleSidebar,
+    sidebarId: resolvedSidebarId,
   };
 
   const isCollapsedForStyle = resolvedCollapsible === 'icon' && collapsed;
@@ -580,9 +592,15 @@ function SidebarRoot({
 
   const content = (
     <aside
+      ref={sidebarRef}
+      id={resolvedSidebarId}
       {...htmlProps}
       className={classes}
       style={style}
+      role={isMobile ? 'dialog' : undefined}
+      aria-modal={isMobile && open ? true : undefined}
+      aria-hidden={isMobile && !open ? true : undefined}
+      aria-label={isMobile ? (ariaLabel || 'Sidebar navigation') : ariaLabel}
       data-state={isMobile ? (open ? 'open' : 'closed') : (collapsed ? 'collapsed' : 'expanded')}
       data-position={resolvedPosition}
       data-collapsible={resolvedCollapsible}
@@ -663,13 +681,15 @@ function SidebarSection({
   return (
     <div className={classes} role="group" aria-label={label}>
       <Collapsible defaultOpen={defaultOpen} className={styles.sectionCollapsible}>
-        <Collapsible.Trigger
-          className={styles.sectionHeader}
-          chevronPosition="end"
-        >
-          <span className={styles.sectionLabel}>{label}</span>
-          {showAction && <span className={styles.sectionActionWrapper} onClick={(e) => e.stopPropagation()}>{action}</span>}
-        </Collapsible.Trigger>
+        <div className={styles.sectionHeader}>
+          <Collapsible.Trigger
+            className={styles.sectionTrigger}
+            chevronPosition="end"
+          >
+            <span className={styles.sectionLabel}>{label}</span>
+          </Collapsible.Trigger>
+          {showAction && <div className={styles.sectionActionWrapper}>{action}</div>}
+        </div>
         <Collapsible.Content className={styles.sectionContent}>
           <ul className={styles.sectionList}>
             {children}
@@ -887,7 +907,7 @@ function SidebarFooter({ children, className }: SidebarFooterProps) {
 }
 
 function SidebarTrigger({ children, 'aria-label': ariaLabel = 'Toggle navigation', className }: SidebarTriggerProps) {
-  const { open, setOpen, isMobile } = useSidebarContext();
+  const { open, setOpen, isMobile, sidebarId } = useSidebarContext();
 
   // Only render trigger on mobile
   if (!isMobile) {
@@ -903,6 +923,7 @@ function SidebarTrigger({ children, 'aria-label': ariaLabel = 'Toggle navigation
       onClick={() => setOpen(!open)}
       aria-label={ariaLabel}
       aria-expanded={open}
+      aria-controls={sidebarId}
     >
       {children || (open ? <CloseIcon /> : <MenuIcon />)}
     </button>
@@ -989,6 +1010,7 @@ function SidebarMenuSkeleton({
   const isCollapsed = collapsed && !isMobile;
 
   const classes = [styles.menuSkeleton, className].filter(Boolean).join(' ');
+  const labelWidths = ['64%', '72%', '68%', '79%', '74%', '66%', '83%', '70%'];
 
   return (
     <div className={classes} aria-hidden="true">
@@ -999,7 +1021,7 @@ function SidebarMenuSkeleton({
             <Skeleton
               variant="text"
               className={styles.skeletonLabel}
-              width={`${60 + Math.random() * 30}%`}
+              width={labelWidths[i % labelWidths.length]}
             />
           )}
         </div>

package/src/components/Slider/index.tsx

@@ -16,6 +16,12 @@ export interface SliderProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   valueSuffix?: string;
   disabled?: boolean;
   name?: string;
+  /** Accessible label when visible label is omitted */
+  'aria-label'?: string;
+  /** Accessible labelled-by relationship */
+  'aria-labelledby'?: string;
+  /** Accessible described-by relationship */
+  'aria-describedby'?: string;
 }
 
 export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
@@ -34,6 +40,9 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
       className,
       name,
       id,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+      'aria-describedby': ariaDescribedBy,
       ...htmlProps
     },
     ref
@@ -48,8 +57,6 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
       onChange?.(val);
     };
 
-    const sliderValue = value !== undefined ? [value] : (defaultValue !== undefined ? [defaultValue] : undefined);
-
     return (
       <Field.Root {...htmlProps} disabled={disabled} className={[styles.wrapper, className].filter(Boolean).join(' ')}>
         {(label || showValue) && (
@@ -64,7 +71,7 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
         )}
         <BaseSlider.Root
           ref={ref}
-          value={sliderValue}
+          value={value !== undefined ? [value] : undefined}
           defaultValue={defaultValue !== undefined ? [defaultValue] : undefined}
           onValueChange={handleChange}
           min={min}
@@ -73,6 +80,9 @@ export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
           disabled={disabled}
           name={name}
           id={id}
+          aria-label={ariaLabel || (label ? undefined : 'Slider')}
+          aria-labelledby={ariaLabelledBy}
+          aria-describedby={ariaDescribedBy}
           className={styles.root}
         >
           <BaseSlider.Control className={styles.control}>

package/src/components/Table/Table.module.scss

@@ -33,7 +33,7 @@
 .sm {
   .th,
   .td {
-    padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
+    padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-md, $fui-padding-item-md);
     font-size: var(--fui-font-size-xs, $fui-font-size-xs);
   }
 }
@@ -41,7 +41,7 @@
 .md {
   .th,
   .td {
-    padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
+    padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-md, $fui-padding-item-md);
     font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   }
 }
@@ -51,7 +51,6 @@
   position: sticky;
   top: 0;
   z-index: 1;
-  background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
 }
 
 .headerRow {
@@ -83,16 +82,21 @@
 
 // Sortable header cell (for focus styles)
 .thSortable {
-  cursor: pointer;
-
-  &:focus-visible {
-    @include focus-ring;
-    outline-offset: -2px;
-  }
+  padding: 0;
 }
 
-.sortable {
-  cursor: pointer;
+.sortButton {
+  @include button-reset;
+  @include interactive-base;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--fui-space-1, $fui-space-1);
+  width: 100%;
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-md, $fui-padding-item-md);
+  color: inherit;
+  text-align: left;
   transition: color var(--fui-transition-fast, $fui-transition-fast);
 
   &:hover {
@@ -106,15 +110,13 @@
   color: var(--fui-text-tertiary, $fui-text-tertiary);
   flex-shrink: 0;
 
-  .sortable:hover & {
+  .sortButton:hover & {
     color: var(--fui-text-secondary, $fui-text-secondary);
   }
 }
 
 // Body
-.tbody {
-  background-color: var(--fui-bg-primary, $fui-bg-primary);
-}
+.tbody {}
 
 .row {
   border-bottom: 1px solid var(--fui-border, $fui-border);
@@ -123,6 +125,10 @@
   &:last-child {
     border-bottom: none;
   }
+
+  &:hover {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  }
 }
 
 .clickable {
@@ -132,6 +138,10 @@
     background-color: var(--fui-bg-hover, $fui-bg-hover);
   }
 
+  &:focus-visible {
+    @include focus-ring;
+  }
+
   &:active {
     background-color: var(--fui-bg-active, $fui-bg-active);
   }
@@ -219,7 +229,7 @@
     border-bottom-width: 2px;
   }
 
-  .thSortable:focus-visible {
+  .sortButton:focus-visible {
     outline-width: 3px;
   }
 }
@@ -233,7 +243,7 @@
     transition: none;
   }
 
-  .sortable {
+  .sortButton {
     transition: none;
   }
 }