Fix tabIndex accessibility for Search Suggestions items

[mocca102]

Overview

• Search Suggestion items are not keyboard accessible via the tab key

Why this happen?

• Search Suggestion items can be

  tags which are not interactive elements by default

• This does not happen for Produc items since they have a nested tag that's interactive

What changed

• return tabIndex: 0 for getItemProps so every item is keyboard accessible regardless of it's section
• Remove default keyboard tab accessibility from nested tags to avoid duplicate focus
  • If you remove tabIndex={-1} the Product items will be visited twice when you click the tab key

[Copilot]

Pull Request Overview

This PR fixes keyboard accessibility for Search Suggestion items in the autocomplete component by ensuring all suggestion items are focusable via the Tab key. Previously, Search Suggestion items (rendered as <p> tags) were not keyboard accessible, while Product items were accessible due to their nested <a> tags.

Key Changes:

• Added tabIndex: 0 to all autocomplete items via getItemProps to enable keyboard navigation
• Set tabIndex={-1} on nested anchor tags to prevent duplicate focus events when tabbing through Product items

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
src/hooks/useCioAutocomplete.ts	Added tabIndex: 0 to item props to make all autocomplete items keyboard accessible
src/components/Autocomplete/SectionItem/SectionItem.tsx	Set tabIndex={-1} on anchor tags for Product and Search Suggestion items to prevent duplicate tab stops

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Setting tabIndex={-1} removes keyboard accessibility from the anchor tag. While this prevents duplicate focus with the parent item, it also prevents users from following the link using Enter key when the item is focused. Consider using tabIndex={0} on the parent container and handling click/Enter events there instead, or ensure the anchor remains keyboard accessible through event delegation.

[Copilot]

Setting tabIndex={-1} removes keyboard accessibility from the anchor tag. This prevents keyboard users from activating the link with Enter key when focused. The same concern applies here as with the Product items - consider maintaining link accessibility through alternative patterns like event delegation on the parent element.

[Copilot]

Pull Request Overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 2 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The Space key handler prevents default behavior, which will break the ability to scroll the page when focus is on these items. Consider removing e.preventDefault() for the Space key case, or only preventing default if the element is already in focus and the action is intentional. Users expect Space to scroll the page when focused on non-button elements.

Suggested change

	if (isEnter || isSpace) {
	e.preventDefault();
	// Trigger default click behavior
	getItemPropsDownShift({ item, index }).onClick(e);
	if (isEnter) {
	e.preventDefault();
	// Trigger default click behavior
	getItemPropsDownShift({ item, index }).onClick(e);
	} else if (isSpace) {
	// Do not prevent default for Space, to allow scrolling
	getItemPropsDownShift({ item, index }).onClick(e);

[Copilot]

Pull Request Overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Mudaafi]

lgtm, just some lints to consider