WCAG fixes

README.md

@@ -4,6 +4,10 @@
 
 - **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.

package.json

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

src/components/displaySwitch/DisplaySwitch.tsx

@@ -25,7 +25,7 @@ export declare type IDisplaySwitchButton = DisplaySwitchButtonProps;
 
 const DisplaySwitch: React.FC<DisplaySwitchProps> = ({ layoutClassName, buttons }) => {
   return (
-    <ButtonGroup className={clsx(styles.displaySwitchButtons, [layoutClassName] && layoutClassName)}>
+    <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.

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 = ({

src/components/logo/Logo.tsx

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