force-focus-indicator-test-page--2024-09-10--GkhZoGu.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<title>x</title>

	<style>

p { line-height: 1.5; }

/* thanks https://www.tpgi.com/the-anatomy-of-visually-hidden/#where-we-came-in */
.visually-hidden:not(:focus):not(:active) {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

a:focus  {
	outline: 0; 
}

div:focus  {
	outline: 1px solid red; 
}


	</style>

	<script>

window.addEventListener("load", function(event) {
});

	</script>

</head>




<body>
<main>

<button>dummy</button><br>

<a href="#" >link</a><br>

<div tabindex="0">non-native clickable thing w/ tabindex="0"</div> 

<div onclick="fake_function()">non-native clickable thing w/ onclick</div> 

<div role="link" onclick="fake_function()">non-native clickable thing w/ role</div> 


<button>dummy</button>






</main>

</body>

</html>