[BUG] Missing blue outline of selectable focused item when navigating by keyboard

[Fuzzy3]

Describe the bug

When navigating by keyboard and focus lands on a selectable item, the focused item has poor visual indication that it is currently selected. The focused item should have a blue outline like our kirby-buttons, since the selectable item acts like a button.

Describe how to reproduce the bug

1. Go to the cookbook item page
2. Tab through the page until a selectable item gets focus
3. Watch how the item is dimmed to the same grey as the page background indicating that it received focus. Also watch how it is missing a clearer visual indication that it currently has the focus.

What was the expected behavior?

Selectable items should have a blue outline similar to buttons.

Add any screenshots

First item has focus in the first screenshot.

Please complete the following information:

• OS: [e.g. Windows, MacOS, iOS]
• Browser [e.g. Chrome, Safari]
• Browser version [e.g. 22]

Are there any additional context?

When approaching this issue - make sure that it is also working for items in a menu.

---

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Verification

To make sure the bug is not intended behaviour; it should be verified by a member of team Kirby before moving on to implementation.

• Make sure the NOT verified label has been removed by a member of team Kirby; do not proceed until this is done.

Implementation

The contributor who wants to implement this issue should:

• Make sure you have read: "Before you get coding".
• Signal to others you are working on the issue by assigning yourself.
• Create a branch from the develop branch following our branch naming convention.
• Create a test that reproduces the bug following guidelines in: "The good: Test".
• Write code to fix the bug

Review

Once the issue has been implemented and is ready for review:

• Do a self-review.
• Create a pull-request.