Update Category Search Modal keyboard accessibility

[marcellamaki]

Summary

Swaps in KButton component to add tab/keyboard nav, focus outline, and hover state. Updates cursor pointer for accuracy.

References

Fixes #8698

Reviewer guidance

Does this make significant enough improvement? Any further design recommendations @jtamiace?

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[indirectlylit]

Thank you, this is a huge improvement!

Two other more minor questions while we're here – cc @jtamiace

1. Icon location: Curious whether it was intentional to not use a KLabeledIcon and instead use a separate row? The layout looks a little odd to my eyes as it is:

current	labeled icon

2. Hover state: Still feels very subtle compared to KDS components. In particular the fade from text to primary is very slow and low-contrast:

[jtamiace]

The icons were meant to be a bit bigger - in the mockup they're 40px, but can adjust to the size that seems right. (sorry, I never included this in the main Figma page for searching)

For the hover state, we could do something like this? Building off some of your suggestions in #8631

[jtamiace]

I don't know if hover states would be better in a follow up issue since there are several UIs that could apply to, otherwise I think this is great!

[indirectlylit]

I don't know if hover states would be better in a follow up issue since there are several UIs

@marcellamaki – up to you. Feel free to merge and I'll file a follow-up issue if you'd prefer.

[indirectlylit]

@jtamiace

in the mockup they're 40px

was this also the case for the non-nested selectors?

[jtamiace]

non-nested selectors

What is this referring to?

[indirectlylit]

Like this one, where there are only "headers" but no child elements:

[jtamiace]

Oh, yes, it'd be the same

[rtibbles]

Going to merge this, let's file follow up issues (although I'm not sure what the precise issue would be).