@nkootstra/block-kit 0.3.2 → 0.3.3

package/dist/index.js

@@ -6325,6 +6325,19 @@ const InputBlockContext = createContext(false);
 function useInInputBlock() {
 	return useContext(InputBlockContext);
 }
+/** The id of the error shown under an `input` block's element, while it has one. */
+const InputErrorContext = createContext(void 0);
+/**
+* Props for the element's focusable control: an `input` block with an error marks it invalid,
+* which also gives it Slack's red focus ring, and describes it with the error text.
+*/
+function useInvalidProps() {
+	const errorId = useContext(InputErrorContext);
+	return errorId ? {
+		"aria-invalid": true,
+		"aria-describedby": errorId
+	} : {};
+}
 //#endregion
 //#region src/elements/Popover.tsx
 /** Space between the anchor and the popover, as in Slack's menus. */
@@ -6419,6 +6432,7 @@ function DatePicker({ element, blockId }) {
 	const [open, setOpen] = useState(false);
 	const rootRef = useRef(null);
 	const inputRef = useFocusOnLoad(element);
+	const invalid = useInvalidProps();
 	const loadFocus = useRef(element.focus_on_load === true);
 	const actionId = element.action_id ?? "";
 	useEffect(() => {
@@ -6472,6 +6486,7 @@ function DatePicker({ element, blockId }) {
 						placeholder: element.placeholder?.text ?? "Select a date",
 						"aria-haspopup": "dialog",
 						"aria-expanded": open,
+						...invalid,
 						ref: inputRef,
 						onFocus: () => {
 							if (loadFocus.current) loadFocus.current = false;
@@ -7097,6 +7112,7 @@ function RichTextInput({ element, blockId }) {
 	const { setValue, dispatch } = useBlockKit();
 	const ref = useRef(null);
 	useFocusOnLoad(element, ref);
+	const invalid = useInvalidProps();
 	const actionId = element.action_id ?? "";
 	const initialText = fromRichText(element.initial_value);
 	useEffect(() => {
@@ -7127,6 +7143,7 @@ function RichTextInput({ element, blockId }) {
 			suppressContentEditableWarning: true,
 			role: "textbox",
 			"aria-multiline": "true",
+			...invalid,
 			"aria-label": element.placeholder?.text ?? actionId,
 			"data-placeholder": element.placeholder?.text,
 			onInput,
@@ -7209,6 +7226,7 @@ function Select({ element, blockId }) {
 	const rootRef = useRef(null);
 	const triggerRef = useRef(null);
 	useFocusOnLoad(element, triggerRef);
+	const invalid = useInvalidProps();
 	const listRef = useRef(null);
 	const remote = source === "external" && loadOptions !== void 0;
 	const minQueryLength = element.min_query_length ?? DEFAULT_MIN_QUERY_LENGTH;
@@ -7367,6 +7385,7 @@ function Select({ element, blockId }) {
 				onClick: () => setOpen((o) => !o),
 				"aria-haspopup": "listbox",
 				"aria-expanded": open,
+				...invalid,
 				children: [multi ? items.length > 0 ? /* @__PURE__ */ jsx("span", {
 					className: "sbk-select__chips",
 					children: items.map((item) => /* @__PURE__ */ jsxs("span", {
@@ -7386,6 +7405,12 @@ function Select({ element, blockId }) {
 								e.stopPropagation();
 								removeItem(item.id);
 							},
+							onKeyDown: (e) => {
+								if (e.key !== "Enter" && e.key !== " ") return;
+								e.preventDefault();
+								e.stopPropagation();
+								removeItem(item.id);
+							},
 							children: /* @__PURE__ */ jsx(CloseIcon, {})
 						})]
 					}, item.id))
@@ -7496,6 +7521,7 @@ function TextInput({ element, blockId }) {
 	const { setValue, dispatch, surface } = useBlockKit();
 	const sizeClass = surface === "message" ? "" : " sbk-text-input--medium";
 	const [value, setLocalValue] = useState(element.initial_value ?? "");
+	const invalid = useInvalidProps();
 	const focusRef = useFocusOnLoad(element);
 	const actionId = element.action_id ?? "";
 	const dispatchEnabled = element.__dispatchAction === true;
@@ -7539,7 +7565,8 @@ function TextInput({ element, blockId }) {
 		placeholder,
 		onKeyDown,
 		ref: focusRef,
-		"aria-label": element.action_id
+		"aria-label": element.action_id,
+		...invalid
 	};
 	const leadingIcon = element.type === "email_text_input" ? /* @__PURE__ */ jsx(EmailIcon, { className: "sbk-text-input__icon" }) : element.type === "url_text_input" ? /* @__PURE__ */ jsx(LinkGlyphIcon, { className: "sbk-text-input__icon" }) : null;
 	if (element.multiline) return /* @__PURE__ */ jsx("textarea", {
@@ -7583,6 +7610,7 @@ function TimePicker({ element, blockId }) {
 	const rootRef = useRef(null);
 	const triggerRef = useRef(null);
 	useFocusOnLoad(element, triggerRef);
+	const invalid = useInvalidProps();
 	const listRef = useRef(null);
 	const actionId = element.action_id ?? "";
 	useEffect(() => {
@@ -7634,6 +7662,7 @@ function TimePicker({ element, blockId }) {
 				onClick: () => setOpen((o) => !o),
 				"aria-haspopup": "listbox",
 				"aria-expanded": open,
+				...invalid,
 				children: [
 					/* @__PURE__ */ jsx(ClockIcon, { className: "sbk-timepicker__icon" }),
 					/* @__PURE__ */ jsx("span", {
@@ -9491,6 +9520,7 @@ function Input({ block, blockId }) {
 		__dispatchAction: block.dispatch_action === true
 	};
 	const error = errors[blockId];
+	const errorId = useId();
 	const showDispatchHint = dispatchHint(block);
 	const showOptional = block.optional && surface !== "message";
 	return /* @__PURE__ */ jsxs("div", {
@@ -9507,13 +9537,16 @@ function Input({ block, blockId }) {
 				className: "sbk-input__element",
 				children: /* @__PURE__ */ jsx(InputBlockContext.Provider, {
 					value: true,
-					children: block.dispatch_action === true ? /* @__PURE__ */ jsx(Element, {
-						element,
-						blockId
-					}) : /* @__PURE__ */ jsx(SuppressActions, { children: /* @__PURE__ */ jsx(Element, {
-						element,
-						blockId
-					}) })
+					children: /* @__PURE__ */ jsx(InputErrorContext.Provider, {
+						value: error ? errorId : void 0,
+						children: block.dispatch_action === true ? /* @__PURE__ */ jsx(Element, {
+							element,
+							blockId
+						}) : /* @__PURE__ */ jsx(SuppressActions, { children: /* @__PURE__ */ jsx(Element, {
+							element,
+							blockId
+						}) })
+					})
 				})
 			}),
 			block.hint && /* @__PURE__ */ jsx("div", {
@@ -9539,6 +9572,7 @@ function Input({ block, blockId }) {
 			}),
 			error && /* @__PURE__ */ jsx("div", {
 				className: "sbk-input__error",
+				id: errorId,
 				children: error
 			})
 		]