nolanlawson/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Focus visible keyboard shortcuts repro</title>
  <style>
      *, *:after, *:before {
          box-sizing: border-box;
      }
      :focus:not(:focus-visible) {
          outline: none;
      }
      :focus-visible {
          outline: 4px solid red;
      }
      body {
          max-width: 600px;
          margin: 0 auto;
      }
      article {
          width: 100%;
          height: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 20px;
          border: 2px solid black;
      }
      button {
          margin: 20px
      }
  </style>
</head>
<body>
<h1>Focus visible keyboard shortcuts repro</h1>

<p>Click the button with the mouse, then press the up/down arrows on the keyboard:</p>

<button type="button">Click here with the mouse</button>

<div tabindex="0" aria-label="feed" aria-role="feed">
  <article tabindex="0" aria-setsize="10" aria-posinset="1">one</article>
  <article tabindex="0" aria-setsize="10" aria-posinset="2">two</article>
  <article tabindex="0" aria-setsize="10" aria-posinset="3">three</article>
  <article tabindex="0" aria-setsize="10" aria-posinset="4">four</article>
  <article tabindex="0" aria-setsize="10" aria-posinset="5">five</article>
  <article tabindex="0" aria-setsize="10" aria-posinset="6">six</article>
  <article tabindex="0" aria-setsize="10" aria-posinset="7">seven</article>
  <article tabindex="0" aria-setsize="10" aria-posinset="8">eight</article>
  <article tabindex="0" aria-setsize="10" aria-posinset="9">nine</article>
  <article tabindex="0" aria-setsize="10" aria-posinset="10">ten</article>
</div>
<script>
  const $ = document.querySelector.bind(document)

  document.addEventListener('keydown', e => {
    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
      const up = e.key === 'ArrowUp'
      let current = parseInt(document.activeElement.getAttribute('aria-posinset') || '-1', 10)
      current += (up ? -1 : 1)
      current = Math.min(10, Math.max(1, current))
      $(`article[aria-posinset="${current}"`).focus()
    }
  })
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Focus visible keyboard shortcuts repro</title>
	<style>
	, :after, *:before {
	box-sizing: border-box;
	}
	:focus:not(:focus-visible) {
	outline: none;
	}
	:focus-visible {
	outline: 4px solid red;
	}
	body {
	max-width: 600px;
	margin: 0 auto;
	}
	article {
	width: 100%;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	border: 2px solid black;
	}
	button {
	margin: 20px
	}
	</style>
	</head>
	<body>
	<h1>Focus visible keyboard shortcuts repro</h1>

	<p>Click the button with the mouse, then press the up/down arrows on the keyboard:</p>

	<button type="button">Click here with the mouse</button>

	<div tabindex="0" aria-label="feed" aria-role="feed">
	<article tabindex="0" aria-setsize="10" aria-posinset="1">one</article>
	<article tabindex="0" aria-setsize="10" aria-posinset="2">two</article>
	<article tabindex="0" aria-setsize="10" aria-posinset="3">three</article>
	<article tabindex="0" aria-setsize="10" aria-posinset="4">four</article>
	<article tabindex="0" aria-setsize="10" aria-posinset="5">five</article>
	<article tabindex="0" aria-setsize="10" aria-posinset="6">six</article>
	<article tabindex="0" aria-setsize="10" aria-posinset="7">seven</article>
	<article tabindex="0" aria-setsize="10" aria-posinset="8">eight</article>
	<article tabindex="0" aria-setsize="10" aria-posinset="9">nine</article>
	<article tabindex="0" aria-setsize="10" aria-posinset="10">ten</article>
	</div>
	<script>
	const $ = document.querySelector.bind(document)

	document.addEventListener('keydown', e => {
	if (e.key === 'ArrowDown' \|\| e.key === 'ArrowUp') {
	const up = e.key === 'ArrowUp'
	let current = parseInt(document.activeElement.getAttribute('aria-posinset') \|\| '-1', 10)
	current += (up ? -1 : 1)
	current = Math.min(10, Math.max(1, current))
	$(`article[aria-posinset="${current}"`).focus()
	}
	})
	</script>
	</body>
	</html>