@swan-io/lake 18.1.0 → 18.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "18.1.0",
+  "version": "18.1.2",
   "engines": {
     "node": ">22.12.0"
   },

package/src/components/Accordion.d.ts

@@ -3,8 +3,9 @@ import { ViewProps } from "react-native";
 type Props = {
     children: ReactNode;
     trigger: ReactNode;
+    triggerEnd?: ReactNode;
     style?: ViewProps["style"];
     contentContainerStyle?: ViewProps["style"];
 };
-export declare const Accordion: ({ children, trigger, style, contentContainerStyle }: Props) => import("react").JSX.Element;
+export declare const Accordion: ({ children, trigger, triggerEnd, style, contentContainerStyle, }: Props) => import("react").JSX.Element;
 export {};

package/src/components/Accordion.js

@@ -3,17 +3,29 @@ import { useId } from "react";
 import { Pressable, StyleSheet, View } from "react-native";
 import { backgroundColor, colors, spacings } from "../constants/design";
 import { useBoolean } from "../hooks/useBoolean";
+import { isNotNullish } from "../utils/nullish";
 import { Icon } from "./Icon";
 import { LakeText } from "./LakeText";
 import { Space } from "./Space";
 const styles = StyleSheet.create({
+    header: {
+        flexDirection: "row",
+        alignItems: "stretch",
+    },
     trigger: {
+        flexGrow: 1,
+        flexShrink: 1,
         flexDirection: "row",
         alignItems: "center",
         backgroundColor: backgroundColor.accented,
         paddingVertical: spacings[12],
         paddingHorizontal: spacings[20],
     },
+    triggerEnd: {
+        justifyContent: "center",
+        backgroundColor: backgroundColor.accented,
+        paddingRight: spacings[20],
+    },
     arrow: {
         transitionProperty: "transform",
         transitionDuration: "200ms",
@@ -24,11 +36,13 @@ const styles = StyleSheet.create({
     contentContainer: {
         display: "grid",
         gridTemplateRows: "0fr",
-        transitionProperty: "grid-template-rows",
+        transitionProperty: "grid-template-rows, visibility",
         transitionDuration: "300ms",
+        visibility: "hidden",
     },
     contentContainerDisplayed: {
         gridTemplateRows: "1fr",
+        visibility: "visible",
     },
     contentInner: {
         overflow: "hidden",
@@ -38,8 +52,9 @@ const styles = StyleSheet.create({
         paddingHorizontal: spacings[20],
     },
 });
-export const Accordion = ({ children, trigger, style, contentContainerStyle }) => {
-    const id = useId();
+export const Accordion = ({ children, trigger, triggerEnd, style, contentContainerStyle, }) => {
+    const triggerId = useId();
+    const contentId = useId();
     const [isOpen, { toggle }] = useBoolean(false);
-    return (_jsxs(View, { children: [_jsxs(Pressable, { "aria-controls": id, role: "button", "aria-expanded": isOpen, onPress: toggle, style: [styles.trigger, style], children: [_jsx(Icon, { name: "chevron-right-filled", size: 12, color: colors.gray[500], style: [styles.arrow, isOpen && styles.arrowOpen] }), _jsx(Space, { width: 20 }), typeof trigger === "string" ? (_jsx(LakeText, { variant: "smallMedium", color: colors.gray[900], children: trigger })) : (trigger)] }), _jsx(View, { "aria-labelledby": id, "aria-hidden": !isOpen, role: "region", style: [styles.contentContainer, isOpen && styles.contentContainerDisplayed], children: _jsx(View, { style: styles.contentInner, children: _jsx(View, { style: [styles.content, contentContainerStyle], children: children }) }) })] }));
+    return (_jsxs(View, { children: [_jsxs(View, { style: styles.header, children: [_jsxs(Pressable, { id: triggerId, "aria-controls": contentId, role: "button", "aria-expanded": isOpen, onPress: toggle, style: [styles.trigger, style], children: [_jsx(Icon, { name: "chevron-right-filled", size: 12, color: colors.gray[500], style: [styles.arrow, isOpen && styles.arrowOpen] }), _jsx(Space, { width: 20 }), typeof trigger === "string" ? (_jsx(LakeText, { variant: "smallMedium", color: colors.gray[900], children: trigger })) : (trigger)] }), isNotNullish(triggerEnd) && _jsx(View, { style: styles.triggerEnd, children: triggerEnd })] }), _jsx(View, { id: contentId, "aria-labelledby": triggerId, role: "region", style: [styles.contentContainer, isOpen && styles.contentContainerDisplayed], children: _jsx(View, { style: styles.contentInner, children: _jsx(View, { style: [styles.content, contentContainerStyle], children: children }) }) })] }));
 };

package/src/components/LakeLabel.js

@@ -4,6 +4,7 @@ import { StyleSheet, unstable_createElement, View, } from "react-native";
 import { match } from "ts-pattern";
 import { commonStyles } from "../constants/commonStyles";
 import { colors, fonts, spacings, texts } from "../constants/design";
+import { getLabelId } from "../utils/a11y";
 import { isNotNullish } from "../utils/nullish";
 import { Box } from "./Box";
 import { LakeText } from "./LakeText";
@@ -44,7 +45,7 @@ export const LakeLabel = ({ label, optionalLabel, description, extra, readOnly =
         target === null || target === void 0 ? void 0 : target.focus();
     }, [id]);
     const renderActions = () => isNotNullish(actions) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 16 }), actionsAlign === "content" && isFormLabel ? (_jsx(View, { style: styles.topActions, children: actions })) : (actions)] }));
-    return (_jsxs(Box, { style: [styles.container, style], direction: "row", alignItems: "center", children: [_jsxs(View, { style: commonStyles.fill, children: [_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", alignItems: "center", children: [_jsxs(Box, { direction: "row", alignItems: "center", shrink: 1, children: [isFormLabel ? (_jsxs(Box, { shrink: 1, children: [_jsxs(Label, { onClick: onClick, htmlFor: id, style: [styles.label, readOnly && { color: readOnlyColor }], children: [label, optionalLabel != null && (_jsx(LakeText, { color: colors.gray[400], style: styles.optionalLabel, children: ` - ${optionalLabel}` }))] }), description != null && (_jsxs(_Fragment, { children: [_jsx(LakeText, { variant: "smallRegular", children: description }), _jsx(Space, { height: 8 })] }))] })) : (_jsxs(LakeText, { variant: "medium", color: readOnlyColor, children: [label, optionalLabel != null && (_jsx(LakeText, { color: colors.gray[400], style: styles.optionalLabel, children: ` - ${optionalLabel}` }))] })), isNotNullish(extra) && extra()] }), isNotNullish(help) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 16 }), help] }))] }), _jsx(Space, { height: match(type)
+    return (_jsxs(Box, { style: [styles.container, style], direction: "row", alignItems: "center", children: [_jsxs(View, { style: commonStyles.fill, children: [_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", alignItems: "center", children: [_jsxs(Box, { direction: "row", alignItems: "center", shrink: 1, children: [isFormLabel ? (_jsxs(Box, { shrink: 1, children: [_jsxs(Label, { id: getLabelId(id), onClick: onClick, htmlFor: id, style: [styles.label, readOnly && { color: readOnlyColor }], children: [label, optionalLabel != null && (_jsx(LakeText, { color: colors.gray[400], style: styles.optionalLabel, children: ` - ${optionalLabel}` }))] }), description != null && (_jsxs(_Fragment, { children: [_jsx(LakeText, { variant: "smallRegular", children: description }), _jsx(Space, { height: 8 })] }))] })) : (_jsxs(LakeText, { variant: "medium", color: readOnlyColor, children: [label, optionalLabel != null && (_jsx(LakeText, { color: colors.gray[400], style: styles.optionalLabel, children: ` - ${optionalLabel}` }))] })), isNotNullish(extra) && extra()] }), isNotNullish(help) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 16 }), help] }))] }), _jsx(Space, { height: match(type)
                             .returnType()
                             .with("formSmall", "viewSmall", () => 4)
                             .with("form", "view", () => 8)

package/src/components/LakeSelect.js

@@ -6,7 +6,7 @@ import { commonStyles } from "../constants/commonStyles";
 import { backgroundColor, colors, invariantColors, radii, shadows, spacings, texts, } from "../constants/design";
 import { useBoolean } from "../hooks/useBoolean";
 import { useMergeRefs } from "../hooks/useMergeRefs";
-import { getFocusableElements } from "../utils/a11y";
+import { getFocusableElements, getLabelId } from "../utils/a11y";
 import { setHighlightApi } from "../utils/highlights";
 import { isNotNullish, isNullishOrEmpty } from "../utils/nullish";
 import { Box } from "./Box";
@@ -217,7 +217,7 @@ export const LakeSelect = ({ ref, title, items, valueStyle, size, color = "curre
     }, [filter, hasSearch]);
     const ListHeaderComponent = useMemo(() => (_jsxs(Box, { direction: "row", alignItems: "center", style: styles.filterContainer, children: [_jsx(TextInput, { autoComplete: "off", inputMode: "search", multiline: false, rows: 1, onChangeText: filterValue => setFilter(filterValue), placeholder: searchPlaceholder, value: filter, onFocus: setFilterFocused.on, onBlur: setFilterFocused.off, style: [styles.filterInput, filterFocused && styles.filterFocused] }), _jsx(Icon, { name: "search-filled", color: colors[color].primary, size: 20, style: styles.searchIcon })] })), [filter, filterFocused, setFilterFocused, searchPlaceholder, color]);
     const ListEmptyComponent = (_jsxs(Box, { justifyContent: "center", alignItems: "center", style: styles.emptyList, children: [_jsx(Icon, { name: "clipboard-search-regular", size: 24, color: colors.gray.primary }), _jsx(Space, { height: 8 }), _jsx(Text, { style: styles.emptyListText, children: t("common.noResult") })] }));
-    return (_jsxs(View, { style: commonStyles.fill, children: [_jsx(Pressable, { id: id, ref: mergedRef, "aria-haspopup": "listbox", role: "button", "aria-expanded": visible, disabled: readOnly || disabled, style: ({ focused, hovered, pressed }) => [
+    return (_jsxs(View, { style: commonStyles.fill, children: [_jsx(Pressable, { id: id, ref: mergedRef, "aria-labelledby": id != null ? `${getLabelId(id)} ${id}` : undefined, "aria-haspopup": "listbox", role: "button", "aria-expanded": visible, disabled: readOnly || disabled, style: ({ focused, hovered, pressed }) => [
                     mode === "normal" ? styles.normal : styles.borderless,
                     size === "small" && styles.small,
                     (disabled || readOnly) && styles.inputDisabled,

package/src/components/MultiSelect.js

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { Pressable, StyleSheet, Text, TextInput, View, } from "react-native";
 import { backgroundColor, colors, radii, shadows, texts } from "../constants/design";
 import { useBoolean } from "../hooks/useBoolean";
+import { getLabelId } from "../utils/a11y";
 import { groupBy } from "../utils/array";
 import { isNotNullish, isNotNullishOrEmpty } from "../utils/nullish";
 import { safeSplitAround } from "../utils/string";
@@ -196,7 +197,7 @@ export const MultiSelect = ({ color = "gray", disabled = false, emptyResultText,
     }, [filteredItems]);
     const ListHeaderComponent = useMemo(() => (_jsxs(Box, { direction: "row", alignItems: "center", style: styles.filterContainer, children: [_jsx(TextInput, { autoComplete: "off", inputMode: "search", multiline: false, rows: 1, onChangeText: filterValue => setFilter(filterValue), placeholder: filterPlaceholder, value: filter, onFocus: setFilterFocused.on, onBlur: setFilterFocused.off, style: [styles.filterInput, filterFocused && styles.filterFocused] }), _jsx(Icon, { name: "search-filled", color: colors[color].primary, size: 20, style: styles.searchIcon })] })), [filter, filterFocused, setFilterFocused, filterPlaceholder, color]);
     const ListEmptyComponent = useMemo(() => (_jsxs(Box, { justifyContent: "center", alignItems: "center", style: styles.emptyList, children: [_jsx(Icon, { name: "clipboard-search-regular", size: 24, color: colors.gray.primary }), isNotNullishOrEmpty(emptyResultText) && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 8 }), _jsx(Text, { style: styles.emptyListText, children: emptyResultText })] }))] })), [emptyResultText]);
-    return (_jsxs(View, { style: style, children: [_jsxs(Pressable, { id: id, ref: inputRef, role: "button", "aria-haspopup": "listbox", "aria-expanded": visible, disabled: disabled, onPress: open, style: ({ hovered, focused }) => [
+    return (_jsxs(View, { style: style, children: [_jsxs(Pressable, { id: id, ref: inputRef, "aria-labelledby": id != null ? `${getLabelId(id)} ${id}` : undefined, role: "button", "aria-haspopup": "listbox", "aria-expanded": visible, disabled: disabled, onPress: open, style: ({ hovered, focused }) => [
                     styles.base,
                     hovered && styles.hovered,
                     (focused || visible) && styles.focused,

package/src/components/PlainListView.js

@@ -166,13 +166,13 @@ export const PlainListView = ({ data: originalData, keyExtractor, rowHeight, gro
             onActiveRowChange === null || onActiveRowChange === void 0 ? void 0 : onActiveRowChange(element);
         }
     }, [activeRowId, onActiveRowChange]);
-    const listWrapper = useMemo(() => withoutScroll ? (_jsx(View, { style: styles.contentContainer })) : (_jsx(ScrollView, { scrollEventThrottle: 32, contentContainerStyle: [
+    const listWrapper = useMemo(() => withoutScroll ? (_jsx(View, { role: "table", "aria-busy": isLoading, style: styles.contentContainer })) : (_jsx(ScrollView, { role: "table", "aria-busy": isLoading, tabIndex: isNullish(getRowLink) ? 0 : undefined, scrollEventThrottle: 32, contentContainerStyle: [
             styles.contentContainer,
             {
                 minHeight: totalHeight + (isLoading ? loading.count * rowHeight : 0),
             },
-        ] })), [isLoading, loading === null || loading === void 0 ? void 0 : loading.count, rowHeight, totalHeight, withoutScroll]);
-    return (_jsx(ResponsiveContainer, { role: "table", style: withoutScroll ? (isEmpty ? commonStyles.fill : undefined) : styles.root, breakpoint: breakpoint, children: ({ large }) => {
+        ] })), [isLoading, loading === null || loading === void 0 ? void 0 : loading.count, rowHeight, totalHeight, withoutScroll, getRowLink]);
+    return (_jsx(ResponsiveContainer, { style: withoutScroll ? (isEmpty ? commonStyles.fill : undefined) : styles.root, breakpoint: breakpoint, children: ({ large }) => {
             const displayColumns = large ? columns : smallColumns;
             return (_jsx(_Fragment, { children: cloneElement(listWrapper, {
                     children: (_jsxs(_Fragment, { children: [!isEmpty && large ? (_jsx(View, { role: "row", style: [
@@ -216,7 +216,7 @@ export const PlainListView = ({ data: originalData, keyExtractor, rowHeight, gro
                                                     children: (_jsx(Row, { id: key, rowHeight: rowHeight, columns: displayColumns, item: item, index: index, extraInfo: extraInfo, isActive: isActive, isHovered: isHovered, large: large, style: rowStyle, onMouseEnter: setHoveredRow, onMouseLeave: removeHoveredRow })),
                                                 });
                                             })] }, groupName));
-                                }) }), _jsx(View, { children: _jsx(View, { "aria-busy": isLoading, style: styles.loadingPlaceholder, children: isLoading ? (_jsx(PlainListViewPlaceholder, { count: loading.count, rowHeight: rowHeight })) : null }) }), isEmpty && isNotNullish(renderEmptyList) && !isLoading ? (_jsx(View, { style: styles.emptyListContainer, children: renderEmptyList() })) : null, _jsx(View, { style: [styles.scrollTracker, { height: onEndReachedThresholdPx }], ref: scrollTrackerRef })] })),
+                                }) }), _jsx(View, { children: _jsx(View, { style: styles.loadingPlaceholder, children: isLoading ? (_jsx(PlainListViewPlaceholder, { count: loading.count, rowHeight: rowHeight })) : null }) }), isEmpty && isNotNullish(renderEmptyList) && !isLoading ? (_jsx(View, { style: styles.emptyListContainer, children: renderEmptyList() })) : null, _jsx(View, { style: [styles.scrollTracker, { height: onEndReachedThresholdPx }], ref: scrollTrackerRef })] })),
                 }) }));
         } }));
 };

package/src/components/Tile.js

@@ -87,11 +87,13 @@ const styles = StyleSheet.create({
     collapsibleContent: {
         display: "grid",
         gridTemplateRows: "0fr",
-        transitionProperty: "grid-template-rows",
+        transitionProperty: "grid-template-rows, visibility",
         transitionDuration: "300ms",
+        visibility: "hidden",
     },
     collapsibleContentOpen: {
         gridTemplateRows: "1fr",
+        visibility: "visible",
     },
     collapsibleInner: {
         overflow: "hidden",
@@ -103,7 +105,7 @@ export const Tile = ({ icon, title, description, headerEnd, footer, flexBasis, c
     const hasHeader = isNotNullish(title) || isNotNullish(headerEnd) || isNotNullish(description) || collapsible;
     const header = (_jsxs(_Fragment, { children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTitleIcon, children: [isNotNullish(icon) && (_jsxs(_Fragment, { children: [icon, _jsx(Space, { height: 12 })] })), isNotNullish(title) && (_jsx(Text, { style: styles.title, role: "heading", "aria-level": 3, children: title }))] }), collapsible ? (_jsx(Icon, { name: "chevron-down-filled", size: 16, color: colors.gray[500], style: [styles.chevron, expanded && styles.chevronOpen] })) : isNotNullish(headerEnd) ? (_jsx(View, { children: headerEnd })) : null] }), isNotNullish(description) && (_jsxs(_Fragment, { children: [isNotNullish(title) && _jsx(Space, { height: 12 }), _jsx(View, { style: styles.descriptionContainer, children: _jsx(LakeText, { numberOfLines: numberOfLines, style: styles.description, children: description }) })] }))] }));
     const content = (_jsxs(_Fragment, { children: [children, isNotNullish(footer) && (_jsx(View, { style: [styles.footer, { marginTop: paddingVertical, marginBottom: -paddingVertical }], children: footer }))] }));
-    return (_jsx(View, { role: "region", style: [
+    return (_jsx(View, { style: [
             styles.container,
             selected === false && styles.unselectedContainer,
             {
@@ -117,7 +119,7 @@ export const Tile = ({ icon, title, description, headerEnd, footer, flexBasis, c
             selected === false && hovered && styles.unselectedHoveredContainer,
             disabled && styles.disabled,
             style,
-        ], children: collapsible ? (_jsxs(_Fragment, { children: [hasHeader && (_jsx(Pressable, { role: "button", "aria-expanded": expanded, "aria-controls": contentId, onPress: toggle, style: styles.headerContainer, children: header })), _jsx(View, { id: contentId, "aria-hidden": !expanded, style: [styles.collapsibleContent, expanded && styles.collapsibleContentOpen], children: _jsxs(View, { style: styles.collapsibleInner, children: [isNotNullish(children) && hasHeader && _jsx(Space, { height: 24 }), content] }) })] })) : (_jsxs(_Fragment, { children: [hasHeader && (_jsxs(View, { style: styles.headerContainer, children: [header, isNotNullish(children) && _jsx(Space, { height: 24 })] })), content] })) }));
+        ], children: collapsible ? (_jsxs(_Fragment, { children: [hasHeader && (_jsx(Pressable, { role: "button", "aria-expanded": expanded, "aria-controls": contentId, onPress: toggle, style: styles.headerContainer, children: header })), _jsx(View, { id: contentId, style: [styles.collapsibleContent, expanded && styles.collapsibleContentOpen], children: _jsxs(View, { style: styles.collapsibleInner, children: [isNotNullish(children) && hasHeader && _jsx(Space, { height: 24 }), content] }) })] })) : (_jsxs(_Fragment, { children: [hasHeader && (_jsxs(View, { style: styles.headerContainer, children: [header, isNotNullish(children) && _jsx(Space, { height: 24 })] })), content] })) }));
 };
 export const TileFullWidthContent = ({ children, flexGrow, fitToBottom = false, }) => {
     return (_jsx(View, { style: [styles.fullWidthContent, fitToBottom && styles.fitToBottom, { flexGrow }], children: children }));

package/src/components/Toggle.d.ts

@@ -4,6 +4,7 @@ type Props = {
     labelOff: string;
     labelOn: string;
     onToggle: (value: boolean) => void;
+    ariaLabel?: string;
 };
-export declare const Toggle: ({ compact, value, labelOff, labelOn, onToggle }: Props) => import("react").JSX.Element;
+export declare const Toggle: ({ compact, value, labelOff, labelOn, onToggle, ariaLabel, }: Props) => import("react").JSX.Element;
 export {};

package/src/components/Toggle.js

@@ -50,7 +50,7 @@ const getItemWidth = (node) => match(node)
     .returnType()
     .with(P.instanceOf(HTMLElement), element => element.offsetWidth)
     .otherwise(() => 0);
-export const Toggle = ({ compact = false, value, labelOff, labelOn, onToggle }) => {
+export const Toggle = ({ compact = false, value, labelOff, labelOn, onToggle, ariaLabel, }) => {
     const [itemsWidth, setItemsWidth] = useState();
     const onViewRef = useRef(null);
     const offViewRef = useRef(null);
@@ -67,7 +67,7 @@ export const Toggle = ({ compact = false, value, labelOff, labelOn, onToggle })
     const onPress = useCallback(() => {
         onToggle(!value);
     }, [onToggle, value]);
-    return (_jsxs(Pressable, { role: "switch", onPress: onPress, "aria-checked": value, style: styles.base, children: [_jsx(View, { role: "presentation", style: [
+    return (_jsxs(Pressable, { role: "switch", onPress: onPress, "aria-checked": value, "aria-label": ariaLabel, style: styles.base, children: [_jsx(View, { role: "presentation", style: [
                     styles.handle,
                     itemsWidth == null
                         ? styles.hidden

package/src/components/VirtualizedList.js

@@ -261,13 +261,13 @@ const ResizeHandle = ({ id, end = false, width, onResize, scrollViewRef }) => {
             };
         }
     }, [id, end]);
-    return (_jsx(Pressable, { ref: ref, role: "none", style: [
+    return (_jsx(Pressable, { ref: ref, "aria-hidden": true, tabIndex: -1, style: [
             styles.resizeHandleZone,
             end ? styles.resizeHandleZoneEnd : styles.resizeHandleZoneStart,
         ], children: ({ hovered }) => (_jsx(View, { style: [styles.resizeHandle, (hovered || isDragging) && styles.resizeHandleActive] })) }));
 };
 export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns, stickedToEndColumns, headerHeight, rowHeight, renderThreshold = 1000, onEndReached, onEndReachedThreshold = 200, loading, extraInfo, keyExtractor, marginHorizontal, renderEmptyList, onColumnResize, getRowLink, }) => {
-    // Used for unique IDs generation (usefull for header IDs and cells aria-describedBy pointing to them)
+    // Used for unique IDs generation (usefull for header IDs)
     const viewId = useId();
     const scrollViewRef = useRef(null);
     const scrollTrackerRef = useRef(null);
@@ -481,7 +481,9 @@ export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns,
             .getOr(false)) {
         return (_jsx(ScrollView, { style: styles.container, contentContainerStyle: styles.emptyListContentContainer, children: renderEmptyList() }));
     }
-    return (_jsxs(ScrollView, { ref: scrollViewRef, role: "table", both: true, style: [styles.container, { marginHorizontal }], onScroll: onScroll, scrollEventThrottle: 32, contentContainerStyle: [
+    return (_jsxs(ScrollView, { ref: scrollViewRef, role: "table", "aria-busy": Option.fromNullable(loading)
+            .map(({ isLoading }) => isLoading)
+            .getOr(false), tabIndex: getRowLink == null ? 0 : undefined, both: true, style: [styles.container, { marginHorizontal }], onScroll: onScroll, scrollEventThrottle: 32, contentContainerStyle: [
             styles.contentContainer,
             {
                 height: containerContainerHeight,
@@ -490,7 +492,7 @@ export const VirtualizedList = ({ variant, data, stickedToStartColumns, columns,
         ], children: [header, rowsToRender
                 .map(({ startIndex, endIndex, data }) => (_jsxs(View, { style: styles.rowsContainer, ref: rowsContainerRef, children: [data.map((item, index) => (_jsx(VirtualizedRow, { viewId: viewId, item: item, rowHeight: rowHeight, absoluteIndex: startIndex + index, variant: variant, stickedToStartColumnsWidth: stickedToStartColumnsWidth, centerColumnsWidth: centerColumnsWidth, stickedToEndColumnsWidth: stickedToEndColumnsWidth, stickedToStartColumns: stickedToStartColumns, columns: columns, stickedToEndColumns: stickedToEndColumns, extraInfo: extraInfo, getRowLink: getRowLink, horizontalScrollPosition: horizontalScrollPosition !== null && horizontalScrollPosition !== void 0 ? horizontalScrollPosition : "NoScroll", stickedToStartFirstCellLeftPadding: stickedToStartFirstCellLeftPadding, centerFirstCellLeftPadding: centerFirstCellLeftPadding, centerLastCellLeftPadding: centerLastCellLeftPadding, stickedToEndLastCellRightPadding: stickedToEndLastCellRightPadding }, keyExtractor(item, startIndex + index)))), Option.fromNullable(loading)
                         .flatMap(({ isLoading, count }) => (isLoading ? Option.Some(count) : Option.None()))
-                        .map(count => (_jsx(View, { "aria-busy": true, style: [
+                        .map(count => (_jsx(View, { style: [
                             styles.loadingPlaceholder,
                             {
                                 top: endIndex * rowHeight,
@@ -541,7 +543,7 @@ const RawVirtualizedRow = ({ viewId, rowHeight, absoluteIndex, variant, stickedT
                     ], children: columns.map(({ id, width, renderCell }, index) => {
                         const columnId = `${viewId}_${id}`;
                         const paddingLeft = index === 0 ? stickedToStartFirstCellLeftPadding : 0;
-                        return (_jsx(View, { style: [styles.cell, { width: width + paddingLeft, paddingLeft }], "aria-describedby": columnId, children: renderCell({
+                        return (_jsx(View, { style: [styles.cell, { width: width + paddingLeft, paddingLeft }], children: renderCell({
                                 columnId,
                                 item,
                                 index: absoluteIndex,
@@ -567,7 +569,7 @@ const RawVirtualizedRow = ({ viewId, rowHeight, absoluteIndex, variant, stickedT
                                 styles.cell,
                                 grow && styles.grow,
                                 { width: width + paddingLeft + paddingRight, paddingLeft, paddingRight },
-                            ], "aria-describedby": columnId, children: renderCell({
+                            ], children: renderCell({
                                 columnId,
                                 item,
                                 index: absoluteIndex,
@@ -589,7 +591,7 @@ const RawVirtualizedRow = ({ viewId, rowHeight, absoluteIndex, variant, stickedT
                     ], children: columns.map(({ id, width, renderCell }, index) => {
                         const columnId = `${viewId}_${id}`;
                         const paddingRight = index === columns.length - 1 ? stickedToEndLastCellRightPadding : 0;
-                        return (_jsx(View, { style: [styles.cell, { width: width + paddingRight, paddingRight }], "aria-describedby": columnId, children: renderCell({
+                        return (_jsx(View, { style: [styles.cell, { width: width + paddingRight, paddingRight }], children: renderCell({
                                 columnId,
                                 item,
                                 index: absoluteIndex,

package/src/utils/a11y.d.ts

@@ -1 +1,2 @@
 export declare const getFocusableElements: (rootNode?: Element, includeRoot?: boolean) => HTMLElement[];
+export declare const getLabelId: (fieldId: string) => string;

package/src/utils/a11y.js

@@ -16,3 +16,6 @@ const FOCUSABLE_SELECTOR = [
 export const getFocusableElements = (rootNode = document.documentElement, includeRoot = true) => {
     return (includeRoot && rootNode.matches(FOCUSABLE_SELECTOR) ? [rootNode] : []).concat(Array.from(rootNode.querySelectorAll(FOCUSABLE_SELECTOR)));
 };
+// `<label for>` doesn't apply to elements that aren't labelable (like a `div` with `role="button"`),
+// so LakeLabel also gives its label this id for fields to reference with `aria-labelledby`
+export const getLabelId = (fieldId) => `${fieldId}-label`;