From f33581d58e83affe5a4ea07819c73e6cf4b2378e Mon Sep 17 00:00:00 2001 From: Thijn Date: Wed, 11 Feb 2026 10:57:24 +0100 Subject: [PATCH 1/4] fixed clear button on select not being usable on focus --- README.md | 1 + package.json | 2 +- src/components/formFields/select/select.tsx | 35 ++++++++++++++++++++- 3 files changed, 36 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index eb12a78..e716f7f 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,7 @@ - **Version 2.2 (breaking changes from 2.1.x)** + - 2.2.57: Fixed clear button on SelectSingle not being clickable with keyboard functions - 2.2.56: Fixed WCAG issue in Pagination by adding aria labels to buttons - 2.2.55: - Updated Logo to accept aria-label for accessibility. diff --git a/package.json b/package.json index 0f83061..1e21147 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@conduction/components", - "version": "2.2.56", + "version": "2.2.57", "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)", "main": "lib/index.js", "scripts": { diff --git a/src/components/formFields/select/select.tsx b/src/components/formFields/select/select.tsx index 4743e8d..2b20aa2 100644 --- a/src/components/formFields/select/select.tsx +++ b/src/components/formFields/select/select.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import * as styles from "./select.module.css"; import clsx from "clsx"; import CreatableSelect from "react-select/creatable"; -import ReactSelect, { MenuPlacement, StylesConfig, GroupBase } from "react-select"; +import ReactSelect, { MenuPlacement, StylesConfig, GroupBase, components } from "react-select"; import { Control, Controller, FieldValues } from "react-hook-form"; import { IReactHookFormProps } from "../types"; import { ErrorMessage } from "../errorMessage/ErrorMessage"; @@ -122,6 +122,38 @@ const setAttributes = (): void => { }, 100); }; +// Custom ClearIndicator component that handles keyboard events for accessibility +const ClearIndicator = (props: any) => { + const { clearValue, innerProps, children } = props; + + const handleKeyDown = (event: React.KeyboardEvent) => { + if (event.key === " " || event.key === "Enter") { + event.preventDefault(); + event.stopPropagation(); + if (clearValue) { + clearValue(); + } + if (innerProps?.onClick) { + innerProps.onClick(event); + } + } else if (innerProps?.onKeyDown) { + innerProps.onKeyDown(event); + } + }; + + return ( + + {children} + + ); +}; + export const SelectMultiple = ({ id, name, @@ -251,6 +283,7 @@ export const SelectSingle = ({ styles={selectStyles} placeholder={disabled ? "Disabled..." : placeholder ?? "Select one or more options..."} formatGroupLabel={(group) => } + components={isClearable ? { ClearIndicator } : undefined} /> {errors[name] && !hideErrorMessage && } From b182538d2f90a3cffaf0c9d75bfd4d4256a595a6 Mon Sep 17 00:00:00 2001 From: Thijn Date: Wed, 11 Feb 2026 11:03:30 +0100 Subject: [PATCH 2/4] updated logo to be focusable --- README.md | 4 +++- src/components/logo/Logo.tsx | 11 ++++++++++- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e716f7f..af7d28e 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,9 @@ - **Version 2.2 (breaking changes from 2.1.x)** - - 2.2.57: Fixed clear button on SelectSingle not being clickable with keyboard functions + - 2.2.57: + - Fixed clear button on SelectSingle not being clickable with keyboard functions. + - Fixed Logo not being focusable when being clickable. - 2.2.56: Fixed WCAG issue in Pagination by adding aria labels to buttons - 2.2.55: - Updated Logo to accept aria-label for accessibility. diff --git a/src/components/logo/Logo.tsx b/src/components/logo/Logo.tsx index 45a7e42..40fa8c2 100644 --- a/src/components/logo/Logo.tsx +++ b/src/components/logo/Logo.tsx @@ -10,15 +10,24 @@ interface LogoProps { } export const Logo: React.FC = ({ onClick, layoutClassName, variant = "header", ariaLabel = "logo" }) => { + const handleKeyDown = (event: React.KeyboardEvent) => { + if (onClick && (event.key === "Enter" || event.key === " ")) { + event.preventDefault(); + onClick(); + } + }; + return (
); }; From 489e3a88cd207a8cb7962962b398ebcbae945505 Mon Sep 17 00:00:00 2001 From: Remko Date: Wed, 11 Feb 2026 13:44:50 +0100 Subject: [PATCH 3/4] Updated readme --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index af7d28e..49d105e 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,7 @@ - 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. + - Added more WCAG roles and support to Select box. - 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. From 6dab2c181f65a03a0462fee6603ef03173fac4a6 Mon Sep 17 00:00:00 2001 From: Remko Date: Wed, 11 Feb 2026 13:57:02 +0100 Subject: [PATCH 4/4] Fixed card not being clickable --- README.md | 1 + src/components/card/cardWrapper/CardWrapper.tsx | 15 ++++++++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 49d105e..598a77d 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,7 @@ - 2.2.57: - Fixed clear button on SelectSingle not being clickable with keyboard functions. - Fixed Logo not being focusable when being clickable. + - Fixed CardWrapper not being clickable with keyboard functions - 2.2.56: Fixed WCAG issue in Pagination by adding aria labels to buttons - 2.2.55: - Updated Logo to accept aria-label for accessibility. diff --git a/src/components/card/cardWrapper/CardWrapper.tsx b/src/components/card/cardWrapper/CardWrapper.tsx index 5408cbc..4ef9684 100644 --- a/src/components/card/cardWrapper/CardWrapper.tsx +++ b/src/components/card/cardWrapper/CardWrapper.tsx @@ -2,7 +2,20 @@ import * as React from "react"; import * as styles from "./CardWrapper.module.css"; export const CardWrapper = (props: React.HTMLAttributes): JSX.Element => { - const _props = { ...props, className: `${props.className} ${styles.container}` }; + const handleKeyDown = (event: React.KeyboardEvent) => { + if (props.onClick && (event.key === "Enter" || event.key === " ")) { + event.preventDefault(); + props.onClick(event as any); + } + }; + + const _props = { + ...props, + className: `${props.className} ${styles.container}`, + role: props.onClick ? "button" : undefined, + tabIndex: props.onClick ? 0 : undefined, + ...(props.onClick && { onKeyDown: handleKeyDown }), + }; return
{props.children}
; };