@conduction/components 2.2.54 → 2.2.56

package/lib/components/formFields/select/select.js

@@ -36,6 +36,13 @@ const selectStyles = {
         fontFamily: `var(--conduction-input-select-placeholder-font-family, var(--utrecht-form-input-placeholder-font-family, ${base.fontFamily}))`,
         color: `var(--conduction-input-select-placeholder-color, var(--utrecht-form-input-placeholder-color, ${base.color}) )`,
     }),
+    dropdownIndicator: (base) => ({
+        ...base,
+        color: "#949494",
+        "&:hover": {
+            color: "#949494",
+        },
+    }),
 };
 const setAttributes = () => {
     const setRoleToPresentation = (selector, role) => {
@@ -47,9 +54,46 @@ const setAttributes = () => {
             element.removeAttribute("aria-live");
         });
     };
+    const updateIndicatorAttributes = (indicator, isInteractive) => {
+        if (isInteractive) {
+            indicator.setAttribute("role", "button");
+            indicator.setAttribute("tabindex", "0");
+            indicator.setAttribute("aria-label", "Clear selection");
+        }
+        else {
+            indicator.setAttribute("role", "presentation");
+            indicator.removeAttribute("tabindex");
+            indicator.removeAttribute("aria-label");
+        }
+    };
+    const setAriaLabelsForIndicators = () => {
+        document.querySelectorAll('[class*="control"]').forEach((control) => {
+            const indicatorsParent = control.querySelector('[class*="indicatorSeparator"]')?.parentElement;
+            if (!indicatorsParent)
+                return;
+            const indicators = indicatorsParent.querySelectorAll('[class*="indicatorContainer"]');
+            const hasSelection = indicators.length === 2;
+            indicators.forEach((indicator, index) => {
+                const isClearButton = hasSelection && index === 0;
+                updateIndicatorAttributes(indicator, isClearButton);
+            });
+        });
+    };
+    // Initial static setup
     setRoleToPresentation('[id*="live-region"]', "presentation");
     setRoleToPresentation('[class*="indicatorSeparator"]', "separator");
     setRoleToPresentation('[class*="a11yText"]', "presentation");
+    // Dynamic setup after render
+    setTimeout(() => {
+        setAriaLabelsForIndicators();
+        const observer = new MutationObserver(setAriaLabelsForIndicators);
+        document.querySelectorAll('[class*="control"]').forEach((control) => {
+            const indicatorsParent = control.querySelector('[class*="indicatorSeparator"]')?.parentElement;
+            if (indicatorsParent) {
+                observer.observe(indicatorsParent, { childList: true, subtree: false });
+            }
+        });
+    }, 100);
 };
 export const SelectMultiple = ({ id, name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, menuPlacement, placeholder, ariaLabel, }) => {
     React.useEffect(() => {

package/lib/components/logo/Logo.d.ts

@@ -3,6 +3,7 @@ interface LogoProps {
     variant?: "header" | "footer" | "navbar";
     onClick?: () => any;
     layoutClassName?: string;
+    ariaLabel?: string;
 }
 export declare const Logo: React.FC<LogoProps>;
 export {};

package/lib/components/logo/Logo.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as styles from "./Logo.module.css";
 import clsx from "clsx";
-export const Logo = ({ onClick, layoutClassName, variant = "header" }) => {
+export const Logo = ({ onClick, layoutClassName, variant = "header", ariaLabel = "logo" }) => {
     return (_jsx("div", { className: clsx(styles.container, styles[variant], [
             onClick && styles.clickable,
             layoutClassName && layoutClassName,
-        ]), onClick }));
+        ]), role: "img", "aria-label": ariaLabel, onClick }));
 };