@swan-io/lake 18.1.1 → 18.1.2

package/package.json

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

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/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`;