style: Improve focus indicator

[YueyingLu]

Description

Changes:

1. change to blue border on focused items
2. remove border and added confirm icon on selected item
3. add the confirm icon
4. add more content for screenshot test
5. add unit test for buttondropdown

Why:

1. to meet a11y color contrast criteria
2. consistent with other focus indicator in the system
3. indicate hover focus and select state with more noticeable different style

How has this been tested?

[How did you test to verify your changes?]

[How can reviewers test these changes efficiently?]

[Check for unexpected visual regressions, see CONTRIBUTING.md for details.]

Documentation changes

[Do the changes include any API documentation changes?]

• [ ] Yes, this change contains documentation changes.
• [ ] No.

Related Links

AWSUI-15375

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• [ ] Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• [ ] Changes do not include unsupported browser features, see CONTRIBUTING.md.
• [ ] _Changes were manually tested for accessibility, see accessibility guidelines.

Security

• [ ] _If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• [x] Changes are covered with new/existing unit tests?
• [x] Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov-commenter]

Codecov Report

Merging #56 (c532f20) into main (d74774c) will increase coverage by 0.07%. The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main      #56      +/-   ##
==========================================
+ Coverage   92.40%   92.47%   +0.07%     
==========================================
  Files         536      536              
  Lines       15482    15510      +28     
  Branches     4253     4257       +4     
==========================================
+ Hits        14306    14343      +37     
+ Misses       1094     1086       -8     
+ Partials       82       81       -1     

Impacted Files	Coverage Δ
src/autosuggest/plain-list.tsx	100.00% <ø> (ø)
src/autosuggest/virtual-list.tsx	90.90% <ø> (ø)
src/autosuggest/autosuggest-option.tsx	96.66% <100.00%> (+0.11%)	:arrow_up:
...on-dropdown/category-elements/category-element.tsx	100.00% <100.00%> (ø)
.../category-elements/expandable-category-element.tsx	100.00% <100.00%> (ø)
...ry-elements/mobile-expandable-category-element.tsx	90.69% <100.00%> (+0.69%)	:arrow_up:
src/button-dropdown/internal.tsx	97.40% <100.00%> (+2.53%)	:arrow_up:
src/button-dropdown/item-element/index.tsx	100.00% <100.00%> (ø)
src/button-dropdown/items-list.tsx	97.22% <100.00%> (+0.44%)	:arrow_up:
src/button-dropdown/utils/use-button-dropdown.ts	90.90% <100.00%> (+7.15%)	:arrow_up:
... and 5 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[pan-kot]

There is a failing check stage in the PR, is this expected and can it be solved?

The visual regression is expected as some styles were touched. It would make sense to run the screenshot tests however.