From be539e1561429f48109aa844da8ba8c291a15368 Mon Sep 17 00:00:00 2001 From: mocca102 Date: Tue, 4 Nov 2025 14:38:22 +0200 Subject: [PATCH 1/6] Fix tabIndex accessibility for Search Suggestoins items --- src/components/Autocomplete/SectionItem/SectionItem.tsx | 4 ++-- src/hooks/useCioAutocomplete.ts | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Autocomplete/SectionItem/SectionItem.tsx b/src/components/Autocomplete/SectionItem/SectionItem.tsx index 02fde2e..f8f79dc 100644 --- a/src/components/Autocomplete/SectionItem/SectionItem.tsx +++ b/src/components/Autocomplete/SectionItem/SectionItem.tsx @@ -21,7 +21,7 @@ export default function SectionItem(props: SectionItemProps) { if (isProduct(item)) { defaultChildren = ( - + + { 'data-cnstrc-item-group': item.groupId, 'data-cnstrc-item-name': item.value, 'data-cnstrc-item-id': item.data?.id, + tabIndex: 0, }; }, getInputProps: () => ({ From e1e8e24c5db0b426ab5286b6765ca7bc6a9ef9de Mon Sep 17 00:00:00 2001 From: mocca102 Date: Tue, 4 Nov 2025 15:11:28 +0200 Subject: [PATCH 2/6] Conditionally add non interactive item props --- .../Autocomplete/SectionItem/SectionItem.tsx | 4 ++-- src/hooks/useCioAutocomplete.ts | 21 ++++++++++++++++++- 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/src/components/Autocomplete/SectionItem/SectionItem.tsx b/src/components/Autocomplete/SectionItem/SectionItem.tsx index f8f79dc..02fde2e 100644 --- a/src/components/Autocomplete/SectionItem/SectionItem.tsx +++ b/src/components/Autocomplete/SectionItem/SectionItem.tsx @@ -21,7 +21,7 @@ export default function SectionItem(props: SectionItemProps) { if (isProduct(item)) { defaultChildren = ( - + + { const { index, sectionId } = getItemPosition({ item, items }); const sectionItemTestId = `cio-item-${sectionId?.replace(' ', '')}`; + // Products always have links, Search Suggestions with getSearchResultsUrl have links + const hasLink = + item.data?.url || (item.section === 'Search Suggestions' && getSearchResultsUrl); + + const nonInteractiveItemsProps = { + tabIndex: 0, + onKeyDown: (e: React.KeyboardEvent) => { + const { code, key } = e; + const isEnter = code === 'Enter' || key === 'Enter'; + const isSpace = code === 'Space' || key === ' '; + + if (isEnter || isSpace) { + e.preventDefault(); + // Trigger default click behavior + getItemPropsDownShift({ item, index }).onClick(e); + } + }, + }; + return { ...getItemPropsDownShift({ item, index }), // @deprecated `sectionItemTestId` will be removed as a className in the next major version @@ -126,7 +145,7 @@ const useCioAutocomplete = (options: UseCioAutocompleteOptions) => { 'data-cnstrc-item-group': item.groupId, 'data-cnstrc-item-name': item.value, 'data-cnstrc-item-id': item.data?.id, - tabIndex: 0, + ...(hasLink ? {} : nonInteractiveItemsProps), }; }, getInputProps: () => ({ From 799e6a038e64da5b4c0737f2a6fa013d9125d8e5 Mon Sep 17 00:00:00 2001 From: mocca102 Date: Tue, 4 Nov 2025 15:14:27 +0200 Subject: [PATCH 3/6] Remove space key --- src/hooks/useCioAutocomplete.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/hooks/useCioAutocomplete.ts b/src/hooks/useCioAutocomplete.ts index 77fbf27..f7a44cf 100644 --- a/src/hooks/useCioAutocomplete.ts +++ b/src/hooks/useCioAutocomplete.ts @@ -126,9 +126,8 @@ const useCioAutocomplete = (options: UseCioAutocompleteOptions) => { onKeyDown: (e: React.KeyboardEvent) => { const { code, key } = e; const isEnter = code === 'Enter' || key === 'Enter'; - const isSpace = code === 'Space' || key === ' '; - if (isEnter || isSpace) { + if (isEnter) { e.preventDefault(); // Trigger default click behavior getItemPropsDownShift({ item, index }).onClick(e); From 84616d391f9fd940219f7bb6cd2f91a2b9460fb4 Mon Sep 17 00:00:00 2001 From: Islam Moustafa <58053149+mocca102@users.noreply.github.com> Date: Thu, 6 Nov 2025 15:08:48 +0200 Subject: [PATCH 4/6] Update src/hooks/useCioAutocomplete.ts Co-authored-by: Ahmad Mudaafi' --- src/hooks/useCioAutocomplete.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/useCioAutocomplete.ts b/src/hooks/useCioAutocomplete.ts index f7a44cf..7d3aa82 100644 --- a/src/hooks/useCioAutocomplete.ts +++ b/src/hooks/useCioAutocomplete.ts @@ -123,8 +123,8 @@ const useCioAutocomplete = (options: UseCioAutocompleteOptions) => { const nonInteractiveItemsProps = { tabIndex: 0, - onKeyDown: (e: React.KeyboardEvent) => { - const { code, key } = e; + onKeyDown: (event: React.KeyboardEvent) => { + const { code, key } = event; const isEnter = code === 'Enter' || key === 'Enter'; if (isEnter) { From 7317541ee724d6d31f42ad8259bc1b602e678e48 Mon Sep 17 00:00:00 2001 From: Islam Moustafa <58053149+mocca102@users.noreply.github.com> Date: Thu, 6 Nov 2025 15:09:01 +0200 Subject: [PATCH 5/6] Update src/hooks/useCioAutocomplete.ts Co-authored-by: Ahmad Mudaafi' --- src/hooks/useCioAutocomplete.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useCioAutocomplete.ts b/src/hooks/useCioAutocomplete.ts index 7d3aa82..20e34cc 100644 --- a/src/hooks/useCioAutocomplete.ts +++ b/src/hooks/useCioAutocomplete.ts @@ -119,7 +119,7 @@ const useCioAutocomplete = (options: UseCioAutocompleteOptions) => { // Products always have links, Search Suggestions with getSearchResultsUrl have links const hasLink = - item.data?.url || (item.section === 'Search Suggestions' && getSearchResultsUrl); + item.data?.url || (item.section === 'Search Suggestions' && getSearchResultsUrl) || false; const nonInteractiveItemsProps = { tabIndex: 0, From 9c51f69a5cb43cda5e792383b586a77a8627e445 Mon Sep 17 00:00:00 2001 From: mocca102 Date: Thu, 6 Nov 2025 15:15:15 +0200 Subject: [PATCH 6/6] Rename e -> event --- src/hooks/useCioAutocomplete.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/useCioAutocomplete.ts b/src/hooks/useCioAutocomplete.ts index 20e34cc..a9dc708 100644 --- a/src/hooks/useCioAutocomplete.ts +++ b/src/hooks/useCioAutocomplete.ts @@ -128,9 +128,9 @@ const useCioAutocomplete = (options: UseCioAutocompleteOptions) => { const isEnter = code === 'Enter' || key === 'Enter'; if (isEnter) { - e.preventDefault(); + event.preventDefault(); // Trigger default click behavior - getItemPropsDownShift({ item, index }).onClick(e); + getItemPropsDownShift({ item, index }).onClick(event); } }, };