When we press tab key on Spartacus page, there will be a focus state border displaying which wraps the control being focused. The border is drawn as light blue color.

Question

Is this behavior implemented by some coding inside Spartacus, or provided by Angular out of the box? My assumption is, at least, it’s not the browser’s default behavior.

I created a simple HTML page:

<html>
<head>
	<style>
	button {
		padding: 1px;
		margin: 5px;
	}
	</style>
</head>
<body>
<div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
</body>
</html>
Copy the code

And the focus border color is black:

Answer

Its a bit of a mix between Spartacus and default html. Usually, that border box will appear over any focused html element by default. But as we build more complex apps with angular for example, We can end up losing this default border box due to some way we’ve styled an element or have veered from default browser Behaviour. In the instance called Spartacus’ s, we have implemented a border box in css to make sure we can see this focused element that is a little more robust and themed so it works with more of our custom elements

More of Jerry’s original articles can be found in “Wang Zixi” :