Should focus states differ depending on the browser?

[adelineleonPD]

I have been working on an interaction and using the NHS service manual as a guide. However I noticed inconsistencies between the different component states.

The button behaviour in Chrome browser is:
Default -> Hover -> Pressed -> Focus

The button behaviour in Safari browser is:
Default -> Hover -> Pressed

The link & back link behaviour in Chrome is:
Default -> Hover -> Focus

The link behaviour in Safari is:
Default -> Hover -> Pressed

The back link behaviour in Safari is:
Default -> Hover

See videos attached:

NHS.interaction.states.Chrome.vs.Safari.mov

NHS.Button.Chrome.vs.Safari.mov

As I was initially only working in Chrome...
For buttons, I was confused why buttons showed Focus state styling briefly before going to the next page - what was the purpose of this?
For links, I was confused why the links used Pressed and Focussed states interchangeably.

The Service manual does not explain that different browsers lead to different state behaviours. As I was following the Service manual in Chrome, I was mislead to believe that the button components I use in my design needed to show Focus state briefly despite the type of user input. I was also mislead to believe links did not have a Pressed state and only used Focus (but they do have a Pressed state in Safari).

The service manual explains that Focus states are for keyboard/other device-input users. Yet in Chrome, users who navigate with a cursor can see the Focus states. So it is not clear whether Focus state styles should be visible for ALL types of input (cursor, keyboard, voice, finger) and it is also not clear when Focus should be used interchangeably with a Pressed state.

In additional to all these questions above, my main question is, is it correct to have focus states differ depending on the browser?