@bigtablet/design-system 3.19.4 → 3.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +15 -2
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -4540,12 +4540,13 @@ var Dropdown = (props) => {
|
|
|
4540
4540
|
);
|
|
4541
4541
|
const fieldsetClassName = cn("dropdown_fieldset", { is_open: isOpen, is_disabled: disabled });
|
|
4542
4542
|
const listClassName = cn("dropdown_list", { dropdown_list_up: dropUp });
|
|
4543
|
+
const labelledBy = label ? `${dropdownId}_label` : field?.labelId;
|
|
4543
4544
|
const listStyle = useSpringPresence({
|
|
4544
4545
|
visible: isOpen,
|
|
4545
4546
|
from: dropUp ? "translateY(4px)" : "translateY(-4px)"
|
|
4546
4547
|
});
|
|
4547
4548
|
return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: rootClassName, children: [
|
|
4548
|
-
label && /* @__PURE__ */ jsx("label", { htmlFor: dropdownId, className: "dropdown_label", children: label }),
|
|
4549
|
+
label && /* @__PURE__ */ jsx("label", { id: `${dropdownId}_label`, htmlFor: dropdownId, className: "dropdown_label", children: label }),
|
|
4549
4550
|
/* @__PURE__ */ jsx("div", { className: fieldsetClassName, children: /* @__PURE__ */ jsxs(
|
|
4550
4551
|
"button",
|
|
4551
4552
|
{
|
|
@@ -4553,16 +4554,27 @@ var Dropdown = (props) => {
|
|
|
4553
4554
|
id: dropdownId,
|
|
4554
4555
|
type: "button",
|
|
4555
4556
|
className: cn("dropdown_control", { is_disabled: disabled }),
|
|
4557
|
+
role: "combobox",
|
|
4558
|
+
"aria-labelledby": [labelledBy, `${dropdownId}_value`].filter(Boolean).join(" "),
|
|
4556
4559
|
"aria-haspopup": "listbox",
|
|
4557
4560
|
"aria-expanded": isOpen,
|
|
4561
|
+
"aria-activedescendant": !searchable && isOpen && activeIndex >= 0 && visibleOptions[activeIndex] ? `${dropdownId}_option_${activeIndex}` : void 0,
|
|
4558
4562
|
"aria-describedby": field?.describedBy,
|
|
4559
4563
|
"aria-invalid": field?.invalid || void 0,
|
|
4564
|
+
"aria-required": field?.required || void 0,
|
|
4560
4565
|
"aria-controls": isOpen ? `${dropdownId}_listbox` : void 0,
|
|
4561
4566
|
onClick: () => !disabled && setIsOpen((o) => !o),
|
|
4562
4567
|
onKeyDown: onControlKeyDown,
|
|
4563
4568
|
disabled,
|
|
4564
4569
|
children: [
|
|
4565
|
-
/* @__PURE__ */ jsx(
|
|
4570
|
+
/* @__PURE__ */ jsx(
|
|
4571
|
+
"span",
|
|
4572
|
+
{
|
|
4573
|
+
id: `${dropdownId}_value`,
|
|
4574
|
+
className: showValue ? "dropdown_value" : "dropdown_placeholder",
|
|
4575
|
+
children: controlText
|
|
4576
|
+
}
|
|
4577
|
+
),
|
|
4566
4578
|
/* @__PURE__ */ jsx("span", { className: cn("dropdown_icon", { dropdown_icon_open: isOpen }), "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { size: iconSize.lg }) })
|
|
4567
4579
|
]
|
|
4568
4580
|
}
|
|
@@ -4609,6 +4621,7 @@ var Dropdown = (props) => {
|
|
|
4609
4621
|
role: "combobox",
|
|
4610
4622
|
"aria-autocomplete": "list",
|
|
4611
4623
|
"aria-expanded": isOpen,
|
|
4624
|
+
"aria-required": field?.required || void 0,
|
|
4612
4625
|
"aria-controls": `${dropdownId}_listbox`,
|
|
4613
4626
|
"aria-activedescendant": activeIndex >= 0 && visibleOptions[activeIndex] ? `${dropdownId}_option_${activeIndex}` : void 0,
|
|
4614
4627
|
value: searchText,
|