@bigtablet/design-system 3.19.3 → 3.20.0

package/dist/index.js

@@ -2905,6 +2905,7 @@ var FieldContext = createContext(void 0);
 function useFieldControl() {
   return useContext(FieldContext);
 }
+var FieldControlBoundary = ({ children }) => /* @__PURE__ */ jsx(FieldContext.Provider, { value: void 0, children });
 var Field = ({
   name,
   label,
@@ -4539,12 +4540,13 @@ var Dropdown = (props) => {
   );
   const fieldsetClassName = cn("dropdown_fieldset", { is_open: isOpen, is_disabled: disabled });
   const listClassName = cn("dropdown_list", { dropdown_list_up: dropUp });
+  const labelledBy = label ? `${dropdownId}_label` : field?.labelId;
   const listStyle = useSpringPresence({
     visible: isOpen,
     from: dropUp ? "translateY(4px)" : "translateY(-4px)"
   });
   return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: rootClassName, children: [
-    label && /* @__PURE__ */ jsx("label", { htmlFor: dropdownId, className: "dropdown_label", children: label }),
+    label && /* @__PURE__ */ jsx("label", { id: `${dropdownId}_label`, htmlFor: dropdownId, className: "dropdown_label", children: label }),
     /* @__PURE__ */ jsx("div", { className: fieldsetClassName, children: /* @__PURE__ */ jsxs(
       "button",
       {
@@ -4552,16 +4554,27 @@ var Dropdown = (props) => {
         id: dropdownId,
         type: "button",
         className: cn("dropdown_control", { is_disabled: disabled }),
+        role: "combobox",
+        "aria-labelledby": [labelledBy, `${dropdownId}_value`].filter(Boolean).join(" "),
         "aria-haspopup": "listbox",
         "aria-expanded": isOpen,
+        "aria-activedescendant": !searchable && isOpen && activeIndex >= 0 && visibleOptions[activeIndex] ? `${dropdownId}_option_${activeIndex}` : void 0,
         "aria-describedby": field?.describedBy,
         "aria-invalid": field?.invalid || void 0,
+        "aria-required": field?.required || void 0,
         "aria-controls": isOpen ? `${dropdownId}_listbox` : void 0,
         onClick: () => !disabled && setIsOpen((o) => !o),
         onKeyDown: onControlKeyDown,
         disabled,
         children: [
-          /* @__PURE__ */ jsx("span", { className: showValue ? "dropdown_value" : "dropdown_placeholder", children: controlText }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: `${dropdownId}_value`,
+              className: showValue ? "dropdown_value" : "dropdown_placeholder",
+              children: controlText
+            }
+          ),
           /* @__PURE__ */ jsx("span", { className: cn("dropdown_icon", { dropdown_icon_open: isOpen }), "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { size: iconSize.lg }) })
         ]
       }
@@ -4608,6 +4621,7 @@ var Dropdown = (props) => {
                   role: "combobox",
                   "aria-autocomplete": "list",
                   "aria-expanded": isOpen,
+                  "aria-required": field?.required || void 0,
                   "aria-controls": `${dropdownId}_listbox`,
                   "aria-activedescendant": activeIndex >= 0 && visibleOptions[activeIndex] ? `${dropdownId}_option_${activeIndex}` : void 0,
                   value: searchText,
@@ -4834,7 +4848,7 @@ var DatePicker = ({
   return /* @__PURE__ */ jsxs("div", { className: rootClassName, style: containerStyle, children: [
     label && /* @__PURE__ */ jsx("span", { className: "date_picker_label", id: groupId, children: label }),
     constraintDesc && /* @__PURE__ */ jsx("span", { id: constraintId, className: "date_picker_sr_only", children: constraintDesc }),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       "div",
       {
         className: "date_picker_fields",
@@ -4842,7 +4856,7 @@ var DatePicker = ({
         "aria-labelledby": field?.labelId ?? (label ? groupId : void 0),
         "aria-describedby": [field?.describedBy, constraintDesc ? constraintId : void 0].filter(Boolean).join(" ") || void 0,
         "aria-invalid": field?.invalid || void 0,
-        children: [
+        children: /* @__PURE__ */ jsxs(FieldControlBoundary, { children: [
           /* @__PURE__ */ jsx(
             Dropdown,
             {
@@ -4882,7 +4896,7 @@ var DatePicker = ({
               disabled: disabled || !month
             }
           )
-        ]
+        ] })
       }
     )
   ] });
@@ -4919,7 +4933,7 @@ var DateRangePicker = ({
         date_range_picker_full_width: fullWidth,
         date_range_picker_disabled: disabled
       }),
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(
         "div",
         {
           className: "date_range_picker_fields",
@@ -4927,7 +4941,7 @@ var DateRangePicker = ({
           "aria-labelledby": field?.labelId,
           "aria-describedby": field?.describedBy,
           "aria-invalid": field?.invalid || void 0,
-          children: [
+          children: /* @__PURE__ */ jsxs(FieldControlBoundary, { children: [
             /* @__PURE__ */ jsx(
               DatePicker,
               {
@@ -4956,7 +4970,7 @@ var DateRangePicker = ({
                 fullWidth: true
               }
             )
-          ]
+          ] })
         }
       )
     }
@@ -6028,7 +6042,7 @@ var TimePicker = ({
       children: [
         label && /* @__PURE__ */ jsx("span", { className: "time_picker_label", id: groupId, children: label }),
         constraint && /* @__PURE__ */ jsx("span", { id: constraintId, className: "time_picker_sr_only", children: constraint }),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           "div",
           {
             className: "time_picker_fields",
@@ -6036,7 +6050,7 @@ var TimePicker = ({
             "aria-labelledby": field?.labelId ?? (label ? groupId : void 0),
             "aria-describedby": [field?.describedBy, constraint ? constraintId : void 0].filter(Boolean).join(" ") || void 0,
             "aria-invalid": field?.invalid || void 0,
-            children: [
+            children: /* @__PURE__ */ jsxs(FieldControlBoundary, { children: [
               /* @__PURE__ */ jsx(
                 Dropdown,
                 {
@@ -6063,7 +6077,7 @@ var TimePicker = ({
                   disabled: disabled || hour === null
                 }
               )
-            ]
+            ] })
           }
         )
       ]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bigtablet/design-system",
-	"version": "3.19.3",
+	"version": "3.20.0",
 	"description": "Bigtablet Design System UI Components",
 	"type": "module",
 	"types": "dist/index.d.ts",