@microbit/ui 0.1.0-alpha.18 → 0.1.0-alpha.19

package/lang/ui.pl.json

@@ -1,8 +1,44 @@
 {
+  "ui.breadcrumb": {
+    "defaultMessage": "Breadcrumb",
+    "description": "Accessible label for the breadcrumb navigation trail (the WAI-ARIA APG's conventional name)"
+  },
   "ui.close-action": {
     "defaultMessage": "Zamknij",
     "description": "Close button text or label"
   },
+  "ui.combobox-listbox": {
+    "defaultMessage": "Sugestie",
+    "description": "Accessible label for a ComboBox's dropdown list of suggestions"
+  },
+  "ui.combobox-trigger": {
+    "defaultMessage": "Wyświetlaj sugestie",
+    "description": "Accessible label for the button that opens a ComboBox's suggestions dropdown"
+  },
+  "ui.loading": {
+    "defaultMessage": "Loading",
+    "description": "Announced by screen readers for a button showing a loading spinner"
+  },
+  "ui.numberfield-decrease": {
+    "defaultMessage": "Zmniejsz {fieldLabel}",
+    "description": "Accessible label for a number field's decrement stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.numberfield-increase": {
+    "defaultMessage": "Zwiększ {fieldLabel}",
+    "description": "Accessible label for a number field's increment stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.select-placeholder": {
+    "defaultMessage": "Wybierz element",
+    "description": "Shown in a Select's trigger while nothing is chosen and the app supplies no placeholder"
+  },
+  "ui.select-row-action": {
+    "defaultMessage": "Zaznacz",
+    "description": "Accessible label for a row-selection checkbox in a list or table; screen readers read it together with the row's content"
+  },
+  "ui.toast-region": {
+    "defaultMessage": "{count, plural, one {# powiadomienie} few {# powiadomienia} many {# powiadomień} other {# powiadomienia}}.",
+    "description": "Accessible label for the notifications area; count is the number of notifications showing"
+  },
   "ui.toast-status-error": {
     "defaultMessage": "Error",
     "description": "Announced by screen readers before an error notification"

package/lang/ui.pt-br.json

@@ -1,8 +1,44 @@
 {
+  "ui.breadcrumb": {
+    "defaultMessage": "Breadcrumb",
+    "description": "Accessible label for the breadcrumb navigation trail (the WAI-ARIA APG's conventional name)"
+  },
   "ui.close-action": {
     "defaultMessage": "Fechar",
     "description": "Close button text or label"
   },
+  "ui.combobox-listbox": {
+    "defaultMessage": "Sugestões",
+    "description": "Accessible label for a ComboBox's dropdown list of suggestions"
+  },
+  "ui.combobox-trigger": {
+    "defaultMessage": "Mostrar sugestões",
+    "description": "Accessible label for the button that opens a ComboBox's suggestions dropdown"
+  },
+  "ui.loading": {
+    "defaultMessage": "Loading",
+    "description": "Announced by screen readers for a button showing a loading spinner"
+  },
+  "ui.numberfield-decrease": {
+    "defaultMessage": "Diminuir {fieldLabel}",
+    "description": "Accessible label for a number field's decrement stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.numberfield-increase": {
+    "defaultMessage": "Aumentar {fieldLabel}",
+    "description": "Accessible label for a number field's increment stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.select-placeholder": {
+    "defaultMessage": "Selecione um item",
+    "description": "Shown in a Select's trigger while nothing is chosen and the app supplies no placeholder"
+  },
+  "ui.select-row-action": {
+    "defaultMessage": "Selecionar",
+    "description": "Accessible label for a row-selection checkbox in a list or table; screen readers read it together with the row's content"
+  },
+  "ui.toast-region": {
+    "defaultMessage": "{count, plural, one {# notificação} other {# notificações}}.",
+    "description": "Accessible label for the notifications area; count is the number of notifications showing"
+  },
   "ui.toast-status-error": {
     "defaultMessage": "Error",
     "description": "Announced by screen readers before an error notification"

package/lang/ui.zh-cn.json

@@ -1,8 +1,44 @@
 {
+  "ui.breadcrumb": {
+    "defaultMessage": "Breadcrumb",
+    "description": "Accessible label for the breadcrumb navigation trail (the WAI-ARIA APG's conventional name)"
+  },
   "ui.close-action": {
     "defaultMessage": "关闭",
     "description": "Close button text or label"
   },
+  "ui.combobox-listbox": {
+    "defaultMessage": "建议",
+    "description": "Accessible label for a ComboBox's dropdown list of suggestions"
+  },
+  "ui.combobox-trigger": {
+    "defaultMessage": "显示建议",
+    "description": "Accessible label for the button that opens a ComboBox's suggestions dropdown"
+  },
+  "ui.loading": {
+    "defaultMessage": "Loading",
+    "description": "Announced by screen readers for a button showing a loading spinner"
+  },
+  "ui.numberfield-decrease": {
+    "defaultMessage": "降低 {fieldLabel}",
+    "description": "Accessible label for a number field's decrement stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.numberfield-increase": {
+    "defaultMessage": "提高 {fieldLabel}",
+    "description": "Accessible label for a number field's increment stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.select-placeholder": {
+    "defaultMessage": "选择一个项目",
+    "description": "Shown in a Select's trigger while nothing is chosen and the app supplies no placeholder"
+  },
+  "ui.select-row-action": {
+    "defaultMessage": "选择",
+    "description": "Accessible label for a row-selection checkbox in a list or table; screen readers read it together with the row's content"
+  },
+  "ui.toast-region": {
+    "defaultMessage": "{count, plural, one {# 个通知} other {# 个通知}}。",
+    "description": "Accessible label for the notifications area; count is the number of notifications showing"
+  },
   "ui.toast-status-error": {
     "defaultMessage": "Error",
     "description": "Announced by screen readers before an error notification"

package/lang/ui.zh-tw.json

@@ -1,8 +1,44 @@
 {
+  "ui.breadcrumb": {
+    "defaultMessage": "Breadcrumb",
+    "description": "Accessible label for the breadcrumb navigation trail (the WAI-ARIA APG's conventional name)"
+  },
   "ui.close-action": {
     "defaultMessage": "關閉",
     "description": "Close button text or label"
   },
+  "ui.combobox-listbox": {
+    "defaultMessage": "建議",
+    "description": "Accessible label for a ComboBox's dropdown list of suggestions"
+  },
+  "ui.combobox-trigger": {
+    "defaultMessage": "顯示建議",
+    "description": "Accessible label for the button that opens a ComboBox's suggestions dropdown"
+  },
+  "ui.loading": {
+    "defaultMessage": "Loading",
+    "description": "Announced by screen readers for a button showing a loading spinner"
+  },
+  "ui.numberfield-decrease": {
+    "defaultMessage": "縮小 {fieldLabel}",
+    "description": "Accessible label for a number field's decrement stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.numberfield-increase": {
+    "defaultMessage": "放大 {fieldLabel}",
+    "description": "Accessible label for a number field's increment stepper; fieldLabel is the field's label and may be empty"
+  },
+  "ui.select-placeholder": {
+    "defaultMessage": "選取項目",
+    "description": "Shown in a Select's trigger while nothing is chosen and the app supplies no placeholder"
+  },
+  "ui.select-row-action": {
+    "defaultMessage": "選取",
+    "description": "Accessible label for a row-selection checkbox in a list or table; screen readers read it together with the row's content"
+  },
+  "ui.toast-region": {
+    "defaultMessage": "{count, plural, one {# 個通知} other {# 個通知}}。",
+    "description": "Accessible label for the notifications area; count is the number of notifications showing"
+  },
   "ui.toast-status-error": {
     "defaultMessage": "Error",
     "description": "Announced by screen readers before an error notification"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microbit/ui",
-  "version": "0.1.0-alpha.18",
+  "version": "0.1.0-alpha.19",
   "description": "micro:bit design-system primitives: react-aria-components + Panda CSS with a design language ported from Chakra UI v2. Ships as source; see README for the consumption setup.",
   "license": "MIT",
   "type": "module",

package/src/Avatar.recipe.ts

@@ -44,7 +44,9 @@ export const avatar = defineSlotRecipe({
       fontWeight: "medium",
       borderRadius: "full",
       // Chakra's no-name defaults; the name-derived pair arrives inline.
-      background: "var(--avatar-bg, token(colors.gray.400))",
+      // gray.350 is the decorative-fill stop — 400+ are reserved for
+      // accessible outlines and text (see the ramp in base-preset.ts).
+      background: "var(--avatar-bg, token(colors.gray.350))",
       color: "var(--avatar-color, token(colors.white))",
       borderColor: "white",
     },

package/src/Checkbox.recipe.ts

@@ -27,6 +27,11 @@ export const checkbox = defineSlotRecipe({
       verticalAlign: "top",
       cursor: "pointer",
       position: "relative",
+      // The accessible outline stop (WCAG 1.4.11), as the input recipe.
+      // Stated here rather than on the control — whose `borderColor:
+      // inherit` reads it — so a call site can still tint the whole control
+      // by setting borderColor on the root.
+      borderColor: "gray.400",
       "&[data-disabled]": { cursor: "not-allowed" },
     },
     control: {

package/src/Checkbox.tsx

@@ -8,10 +8,12 @@ import {
   Checkbox as RACCheckbox,
   CheckboxProps as RACCheckboxProps,
 } from "react-aria-components";
+import { useIntl } from "react-intl";
 import { css, cx } from "styled-system/css";
 import { checkbox, CheckboxVariantProps } from "styled-system/recipes";
 import { SystemStyleObject } from "styled-system/types";
 import { FieldHelperText } from "./Field";
+import { uiMessage } from "./messages";
 
 /** What a render-prop child is told about the checkbox. */
 export interface CheckboxState {
@@ -67,14 +69,24 @@ export const Checkbox = ({
 }: CheckboxProps) => {
   const slots = checkbox({ size });
   const helperId = useId();
+  const intl = useIntl();
   const describedBy =
     [rest["aria-describedby"], helperText != null ? helperId : undefined]
       .filter(Boolean)
       .join(" ") || undefined;
+  // Default name for a row-selection checkbox (a GridList row's). A future
+  // Table's select-all header checkbox shares the slot name and will need a
+  // different label.
+  const ariaLabel =
+    rest["aria-label"] ??
+    (rest.slot === "selection"
+      ? intl.formatMessage(uiMessage("ui.select-row-action"))
+      : undefined);
   const checkboxElement = (
     <RACCheckbox
       className={cx(slots.root, cssProp ? css(cssProp) : undefined, className)}
       {...rest}
+      aria-label={ariaLabel}
       aria-describedby={describedBy}
     >
       {({ isSelected, isFocusVisible, isDisabled }) => {

package/src/CheckboxGroup.tsx

@@ -20,6 +20,8 @@ export interface CheckboxGroupProps
    * `aria-label` instead where the design has none.
    */
   label?: ReactNode;
+  /** Label style overrides. */
+  labelCss?: SystemStyleObject;
   /** Per-instance style overrides. */
   css?: SystemStyleObject;
   className?: string;
@@ -36,6 +38,7 @@ export interface CheckboxGroupProps
  */
 export const CheckboxGroup = ({
   label,
+  labelCss,
   helperText,
   errorMessage,
   helperTextCss,
@@ -52,7 +55,9 @@ export const CheckboxGroup = ({
       {(renderProps) => (
         <>
           {label != null && (
-            <FieldLabel isRequired={rest.isRequired}>{label}</FieldLabel>
+            <FieldLabel isRequired={rest.isRequired} css={labelCss}>
+              {label}
+            </FieldLabel>
           )}
           {typeof children === "function" ? children(renderProps) : children}
           <FieldSupport

package/src/ComboBox.tsx

@@ -20,6 +20,7 @@ import {
   Popover,
   PopoverProps,
 } from "react-aria-components";
+import { useIntl } from "react-intl";
 import { RiArrowDownSLine } from "react-icons/ri";
 import { css, cx } from "styled-system/css";
 import { field, select, SelectVariantProps } from "styled-system/recipes";
@@ -31,6 +32,7 @@ import {
   FieldSupportProps,
 } from "./Field";
 import { Icon } from "./Icon";
+import { uiMessage } from "./messages";
 import { SelectSlotProvider } from "./Select";
 
 export interface ComboBoxProps<T extends object>
@@ -40,6 +42,8 @@ export interface ComboBoxProps<T extends object>
     FieldLayoutProps {
   /** Visible label. Use `aria-label` instead where the design has none. */
   label?: ReactNode;
+  /** Label style overrides. */
+  labelCss?: SystemStyleObject;
   placeholder?: string;
   /**
    * Rendered inside the control, before the input — an icon for the current
@@ -105,6 +109,7 @@ export interface ComboBoxProps<T extends object>
 const ComboBoxInner = <T extends object>(
   {
     label,
+    labelCss,
     placeholder,
     startContent,
     children,
@@ -126,6 +131,7 @@ const ComboBoxInner = <T extends object>(
 ) => {
   // As Select: forward whatever variant groups the merged recipe has.
   const [variantProps, rest] = select.splitVariantProps(props);
+  const intl = useIntl();
   const slots = select(variantProps);
   const fieldSlots = field({ size: variantProps.size, labelPosition });
   // Anchor the card to the whole control, not to the bare input inside it —
@@ -163,6 +169,7 @@ const ComboBoxInner = <T extends object>(
             size={variantProps.size}
             labelPosition={labelPosition}
             isRequired={props.isRequired}
+            css={labelCss}
           >
             {label}
           </FieldLabel>
@@ -181,7 +188,10 @@ const ComboBoxInner = <T extends object>(
             className={slots.value}
           />
           {indicator !== null && (
-            <RACButton className={slots.indicator}>
+            <RACButton
+              aria-label={intl.formatMessage(uiMessage("ui.combobox-trigger"))}
+              className={slots.indicator}
+            >
               {indicator ?? <Icon as={RiArrowDownSLine} />}
             </RACButton>
           )}
@@ -198,6 +208,7 @@ const ComboBoxInner = <T extends object>(
             )}
           >
             <RACListBox
+              aria-label={intl.formatMessage(uiMessage("ui.combobox-listbox"))}
               className={slots.list}
               renderEmptyState={
                 emptyState

package/src/Input.recipe.ts

@@ -44,10 +44,12 @@ export const input = defineRecipe({
     transitionProperty: transitionCommon,
     transitionDuration: "normal",
     border: "1px solid",
-    borderColor: "gray.200",
+    // The accessible outline stops: gray.400 is the ramp's 3:1-on-white
+    // boundary grey (WCAG 1.4.11), and hover steps darker, never lighter.
+    borderColor: "gray.400",
     bg: "inherit",
     color: "inherit",
-    _hover: { borderColor: "gray.300" },
+    _hover: { borderColor: "gray.500" },
     "&&:is([data-invalid], :user-invalid)": {
       borderColor: "danger.500",
       boxShadow: "0 0 0 1px token(colors.danger.500)",

package/src/NativeSelectField.tsx

@@ -15,6 +15,8 @@ export interface NativeSelectFieldProps
     FieldLayoutProps {
   /** Visible label, associated with the select via `htmlFor`. */
   label: ReactNode;
+  /** Label style overrides. */
+  labelCss?: SystemStyleObject;
   /** Help text below the field, wired to the select's `aria-describedby`. */
   helperText?: ReactNode;
   /** Per-instance style overrides for the field root. */
@@ -37,7 +39,7 @@ export const NativeSelectField = forwardRef<
   HTMLSelectElement,
   NativeSelectFieldProps
 >(function NativeSelectField(
-  { label, helperText, labelPosition, rootCss, id, ...rest },
+  { label, labelCss, helperText, labelPosition, rootCss, id, ...rest },
   ref,
 ) {
   const generatedId = useId();
@@ -62,6 +64,7 @@ export const NativeSelectField = forwardRef<
         size={rest.size}
         labelPosition={labelPosition}
         isRequired={rest.required}
+        css={labelCss}
       >
         {label}
       </FieldLabel>

package/src/NumberField.tsx

@@ -11,6 +11,7 @@ import {
   NumberField as RACNumberField,
   NumberFieldProps as RACNumberFieldProps,
 } from "react-aria-components";
+import { useIntl } from "react-intl";
 import { RiArrowDownSFill, RiArrowUpSFill } from "react-icons/ri";
 import { css, cx } from "styled-system/css";
 import {
@@ -27,6 +28,7 @@ import {
   FieldSupportProps,
 } from "./Field";
 import { Icon } from "./Icon";
+import { uiMessage } from "./messages";
 
 export interface NumberFieldProps
   extends Omit<RACNumberFieldProps, "className" | "children" | "style">,
@@ -73,8 +75,19 @@ export const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(
     const [variantProps, rest] = input.splitVariantProps(props);
     const slots = numberField({ size: variantProps.size });
     const fieldSlots = field({ size: variantProps.size, labelPosition });
+    const intl = useIntl();
+    // Fold the field's name into the stepper labels as react-aria does; the
+    // trim eats the leftover space when there is no usable name.
+    const fieldLabel =
+      rest["aria-label"] ?? (typeof label === "string" ? label : "");
     return (
       <RACNumberField
+        incrementAriaLabel={intl
+          .formatMessage(uiMessage("ui.numberfield-increase"), { fieldLabel })
+          .trim()}
+        decrementAriaLabel={intl
+          .formatMessage(uiMessage("ui.numberfield-decrease"), { fieldLabel })
+          .trim()}
         {...rest}
         className={cx(
           fieldSlots.root,

package/src/Radio.recipe.ts

@@ -28,6 +28,10 @@ export const radio = defineSlotRecipe({
       verticalAlign: "top",
       cursor: "pointer",
       position: "relative",
+      // As the checkbox: the accessible outline stop (WCAG 1.4.11), on the
+      // root so the control's `borderColor: inherit` reads it and call
+      // sites can still tint at the root.
+      borderColor: "gray.400",
       "&[data-disabled]": { cursor: "not-allowed" },
     },
     control: {

package/src/RadioGroup.tsx

@@ -20,6 +20,8 @@ export interface RadioGroupProps
    * `aria-label` instead where the design has none.
    */
   label?: ReactNode;
+  /** Label style overrides. */
+  labelCss?: SystemStyleObject;
   /** Per-instance style overrides, merged after the recipe. */
   css?: SystemStyleObject;
   className?: string;
@@ -33,6 +35,7 @@ export interface RadioGroupProps
  */
 export const RadioGroup = ({
   label,
+  labelCss,
   helperText,
   errorMessage,
   helperTextCss,
@@ -49,7 +52,9 @@ export const RadioGroup = ({
       {(renderProps) => (
         <>
           {label != null && (
-            <FieldLabel isRequired={rest.isRequired}>{label}</FieldLabel>
+            <FieldLabel isRequired={rest.isRequired} css={labelCss}>
+              {label}
+            </FieldLabel>
           )}
           {typeof children === "function" ? children(renderProps) : children}
           <FieldSupport

package/src/Select.recipe.ts

@@ -63,13 +63,16 @@ export const select = defineSlotRecipe({
       transitionProperty: transitionCommon,
       transitionDuration: "normal",
       border: "1px solid",
-      borderColor: "gray.200",
+      // As the input recipe: the ramp's accessible outline stop, with hover
+      // stepping darker. The dropdown card below keeps the light gray.200 —
+      // it's a surface edge, not a form-control boundary.
+      borderColor: "gray.400",
       bg: "white",
       color: "inherit",
       // As the input recipe, so a Select, a NativeSelect and a TextField in one
       // form all tint together on hover. (react-aria's TextField has no hover
       // effect, but matching the family beats matching their docs.)
-      _hover: { borderColor: "gray.300" },
+      _hover: { borderColor: "gray.500" },
       // `data-invalid` lands on the root — and, in a ComboBox, on the input —
       // but never on the trigger: a RAC Button has no validity state, and our
       // ComboBox control is a plain div. So it comes down from the parent.

package/src/Select.tsx

@@ -15,6 +15,7 @@ import {
   SelectProps as RACSelectProps,
   SelectValue,
 } from "react-aria-components";
+import { useIntl } from "react-intl";
 import { RiArrowDownSLine } from "react-icons/ri";
 import { css, cx } from "styled-system/css";
 import { field, select, SelectVariantProps } from "styled-system/recipes";
@@ -26,6 +27,7 @@ import {
   FieldSupportProps,
 } from "./Field";
 import { Icon } from "./Icon";
+import { uiMessage } from "./messages";
 
 export type SelectSlots = ReturnType<typeof select>;
 
@@ -47,7 +49,12 @@ export interface SelectProps<T extends object>
     FieldLayoutProps {
   /** Visible label. Use `aria-label` instead where the design has none. */
   label?: ReactNode;
-  /** Shown in the trigger while nothing is chosen (Chakra's placeholder). */
+  /** Label style overrides. */
+  labelCss?: SystemStyleObject;
+  /**
+   * Shown in the trigger while nothing is chosen (Chakra's placeholder).
+   * Defaults to a translated "Select an item".
+   */
   placeholder?: string;
   /** `SelectOption`s. */
   children: ReactNode;
@@ -80,6 +87,7 @@ export interface SelectProps<T extends object>
  */
 export const Select = <T extends object>({
   label,
+  labelCss,
   placeholder,
   children,
   indicator,
@@ -97,6 +105,7 @@ export const Select = <T extends object>({
   // splitVariantProps, not a hand-picked list: an app preset can add variant
   // groups to the recipe and they have to reach it (playbook gotcha #37).
   const [variantProps, rest] = select.splitVariantProps(props);
+  const intl = useIntl();
   const slots = select(variantProps);
   const fieldSlots = field({ size: variantProps.size, labelPosition });
   return (
@@ -110,6 +119,7 @@ export const Select = <T extends object>({
             size={variantProps.size}
             labelPosition={labelPosition}
             isRequired={props.isRequired}
+            css={labelCss}
           >
             {label}
           </FieldLabel>
@@ -122,7 +132,10 @@ export const Select = <T extends object>({
         >
           <SelectValue className={slots.value}>
             {({ isPlaceholder, defaultChildren }) =>
-              isPlaceholder ? placeholder ?? "" : defaultChildren
+              isPlaceholder
+                ? placeholder ??
+                  intl.formatMessage(uiMessage("ui.select-placeholder"))
+                : defaultChildren
             }
           </SelectValue>
           {indicator !== null && (

package/src/Skeleton.tsx

@@ -12,12 +12,14 @@ import { SystemStyleObject } from "styled-system/types";
  * caller's `css` is merged into one `css()` call and its overrides win
  * (playbook gotcha #8).
  *
- * The colours are Chakra's, through the same pair of custom properties, so a
- * call site can retint one skeleton without knowing how the animation works.
+ * The colours flow through the same pair of custom properties Chakra used,
+ * so a call site can retint one skeleton without knowing how the animation
+ * works.
  */
 const skeletonBase: SystemStyleObject = {
   "--skeleton-start-color": "token(colors.gray.100)",
-  "--skeleton-end-color": "token(colors.gray.400)",
+  // gray.350, the decorative-fill stop, as the Avatar default.
+  "--skeleton-end-color": "token(colors.gray.350)",
   background: "var(--skeleton-start-color)",
   borderColor: "var(--skeleton-end-color)",
   opacity: 0.7,

package/src/TextField.tsx

@@ -10,6 +10,7 @@ import {
   TextFieldProps as RACTextFieldProps,
 } from "react-aria-components";
 import { field, input, InputVariantProps } from "styled-system/recipes";
+import { SystemStyleObject } from "styled-system/types";
 import {
   FieldLabel,
   FieldLayoutProps,
@@ -27,6 +28,8 @@ export interface TextFieldProps
     FieldLayoutProps {
   /** Visible label (Chakra's FormLabel; asterisk added when `isRequired`). */
   label: ReactNode;
+  /** Label style overrides. */
+  labelCss?: SystemStyleObject;
   onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
   /** Input autocapitalize attribute (react-aria's TextField omits it). */
   autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters";
@@ -41,6 +44,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   function TextField(
     {
       label,
+      labelCss,
       helperText,
       errorMessage,
       helperTextCss,
@@ -61,6 +65,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           size={variantProps.size}
           labelPosition={labelPosition}
           isRequired={rest.isRequired}
+          css={labelCss}
         >
           {label}
         </FieldLabel>

package/src/Toast.tsx

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { ReactNode, useMemo } from "react";
+import { ReactNode, useMemo, useSyncExternalStore } from "react";
 import {
   Button as RACButton,
   UNSTABLE_Toast as RACToast,
@@ -55,6 +55,10 @@ const statusIcon: Record<ToastStatus, IconType> = {
   error: RiErrorWarningFill,
 };
 
+// Module scope so useSyncExternalStore doesn't resubscribe every render.
+const subscribeToQueue = (fn: () => void) => toastQueue.subscribe(fn);
+const getVisibleCount = () => toastQueue.visibleToasts.length;
+
 /**
  * Mount once near the app root, inside the IntlProvider (the close button's
  * label and the status announcements are react-intl messages).
@@ -63,8 +67,19 @@ const statusIcon: Record<ToastStatus, IconType> = {
 export const ToastProvider = () => {
   const intl = useIntl();
   const slots = toastRecipe();
+  // The region's landmark label counts the visible toasts, so it has to
+  // track the queue.
+  const count = useSyncExternalStore(
+    subscribeToQueue,
+    getVisibleCount,
+    getVisibleCount,
+  );
   return (
-    <RACToastRegion queue={toastQueue} className={slots.region}>
+    <RACToastRegion
+      queue={toastQueue}
+      aria-label={intl.formatMessage(uiMessage("ui.toast-region"), { count })}
+      className={slots.region}
+    >
       {({ toast }) => {
         const status = toast.content.status ?? "info";
         return (