@wix/editor-react-components 1.2823.0 → 1.2825.0

package/dist/site/components/DatePicker/component.js

@@ -4353,7 +4353,7 @@ function DatePicker2(props) {
                     children: helperText2
                   }
                 ) : null,
-                /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx("div", { role: "alert", children: /* @__PURE__ */ jsx(
                   $ee014567cb39d3f0$export$f551688fc98f2e09,
                   {
                     className: clsx(
@@ -4364,7 +4364,7 @@ function DatePicker2(props) {
                     "data-testid": TestIds.errorMessage,
                     children: errorMessage2
                   }
-                ),
+                ) }),
                 /* @__PURE__ */ jsx(
                   DatePickerCalendar,
                   {

package/dist/site/components/DatePicker/css.css

@@ -139,6 +139,59 @@
 .calendarCell__Pjcxr[data-outside-month] {
   display: none;
 }
+
+.positioner__38UDd[dir=rtl] .navIcon__LkD1n {
+  transform: scaleX(-1);
+}
+
+@media (forced-colors: active) {
+  .group__2UIvk {
+    background: ButtonFace !important;
+    color: ButtonText;
+    outline: 2px solid ButtonText;
+    outline-offset: 0;
+  }
+  .group__2UIvk[data-hovered], .group__2UIvk[data-focus-within] {
+    outline: 3px solid Highlight;
+  }
+  .group__2UIvk[data-disabled] {
+    outline: none;
+  }
+  .group__2UIvk[data-disabled],
+  .group__2UIvk[data-disabled] .segment__w-IAO,
+  .group__2UIvk[data-disabled] .calendarButton__s-QAb {
+    color: GrayText !important;
+  }
+  .popover__JAzkr {
+    background: Canvas !important;
+    color: CanvasText;
+    outline: 2px solid ButtonText;
+  }
+  .calendarIcon__CYg1H,
+  .navIcon__LkD1n {
+    color: currentColor !important;
+  }
+  .calendarButton__s-QAb[aria-expanded=true], .calendarButton__s-QAb.datePicker__calendar-button--selected {
+    outline: 3px solid Highlight;
+    outline-offset: 1px;
+  }
+  .calendarButton__s-QAb[data-focus-visible] {
+    outline: 3px dashed Highlight !important;
+    outline-offset: 1px !important;
+  }
+  .navButton__5nJy7[data-focus-visible] {
+    outline: 3px solid Highlight !important;
+    outline-offset: 1px !important;
+  }
+  .calendarCell__Pjcxr[data-hovered], .calendarCell__Pjcxr[data-selected] {
+    outline: 3px solid Highlight;
+    outline-offset: -2px;
+  }
+  .calendarCell__Pjcxr[data-focus-visible] {
+    outline: 3px dashed Highlight !important;
+    outline-offset: -2px !important;
+  }
+}
 .fallbackDirection__HeRgn:not([dir]) {
   direction: var(--wix-opt-in-direction);
 }

package/dist/site/components/Dropdown/component.js

@@ -151,6 +151,7 @@ function Dropdown({
                       "aria-haspopup": "listbox",
                       "aria-invalid": inErrorState || void 0,
                       "aria-label": ariaLabel,
+                      "aria-readonly": readOnly || void 0,
                       className: clsx(
                         styles.input,
                         editorElementClassNames.input,
@@ -182,34 +183,43 @@ function Dropdown({
                   /* @__PURE__ */ jsx(Combobox.Portal, { container: popoverContainer, children: /* @__PURE__ */ jsx(Combobox.Positioner, { className: styles.positioner, sideOffset: 4, children: /* @__PURE__ */ jsx(
                     Combobox.Popup,
                     {
+                      role: "presentation",
                       className: clsx(
                         styles.popup,
                         editorElementClassNames.list,
                         (_c = elementProps == null ? void 0 : elementProps.list) == null ? void 0 : _c.className
                       ),
                       "data-testid": TestIds.list,
-                      children: /* @__PURE__ */ jsx(Combobox.List, { className: styles.list, children: options == null ? void 0 : options.map((option2, index) => {
-                        var _a2;
-                        return /* @__PURE__ */ jsx(
-                          Combobox.Item,
-                          {
-                            className: clsx(
-                              styles.option,
-                              editorElementClassNames.option,
-                              (_a2 = elementProps == null ? void 0 : elementProps.option) == null ? void 0 : _a2.className,
-                              // No native pseudo-class exists for "selected" (see
-                              // the manifest's `option.states.selected` comment)
-                              // — applied for real here so the panel's per-state
-                              // export has a real selector to bind to, not just
-                              // the editor's own design-preview injection.
-                              option2 === selectedOption ? DesignStates.option.selected.className : void 0
-                            ),
-                            value: option2,
-                            children: /* @__PURE__ */ jsx("span", { className: styles.optionLabel, children: option2.label })
-                          },
-                          `option-${index}`
-                        );
-                      }) })
+                      children: /* @__PURE__ */ jsx(
+                        Combobox.List,
+                        {
+                          "aria-label": label2 ? void 0 : ariaLabel,
+                          "aria-labelledby": accessibleNameId ?? (label2 ? `${comboboxId}-label` : void 0),
+                          className: styles.list,
+                          children: options == null ? void 0 : options.map((option2, index) => {
+                            var _a2;
+                            return /* @__PURE__ */ jsx(
+                              Combobox.Item,
+                              {
+                                className: clsx(
+                                  styles.option,
+                                  editorElementClassNames.option,
+                                  (_a2 = elementProps == null ? void 0 : elementProps.option) == null ? void 0 : _a2.className,
+                                  // No native pseudo-class exists for "selected" (see
+                                  // the manifest's `option.states.selected` comment)
+                                  // — applied for real here so the panel's per-state
+                                  // export has a real selector to bind to, not just
+                                  // the editor's own design-preview injection.
+                                  option2 === selectedOption ? DesignStates.option.selected.className : void 0
+                                ),
+                                value: option2,
+                                children: /* @__PURE__ */ jsx("span", { className: styles.optionLabel, children: option2.label })
+                              },
+                              `option-${index}`
+                            );
+                          })
+                        }
+                      )
                     }
                   ) }) })
                 ]
@@ -238,6 +248,7 @@ function Dropdown({
                 ),
                 "data-testid": TestIds.errorMessage,
                 id: errorMessageId,
+                role: "alert",
                 match: true,
                 children: errorMessage2
               }

package/dist/site/components/Dropdown/css.css

@@ -15,6 +15,18 @@
   cursor: pointer;
   height: auto;
 }
+#SITE_CONTAINER.focus-ring-active.keyboard-tabbing-on .root__WnTks .input__pbp9w:focus {
+  outline: 2px solid #116dff;
+  outline-offset: 1px;
+  box-shadow: 0 0 1px 2px #ffffff;
+}
+@media (forced-colors: active) {
+  .root__WnTks .input__pbp9w:focus {
+    outline: 3px solid Highlight !important;
+    outline-offset: 1px !important;
+    box-shadow: none;
+  }
+}
 .root__WnTks .input__pbp9w:disabled, .root__WnTks .input__pbp9w.dropdown__input--disabled {
   cursor: not-allowed;
 }
@@ -24,6 +36,19 @@
   gap: 8px;
   cursor: pointer;
 }
+#SITE_CONTAINER.focus-ring-active.keyboard-tabbing-on .root__WnTks .option__QJeiF[data-highlighted] {
+  outline: 2px solid #116dff;
+  outline-offset: 1px;
+  box-shadow: 0 0 1px 2px #ffffff;
+  outline-offset: -2px;
+}
+@media (forced-colors: active) {
+  .root__WnTks .option__QJeiF[data-highlighted] {
+    outline: 3px solid Highlight !important;
+    outline-offset: -3px !important;
+    box-shadow: none;
+  }
+}
 .root__WnTks .option__QJeiF .optionLabel__pBY1S {
   flex: 1;
   min-width: 100px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2823.0",
+  "version": "1.2825.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -224,5 +224,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "c657138bb7378b61785cc6c36b1b621e1d553a250b062c64ba62f72f"
+  "falconPackageHash": "89d43d078a63f322e67c53467b2d34413915a8b167dafad00e0bdb70"
 }