Feat/label for treeview

lib/InputSlider/InputSlider.tsx

@@ -153,7 +153,7 @@ type OwnProps = {
     valueText: string,
   ) => React.ReactNode;
   /**
-   * Accepts a function which returns a string value that provides a user-friendly name
+   * A function which returns a string value that provides a user-friendly name
    * for the current value of the slider. This is important for screen reader users.
    */
   setThumbValueText: (thumbValue: number) => string;

lib/SpinButton/SpinButton.tsx

@@ -19,8 +19,17 @@ import { SpinButtonContext, type SpinButtonContextValue } from "./context";
 import { Root as RootSlot } from "./slots";
 
 export type RenderProps = {
+  /**
+   * The value of the component.
+   */
   value: number;
+  /**
+   * The percentage value of the component.
+   */
   percentageValue: number;
+  /**
+   * The text used to represent the value.
+   */
   valueText: string;
   /**
    * The `disabled` state of the component.
@@ -43,13 +52,44 @@ type OwnProps = {
    * The className applied to the component.
    */
   className?: PropWithRenderContext<string, ClassNameProps>;
+  /**
+   * The minimum allowed value of the spin button.
+   * Should not be greater than or equal to `max`.
+   */
   min: number;
+  /**
+   * The maximum allowed value of the spin button.
+   * Should not be less than or equal to `min`.
+   */
   max: number;
+  /**
+   * The value of the component.
+   */
   value?: number;
+  /**
+   * The default value. Use when the component's `value` state is not controlled.
+   */
   defaultValue?: number;
+  /**
+   * If `true`, the component will be disabled.
+   *
+   * @default false
+   */
   disabled?: boolean;
+  /**
+   * If `true`, the component will be focused automatically.
+   *
+   * @default false
+   */
   autoFocus?: boolean;
+  /**
+   * A function which returns a string value that provides a user-friendly name
+   * for the current value of the component. This is important for screen reader users.
+   */
   setValueText: (value: number) => string;
+  /**
+   * Callback is called when the value changes.
+   */
   onValueChange?: (value: number) => void;
   /**
    * The label of the component.

lib/TreeView/TreeView.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { SystemError, SystemKeys } from "../internals";
+import { SystemError, SystemKeys, getLabelInfo } from "../internals";
 import type { MergeElementProps, PropWithRenderContext } from "../types";
 import {
   componentWithForwardedRef,
@@ -81,6 +81,24 @@ type OwnProps = {
    * Callback is called when an item is selected.
    */
   onSelectStateChange?: (selected: string[]) => void;
+  /**
+   * The label of the component.
+   */
+  label:
+    | {
+        /**
+         * The label to use as `aria-label` property.
+         */
+        screenReaderLabel: string;
+      }
+    | {
+        /**
+         * Identifies the element (or elements) that labels the component.
+         *
+         * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby MDN Web Docs} for more information.
+         */
+        labelledBy: string;
+      };
 };
 
 export type Props = Omit<
@@ -98,6 +116,7 @@ const TreeViewBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
     defaultExpandedDescendants,
     defaultSelectedDescendants,
     selectability,
+    label,
     onSelectStateChange,
     onExpandStateChange,
     onKeyDown,
@@ -166,6 +185,14 @@ const TreeViewBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
     onActiveDescendantElementChange: setActiveElement,
   });
 
+  const labelInfo = getLabelInfo(label, "TreeView", {
+    customErrorMessage: [
+      "Invalid `label` property.",
+      "The `label` property must be in shape of " +
+        "`{ screenReaderLabel: string; } | { labelledBy: string; }`",
+    ].join("\n"),
+  });
+
   const emitSelectState = (selected: string[]) => {
     setSelectedDescendants(selected);
     onSelectStateChange?.(selected);
@@ -529,6 +556,8 @@ const TreeViewBase = (props: Props, ref: React.Ref<HTMLDivElement>) => {
       onBlur={handleBlur}
       aria-multiselectable={isSelectable ? isMultiSelect : undefined}
       aria-activedescendant={activeElement?.id ?? undefined}
+      aria-label={labelInfo.srOnlyLabel}
+      aria-labelledby={labelInfo.labelledBy}
       data-slot={RootSlot}
       className={className}
     >