Tabs do not have a visible focus state

## Bug Description

For the site goals widget, whenever we have a lot of tabs, the experience moving tab to tab via keyboard is not the best.

When the user presses the left and right arrow keys, while the focus on the tab does change, the user doesn't really see where the focus is. Granted that underline shouldn't move until we press enter but the focus state should be clearly visible.

Attached a video for your reference where I am pressing left and right but as an end user, I don't know exactly which tab is in focus while doing so. If we had a dotted box around the tab, maybe that would be easier to spot.

https://github.com/user-attachments/assets/babf8c69-986f-4c93-88d2-4f4d791f7f90

## Steps to reproduce

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

## Screenshots

## Additional Context

- PHP Version:
- OS: [e.g. iOS]
- Browser: [e.g. chrome, safari]
- Plugin Version: [e.g. 22]
- Device: [e.g. iPhone6]

---------------

_Do not alter or remove anything below. The following sections will be managed by moderators only._

## Acceptance criteria

*

## Implementation Brief

* [ ]

### Test Coverage

*

## QA Brief

*

## Changelog entry

*

Start by locating the site goals widget and its tab implementation, then reproduce keyboard navigation with the left and right arrows. Done means the focused tab has a clearly visible focus state, while the active underline remains unchanged until Enter is pressed.

Written by the indexing model from the issue text.