@conduction/components 2.2.53 → 2.2.55

package/README.md

@@ -4,6 +4,11 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.55: 
+    - Updated Logo to accept aria-label for accessibility.
+    - Fixed bug in DisplaySwitch where layoutClassName is added even when empty.
+    - Fixed color of the Select dropdown icon to be WCAG-AA compliant.
+  - 2.2.54: Updated CardHeader to allow padding-block-end on title.
   - 2.2.53: Updated Pagination and PrimaryTopNav components to allow text-decorations and border-bottoms.
   - 2.2.52: Added hover filter to Logo component.
   - 2.2.51:

package/lib/components/card/cardHeader/CardHeader.module.css

@@ -11,6 +11,7 @@
   /* --conduction-card-header-title-hover-color: #000000; */
   /* --conduction-card-header-title-hover-text-decoration: none; */
   /* --conduction-card-header-title-hover-text-underline-offset: 2px; */
+  /* --conduction-card-header-title-padding-block-end: 0px; */
 
   --conduction-card-header-date-color: #000000;
   --conduction-card-header-date-font-size: 16px;
@@ -35,6 +36,7 @@
   color: var(--conduction-card-header-title-color) !important;
   text-decoration: var(--conduction-card-header-title-text-decoration) !important;
   text-underline-offset: var(--conduction-card-header-title-text-underline-offset) !important;
+  padding-block-end: var(--conduction-card-header-title-padding-block-end) !important;
 }
 
 .title:hover > * {

package/lib/components/displaySwitch/DisplaySwitch.js

@@ -4,7 +4,7 @@ import clsx from "clsx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Button, ButtonGroup } from "@utrecht/component-library-react/dist/css-module";
 const DisplaySwitch = ({ layoutClassName, buttons }) => {
-    return (_jsx(ButtonGroup, { className: clsx(styles.displaySwitchButtons, [layoutClassName] && layoutClassName), children: buttons.map((button, idx) => {
+    return (_jsx(ButtonGroup, { className: clsx(styles.displaySwitchButtons, layoutClassName && layoutClassName), children: buttons.map((button, idx) => {
             // TODO: Once the Rotterdam design system supports the "pressed" state,
             // remove the `appereance` switch, and use the same appearance for each button.
             return (_jsxs(Button, { pressed: button.pressed, appearance: button.pressed ? "secondary-action-button" : "subtle-button", onClick: button.handleClick, className: styles.button, children: [button.icon && _jsx(FontAwesomeIcon, { icon: [button.icon.prefix, button.icon.name] }), _jsx("span", { children: button.label })] }, idx));

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 }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.53",
+  "version": "2.2.55",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

package/src/components/card/cardHeader/CardHeader.module.css

@@ -11,6 +11,7 @@
   /* --conduction-card-header-title-hover-color: #000000; */
   /* --conduction-card-header-title-hover-text-decoration: none; */
   /* --conduction-card-header-title-hover-text-underline-offset: 2px; */
+  /* --conduction-card-header-title-padding-block-end: 0px; */
 
   --conduction-card-header-date-color: #000000;
   --conduction-card-header-date-font-size: 16px;
@@ -35,6 +36,7 @@
   color: var(--conduction-card-header-title-color) !important;
   text-decoration: var(--conduction-card-header-title-text-decoration) !important;
   text-underline-offset: var(--conduction-card-header-title-text-underline-offset) !important;
+  padding-block-end: var(--conduction-card-header-title-padding-block-end) !important;
 }
 
 .title:hover > * {

package/src/components/displaySwitch/DisplaySwitch.tsx

@@ -1,49 +1,49 @@
-import * as React from "react";
-import * as styles from "./DisplaySwitch.module.css";
-import _ from "lodash";
-import clsx from "clsx";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconPrefix, IconName } from "@fortawesome/fontawesome-svg-core";
-import { Button, ButtonGroup } from "@utrecht/component-library-react/dist/css-module";
-
-interface DisplaySwitchProps {
-  buttons: DisplaySwitchButtonProps[];
-  layoutClassName?: string;
-}
-
-interface DisplaySwitchButtonProps {
-  label: string;
-  pressed: boolean;
-  handleClick: () => any;
-  icon?: {
-    name: IconName;
-    prefix: IconPrefix;
-  };
-}
-
-export declare type IDisplaySwitchButton = DisplaySwitchButtonProps;
-
-const DisplaySwitch: React.FC<DisplaySwitchProps> = ({ layoutClassName, buttons }) => {
-  return (
-    <ButtonGroup className={clsx(styles.displaySwitchButtons, [layoutClassName] && layoutClassName)}>
-      {buttons.map((button, idx: number) => {
-        // TODO: Once the Rotterdam design system supports the "pressed" state,
-        // remove the `appereance` switch, and use the same appearance for each button.
-        return (
-          <Button
-            key={idx}
-            pressed={button.pressed}
-            appearance={button.pressed ? "secondary-action-button" : "subtle-button"}
-            onClick={button.handleClick}
-            className={styles.button}
-          >
-            {button.icon && <FontAwesomeIcon icon={[button.icon.prefix, button.icon.name]} />}
-            <span>{button.label}</span>
-          </Button>
-        );
-      })}
-    </ButtonGroup>
-  );
-};
-
-export default DisplaySwitch;
+import * as React from "react";
+import * as styles from "./DisplaySwitch.module.css";
+import _ from "lodash";
+import clsx from "clsx";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconPrefix, IconName } from "@fortawesome/fontawesome-svg-core";
+import { Button, ButtonGroup } from "@utrecht/component-library-react/dist/css-module";
+
+interface DisplaySwitchProps {
+  buttons: DisplaySwitchButtonProps[];
+  layoutClassName?: string;
+}
+
+interface DisplaySwitchButtonProps {
+  label: string;
+  pressed: boolean;
+  handleClick: () => any;
+  icon?: {
+    name: IconName;
+    prefix: IconPrefix;
+  };
+}
+
+export declare type IDisplaySwitchButton = DisplaySwitchButtonProps;
+
+const DisplaySwitch: React.FC<DisplaySwitchProps> = ({ layoutClassName, buttons }) => {
+  return (
+    <ButtonGroup className={clsx(styles.displaySwitchButtons, layoutClassName && layoutClassName)}>
+      {buttons.map((button, idx: number) => {
+        // TODO: Once the Rotterdam design system supports the "pressed" state,
+        // remove the `appereance` switch, and use the same appearance for each button.
+        return (
+          <Button
+            key={idx}
+            pressed={button.pressed}
+            appearance={button.pressed ? "secondary-action-button" : "subtle-button"}
+            onClick={button.handleClick}
+            className={styles.button}
+          >
+            {button.icon && <FontAwesomeIcon icon={[button.icon.prefix, button.icon.name]} />}
+            <span>{button.label}</span>
+          </Button>
+        );
+      })}
+    </ButtonGroup>
+  );
+};
+
+export default DisplaySwitch;

package/src/components/formFields/select/select.tsx

@@ -56,6 +56,13 @@ const selectStyles: StylesConfig = {
     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 = (): void => {
@@ -68,9 +75,51 @@ const setAttributes = (): void => {
     });
   };
 
+  const updateIndicatorAttributes = (indicator: HTMLElement, isInteractive: boolean) => {
+    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 as HTMLElement, 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 = ({

package/src/components/logo/Logo.tsx

@@ -1,21 +1,24 @@
-import * as React from "react";
-import * as styles from "./Logo.module.css";
-import clsx from "clsx";
-
-interface LogoProps {
-  variant?: "header" | "footer" | "navbar";
-  onClick?: () => any;
-  layoutClassName?: string;
-}
-
-export const Logo: React.FC<LogoProps> = ({ onClick, layoutClassName, variant = "header" }) => {
-  return (
-    <div
-      className={clsx(styles.container, styles[variant], [
-        onClick && styles.clickable,
-        layoutClassName && layoutClassName,
-      ])}
-      {...{ onClick }}
-    />
-  );
-};
+import * as React from "react";
+import * as styles from "./Logo.module.css";
+import clsx from "clsx";
+
+interface LogoProps {
+  variant?: "header" | "footer" | "navbar";
+  onClick?: () => any;
+  layoutClassName?: string;
+  ariaLabel?: string;
+}
+
+export const Logo: React.FC<LogoProps> = ({ onClick, layoutClassName, variant = "header", ariaLabel = "logo" }) => {
+  return (
+    <div
+      className={clsx(styles.container, styles[variant], [
+        onClick && styles.clickable,
+        layoutClassName && layoutClassName,
+      ])}
+      role="img"
+      aria-label={ariaLabel}
+      {...{ onClick }}
+    />
+  );
+};

package/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx

@@ -1,133 +1,133 @@
-import * as React from "react";
-import * as styles from "./PrimaryTopNav.module.css";
-import clsx from "clsx";
-import { Link } from "@utrecht/component-library-react/dist/css-module";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBars, faChevronRight } from "@fortawesome/free-solid-svg-icons";
-import { IconPrefix, IconName } from "@fortawesome/fontawesome-svg-core";
-
-interface ITopNavItemBase {
-  label: string;
-  icon?: JSX.Element;
-  current?: boolean | ICurrentItemJSONFormat;
-}
-
-interface ICurrentItemJSONFormat {
-  pathname: string;
-  operator: "equals" | "includes";
-  filterCondition?: {
-    filter: string;
-    value: string;
-    isObject: boolean;
-  };
-}
-
-interface IIconJSONFormat {
-  icon?: {
-    icon: IconName;
-    prefix: IconPrefix;
-    placement: "left" | "right";
-  };
-  customIcon?: {
-    icon: string;
-    placement: "left" | "right";
-  };
-}
-
-interface IHandleClickJSONFormat {
-  link: string;
-  setFilter?: {
-    filter: string;
-    value: string;
-  };
-}
-
-interface ITopNavItemWithSubItems extends ITopNavItemBase {
-  handleClick?: never;
-  subItems: ITopNavItem[];
-}
-
-interface ITopNavItemWithoutSubItems extends ITopNavItemBase {
-  handleClick?: () => any | IHandleClickJSONFormat;
-  type: "readme" | "internal" | "external";
-  subItems?: never;
-}
-
-export type ITopNavItem = ITopNavItemWithSubItems | ITopNavItemWithoutSubItems;
-
-export interface TopNavProps {
-  items: ITopNavItem[];
-  mobileLogo?: JSX.Element;
-  layoutClassName?: string;
-}
-
-export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProps): JSX.Element => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [isMobile, setIsMobile] = React.useState<boolean>(window.innerWidth < 992);
-
-  React.useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(window.innerWidth < 992);
-    };
-
-    window.addEventListener("resize", handleResize);
-
-    return () => window.removeEventListener("resize", handleResize);
-  }, []);
-
-  const handleSubItemClick = (handleClick: any) => {
-    setIsOpen(false);
-
-    handleClick();
-  };
-
-  return (
-    <div className={clsx(styles.container, layoutClassName && layoutClassName)}>
-      <div className={styles.menuToggleContainer}>
-        {mobileLogo}
-
-        <button className={styles.menuToggle} onClick={() => setIsOpen((o) => !o)}>
-          <FontAwesomeIcon icon={faBars} />
-        </button>
-      </div>
-
-      <nav className={clsx(styles.primary, isOpen && styles.isOpen)}>
-        <ul className={styles.ul}>
-          {items.map(({ label, icon, current, handleClick, subItems }, idx) => (
-            <li onClick={handleClick} className={clsx(styles.li, current && styles.current)} key={idx}>
-              <Link
-                className={clsx(
-                  styles.link,
-                  styles.label,
-                  subItems && styles.mobileLink,
-                  current && styles.currentLink,
-                )}
-              >
-                {icon && icon}
-                {label}{" "}
-                {subItems && isMobile && <FontAwesomeIcon className={styles.toggleIcon} icon={faChevronRight} />}
-              </Link>
-
-              {subItems && (
-                <ul className={clsx(styles.dropdown, [subItems.length > 8 && styles.dropdownOverflow])}>
-                  {subItems.map(({ label, icon, current, handleClick }, idx) => (
-                    <li
-                      key={idx}
-                      className={clsx(styles.li, current && styles.dropdownCurrent)}
-                      onClick={() => handleSubItemClick(handleClick)}
-                    >
-                      <Link className={clsx(styles.link, styles.label, current && styles.dropdownCurrentLink)}>
-                        {icon}
-                        {label}
-                      </Link>
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </li>
-          ))}
-        </ul>
-      </nav>
-    </div>
-  );
-};
+import * as React from "react";
+import * as styles from "./PrimaryTopNav.module.css";
+import clsx from "clsx";
+import { Link } from "@utrecht/component-library-react/dist/css-module";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBars, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { IconPrefix, IconName } from "@fortawesome/fontawesome-svg-core";
+
+interface ITopNavItemBase {
+  label: string;
+  icon?: JSX.Element;
+  current?: boolean | ICurrentItemJSONFormat;
+}
+
+interface ICurrentItemJSONFormat {
+  pathname: string;
+  operator: "equals" | "includes";
+  filterCondition?: {
+    filter: string;
+    value: string;
+    isObject: boolean;
+  };
+}
+
+interface IIconJSONFormat {
+  icon?: {
+    icon: IconName;
+    prefix: IconPrefix;
+    placement: "left" | "right";
+  };
+  customIcon?: {
+    icon: string;
+    placement: "left" | "right";
+  };
+}
+
+interface IHandleClickJSONFormat {
+  link: string;
+  setFilter?: {
+    filter: string;
+    value: string;
+  };
+}
+
+interface ITopNavItemWithSubItems extends ITopNavItemBase {
+  handleClick?: never;
+  subItems: ITopNavItem[];
+}
+
+interface ITopNavItemWithoutSubItems extends ITopNavItemBase {
+  handleClick?: () => any | IHandleClickJSONFormat;
+  type: "readme" | "internal" | "external";
+  subItems?: never;
+}
+
+export type ITopNavItem = ITopNavItemWithSubItems | ITopNavItemWithoutSubItems;
+
+export interface TopNavProps {
+  items: ITopNavItem[];
+  mobileLogo?: JSX.Element;
+  layoutClassName?: string;
+}
+
+export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProps): JSX.Element => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [isMobile, setIsMobile] = React.useState<boolean>(window.innerWidth < 992);
+
+  React.useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 992);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const handleSubItemClick = (handleClick: any) => {
+    setIsOpen(false);
+
+    handleClick();
+  };
+
+  return (
+    <div className={clsx(styles.container, layoutClassName && layoutClassName)}>
+      <div className={styles.menuToggleContainer}>
+        {mobileLogo}
+
+        <button className={styles.menuToggle} onClick={() => setIsOpen((o) => !o)}>
+          <FontAwesomeIcon icon={faBars} />
+        </button>
+      </div>
+
+      <nav className={clsx(styles.primary, isOpen && styles.isOpen)}>
+        <ul className={styles.ul}>
+          {items.map(({ label, icon, current, handleClick, subItems }, idx) => (
+            <li onClick={handleClick} className={clsx(styles.li, current && styles.current)} key={idx}>
+              <Link
+                className={clsx(
+                  styles.link,
+                  styles.label,
+                  subItems && styles.mobileLink,
+                  current && styles.currentLink,
+                )}
+              >
+                {icon && icon}
+                {label}{" "}
+                {subItems && isMobile && <FontAwesomeIcon className={styles.toggleIcon} icon={faChevronRight} />}
+              </Link>
+
+              {subItems && (
+                <ul className={clsx(styles.dropdown, [subItems.length > 8 && styles.dropdownOverflow])}>
+                  {subItems.map(({ label, icon, current, handleClick }, idx) => (
+                    <li
+                      key={idx}
+                      className={clsx(styles.li, current && styles.dropdownCurrent)}
+                      onClick={() => handleSubItemClick(handleClick)}
+                    >
+                      <Link className={clsx(styles.link, styles.label, current && styles.dropdownCurrentLink)}>
+                        {icon}
+                        {label}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </div>
+  );
+};